Справочник Базиум
Гибкий блок
Начало работы
Гибкий блок – это редактор, который позволяет создавать уникальный дизайн с анимацией и параллаксом различных элементов.
1
Как добавить «Гибкий блок» на страницу
Выберите «Гибкий блок» в библиотеке блоков. Он находится в самом верху списка.
При наведении на блок появится панель управления. Вместо привычной кнопки «Дизайн» (как в готовых блоках) «Гибкий блок» имеет кнопку «Редактировать», нажмите её.
2
Что и как в «Гибком блоке»
3
Добавление и настройки элементов
Чтобы добавить элемент, нажмите на плюс в левой верхнем углу.
Вы можете добавить: текст, текстовую ссылку, список с иконками, изображение, меняющиеся изображение, видео, HTML код, кнопку, форму, выноску, количество товаров в корзине, прямоугольник, круг, звезду, треугольник и пятиугольник.
Вы можете добавить: текст, текстовую ссылку, список с иконками, изображение, меняющиеся изображение, видео, HTML код, кнопку, форму, выноску, количество товаров в корзине, прямоугольник, круг, звезду, треугольник и пятиугольник.
В элементах с изображением можно поменять размер просто потянув за точки, которые расположены по периметру, но пропорции изображения останутся такими же (за исключением элемента «меняющиеся изображения», здесь можно настроить сохранение пропорции).
Размер кнопкам и фигурам можно задать либо в настройках элемента (более точно), либо потянув за точки.
Размер кнопкам и фигурам можно задать либо в настройках элемента (более точно), либо потянув за точки.
Если зажать на клавиатуре ⇧ Shift, то элементы сохранят пропорции при их увеличении или уменьшении.
Если выделить несколько объектов сразу, то их можно выровнять по горизонтали и по вертикали относительно друг друга, относительно контейнера или относительно окна.
Чтобы удалить элемент, нажмите на клавиатуре Backspace или в настройках на кнопку «Удалить» в самом верху.
Также можно удалить несколько элементов выделив их.
Чтобы увидеть все возможные настройки элемента, нажмите на кнопку «Настройки» в верхнем левом углу.
Вызвать настройки также можно нажав на клавиатуре ⇥ Tab.
Чтобы редактировать элемент, кликните в его зоне два раза или в настройках нажмите на кнопку «Редактировать» в самом вверху.
3.1
Настройки текста
Текст переносится автоматически в зависимости от заданной ширины.
Если выделить текст, то появится маленькое меню, где можно задать параметры: жирный текст, курсив, зачёркнутый текст, вставить ссылку или добавить маркеры.
Если выделить текст, то появится маленькое меню, где можно задать параметры: жирный текст, курсив, зачёркнутый текст, вставить ссылку или добавить маркеры.
*Про привязку к контейнеру или экрану подробно здесь
Чтобы открыть дополнительные настройки текста, нажмите на иконку ползунков справа от размера шрифта. Здесь можно настроить межбуквенное расстояние, высоту строки, сделать все буквы заглавными и задать SEO-разметку.
Если поставить галочку напротив «Плашка под текстом» откроется дополнительная настройка плашки. Можно настроить цвет, вертикальные и горизонтальные отступы, радиус скругления и тень.
*Параллакс, вращение и движение, пульсирование, анимация при появлении – вот тут есть хорошая демонстрация
Настройки элемента «Текстовая ссылка» отличаются только наличием поля для ввода адреса ссылки.
Отличие настроек элемента «Список с иконками» от настроек текста – это раздел настройки вида иконок и отступов между ними и текстом.
3.2
Настройки изображения
При загрузке изображение принимает размер фрейма, в который оно загружается. Кнопка «Исходный размер» в настройках возвращает изображение в исходный размер.
Изображение можно сделать ссылкой — при клике на него пользователь переходит на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.
Чтобы сделать изображение круглым, оно изначально должно быть квадратным, а радиус скругления равен половине длины стороны.
То есть если у картинки размер 200×200 px, задайте радиус 100,
для размера 100×100 px – радиус 50 и так далее.
То есть если у картинки размер 200×200 px, задайте радиус 100,
для размера 100×100 px – радиус 50 и так далее.
К изображению можно добавить тень. Настроить уникальную или выбрать из заранее настроенных.
3.3
Меняющиеся изображения
Загрузите несколько изображений, которые должны сменять друг друга. При загрузке можно добавить сразу все нужные файлы.
Кадрирование изображений можно настроить двумя способами: обрезать под размер – изображение обрезается под ширину фрейма, сохранять пропорции – ширина/высота фрейма не влияет на изображение, оно остается в исходном размере.
Смену изображений можно задать по времени или при прокрутке.
Смена изображений по времени:
Смена изображений при прокрутке:
Установите параметры смены изображений: количество пикселей, через которое изображение сменится (при прокрутке) и секунды (по времени), установите цикличность.
Выберите эффект при смене изображений, то есть как изображения будут сменять друг друга: переключением, затуханием или сменой слева.
3.4
Видео
Вставьте ссылку на видео из видеохостинга. Задайте размер фрейма через настройки или потянув за контурные точки.
3.4
HTML код
Добавьте нужный вам HTML код. Например карту.
К карте добавим контактную информацию и готово.
3.5
Кнопка
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Размер кнопки задается в настройках, либо растяжением за контурные точки.
Размер кнопки задается в настройках, либо растяжением за контурные точки.
Ссылка добавляется в настройках (см. картинку выше).
Оформление кнопки может быть уникальным или выберите заранее заданный стиль кнопки.
Оформление кнопки может быть уникальным или выберите заранее заданный стиль кнопки.
3.6
Настройка формы
У формы в «Гибком блоке» две настройки.
Первая стандартная, которая вызывается либо Tab, либо нажатием на кнопку «Настройки» в верхнем левом углу. Здесь вы можете задать стиль формы, применить к ней анимацию, настроить стиль кнопки.
Первая стандартная, которая вызывается либо Tab, либо нажатием на кнопку «Настройки» в верхнем левом углу. Здесь вы можете задать стиль формы, применить к ней анимацию, настроить стиль кнопки.
Вторая настройка вызывается двойным кликом по форме. Здесь настраиваются необходимые поля (стандартные: имя, e-mail, телефон, адрес; произвольные: текстовое поле, выпадающий список, радиокнопка, чекбокс, дата, файл и скрытое поле), а также обязательное заполнение полей, капча, текст на кнопке и текст сообщения для пользователя.
3.7
Выноска
Выноска — это интерактивный элемент, при наведении на который появляется подсказка с текстом.
Вы можете настроить цвет, радиус пульсирования, тень, размер и настроить анимацию. А также настроить текст, расположение текста, ширину плашки под текстом, цвет фона и когда появляется текст: при наведении или по клику.
После распределения всех элементов в блоке и использования выноски обязательнее проверьте расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась.
3.8
Фигуры
В «Гибком блоке» вы можете добавить прямоугольник, круг, звезду, треугольник и пятиугольник
(+ из прямоугольника всегда можно сделать линию). Все фигуры можно тянуть в разные стороны, сохраняя или меняя пропорции.
(+ из прямоугольника всегда можно сделать линию). Все фигуры можно тянуть в разные стороны, сохраняя или меняя пропорции.
Ко всем фигурам можно применить стандартные настройки: цвет, размер, позиционирование и анимацию, а также прикреплять к ним ссылки.
Прямоугольник в отличие от остальных фигур имеет возможность настроить скругление углов и тень.
4
Адаптация под разные устройства и размеры экрана
В «Гибком блоке» вы можете настроить адаптацию для основных типов экранов:
1160 – MAX px (компьютеры)
940 px (планшет горизонтальный)
620 px (планшет вертикальный)
460 px (смартфон горизонтальный)
300 px (смартфон вертикальный)
Этого достаточно, чтобы элементы отображались корректно на всех устройствах.
После того, как вы создали дизайн на десктопе (компьютере), переключитесь на разные экраны и там, где необходимо, поправьте, например, ширину колонки текста, размер изображения, размер шрифта, высоту или расположение элементов.
После того, как вы создали дизайн на десктопе (компьютере), переключитесь на разные экраны и там, где необходимо, поправьте, например, ширину колонки текста, размер изображения, размер шрифта, высоту или расположение элементов.
5
Настройки основной области (артборда)
Если кликнуть в пустое место, то в настройках будут отображаться настройки артборда.
Высота контента настраивается в пикселях с клавиатуры или движением ползунка. Также ее можно поменять потянув мышкой за край контейнера.
Высота контента настраивается в пикселях с клавиатуры или движением ползунка. Также ее можно поменять потянув мышкой за край контейнера.
В настройках можно настроить отступы. Выберите заранее настроенные или произвольный отступы. При произвольных отступах можно отдельно настроить отступы на мобильных.
Еще можно настроить цвет фона: сплошной или градиент. Цвет может быть произвольным, по коду или из заранее заданного стиля.
Также на фон можно поставить видео или картинку.
Загрузите изображение с компютера или из галереи. Нажмите на иконку с ползунками справа от поля с загрузкой изображения – откроется допольнитная настройка фонового изображения. Настройте вид изображения, позиционирование на компьютерах и мобильных, прокрутку и заливку. Заливка также может быть сплошной или градиентом. Настройте прозрачность заливки.
Загрузите изображение с компютера или из галереи. Нажмите на иконку с ползунками справа от поля с загрузкой изображения – откроется допольнитная настройка фонового изображения. Настройте вид изображения, позиционирование на компьютерах и мобильных, прокрутку и заливку. Заливка также может быть сплошной или градиентом. Настройте прозрачность заливки.
6
Что такое контейнер и как настроить привязку элементов
Контейнер – это основная рабочая среда (артборд). Модульная сетка помогает не только ориентироваться в контейнере, но и условно обозначает границы экрана.
Иногда требуется привязать элемент не к сетке, а к экрану. Например, сделаем так, чтобы круг всегда был в левом верхнем углу любого экрана. Для этого нужно открыть настройки элемента выбрать привязку «Экран» и задать координаты. В нашем случае Х = 0, Y = 0.
Аналогичные действия при привязке к контейнеру.
В «Гибком блоке» размер элементов также может задаваться в процентах. Таким образом получаются элементы, которые меняют размер, в зависимости от окна браузера.
Например, вы хотите, чтобы половина экрана всегда была синяя. Добавим прямоугольник и в настройках элемента зададим привязку «Экран», а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.