Выберите «Гибкий блок» в библиотеке блоков. Он находится в самом верху списка.

При наведении на блок появится панель управления. Вместо привычной кнопки «Дизайн» (как в готовых блоках) «Гибкий блок» имеет кнопку «Редактировать», нажмите её.

Чтобы добавить элемент, нажмите на плюс в левой верхнем углу. Вы можете добавить: текст, текстовую ссылку, список с иконками, изображение, меняющиеся изображение, видео, HTML код, кнопку, форму, выноску, количество товаров в корзине, прямоугольник, круг, звезду, треугольник и пятиугольник.

В элементах с изображением можно поменять размер просто потянув за точки, которые расположены по периметру, но пропорции изображения останутся такими же (за исключением элемента «меняющиеся изображения», здесь можно настроить сохранение пропорции). Размер кнопкам и фигурам можно задать либо в настройках элемента (более точно), либо потянув за точки.

Чтобы увидеть все возможные настройки элемента, нажмите на кнопку «Настройки» в верхнем левом углу.

Текст переносится автоматически в зависимости от заданной ширины.

Если выделить текст, то появится маленькое меню, где можно задать параметры: жирный текст, курсив, зачёркнутый текст, вставить ссылку или добавить маркеры.

Чтобы открыть дополнительные настройки текста, нажмите на иконку ползунков справа от размера шрифта. Здесь можно настроить межбуквенное расстояние, высоту строки, сделать все буквы заглавными и задать SEO-разметку.
Также настроить параллакс, вращение и движение, пульсирование, анимацию при появлении

При загрузке изображение принимает размер фрейма, в который оно загружается. Кнопка «Исходный размер» в настройках возвращает изображение в исходный размер.

Изображение можно сделать ссылкой — при клике на него пользователь переходит на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.

Чтобы сделать изображение круглым, оно изначально должно быть квадратным, а радиус скругления равен половине длины стороны.

Загрузите несколько изображений, которые должны сменять друг друга. При загрузке можно добавить сразу все нужные файлы.

Кадрирование изображений можно настроить двумя способами: обрезать под размер – изображение обрезается под ширину фрейма, сохранять пропорции – ширина/высота фрейма не влияет на изображение, оно остается в исходном размере.

Смену изображений можно задать по времени или при прокрутке.

Вставьте ссылку на видео из видеохостинга. Задайте размер фрейма через настройки или потянув за контурные точки.

Добавьте нужный вам HTML код. Например карту.

К карте добавим контактную информацию и готово.

У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень. Размер кнопки задается в настройках, либо растяжением за контурные точки.

У формы в «Гибком блоке» две настройки.

Первая стандартная, которая вызывается либо Tab, либо нажатием на кнопку «Настройки» в верхнем левом углу. Здесь вы можете задать стиль формы, применить к ней анимацию, настроить стиль кнопки.

Вторая настройка вызывается двойным кликом по форме. Здесь настраиваются необходимые поля (стандартные: имя, e-mail, телефон, адрес; произвольные: текстовое поле, выпадающий список, радиокнопка, чекбокс, дата, файл и скрытое поле), а также обязательное заполнение полей, капча, текст на кнопке и текст сообщения для пользователя.

Выноска — это интерактивный элемент, при наведении на который появляется подсказка с текстом.

Вы можете настроить цвет, радиус пульсирования, тень, размер и настроить анимацию. А также настроить текст, расположение текста, ширину плашки под текстом, цвет фона и когда появляется текст: при наведении или по клику.

В «Гибком блоке» вы можете добавить прямоугольник, круг, звезду, треугольник и пятиугольник (+ из прямоугольника всегда можно сделать линию). Все фигуры можно тянуть в разные стороны, сохраняя или меняя пропорции.

Ко всем фигурам можно применить стандартные настройки: цвет, размер, позиционирование и анимацию, а также прикреплять к ним ссылки.

Прямоугольник в отличие от остальных фигур имеет возможность настроить скругление углов и тень.

В «Гибком блоке» вы можете настроить адаптацию для основных типов экранов:

• 1160 – MAX px (компьютеры)
• 940 px (планшет горизонтальный)
• 620 px (планшет вертикальный)
• 460 px (смартфон горизонтальный)
• 300 px (смартфон вертикальный)

Этого достаточно, чтобы элементы отображались корректно на всех устройствах.
После того, как вы создали дизайн на десктопе (компьютере), переключитесь на разные экраны и там, где необходимо, поправьте, например, ширину колонки текста, размер изображения, размер шрифта, высоту или расположение элементов.

Если кликнуть в пустое место, то в настройках будут отображаться настройки артборда.
Высота контента настраивается в пикселях с клавиатуры или движением ползунка. Также ее можно поменять потянув мышкой за край контейнера.

В настройках можно настроить отступы, цвет фона, поставить на фон видео или картинку

Контейнер – это основная рабочая среда (артборд). Модульная сетка помогает не только ориентироваться в контейнере, но и условно обозначает границы экрана.

Иногда требуется привязать элемент не к сетке, а к экрану. Например, сделаем так, чтобы круг всегда был в левом верхнем углу любого экрана. Для этого нужно открыть настройки элемента выбрать привязку «Экран» и задать координаты. В нашем случае Х = 0, Y = 0.

Аналогичные действия при привязке к контейнеру.