Блоклист

Блоклист (Block List) — виджет похожий на Список, у которого родитель содержит дочерние блоки с одинаковой структурой.

Блоклист отличается от Списка дополнительными настройками стилей и возможностью трансформироваться в другой виджет — Слайдер или Бегущую строку.

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

Настройки Блоклиста

Блоклистом можно управлять с помощью параметров на вкладке Настройки (Settings) правой панели.

Также, как и у Списка, у Блоклиста можно добавлять, удалять и изменять порядок элементов.

Для Блоклиста также существует настройка «Применить независимую структуру».

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

Также на вкладке Настройки доступны Дополнительные стили, которые можно применить для Блоклиста.

Вы можете задать:

Количество элементов списка в строке.  По умолчанию их 3, вы можете выбрать параметр автонастройки (auto) или ввести произвольное количество от 1 до 5.

Горизонтальное выравнивание.  Регулирует выравнивание элементов списка в строке по левому краю, посередине или по правому краю.

Одинаковая высота элементов списка.  Вы можете включить этот параметр, если высота для элементов на вкладке Дизайн установлена  в значении «auto».

Дополнительные виджеты

Блоклист можно переключить в один из виджетов — Слайдер или Бегущую строку. Для этого в блоке настроек Дополнительные виджеты кликните на +.

Слайдер

Слайдер — это виджет, который дает возможность показывать слайды (элементы Блоклиста) по очереди. Пользователь может перелистывать слайды с помощью элементов управления или же они могут пролистываться автоматически.

Примеры: слайдер с карточками товаров, отзывами, преимуществами.

Видео: Как создать Слайдер

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

Для Слайдера можно настроить следующие параметры:

Расположение. Оно может быть горизонтальным или вертикальным.

Анимация. Доступен только, если количество элементов списка в строке = 1. Анимация может быть скользящей или растворяющейся.

Длительность анимации. Измеряется в миллисекундах, и по умолчанию равна 500 мс. Можно выбрать значение от 500 до 1000 мс.

Количество прокручиваемых элементов. По умолчанию — 1, можно выбрать значение от 1 до 5.

Отображение текущего слайда в центре. Эта настройка будет показывать слайд со стилями для «Текущего» состояния по центру, если количество отображаемых элементов списка в строке будет нечетным (с четным количеством текущий слайд сместится от центра). При этом количество прокручиваемых элементов в строке будет 1, независимо от того, какое задано в настройке.

Бесконечное повторение элементов. Прокрутка Слайдера будет бесконечной. По умолчанию данная функция включена.

Авто-проигрывание элементов. Слайдер прокручивается автоматически с интервалом в миллисекундах, указанным в параметре Задержка.

Задержка. Интервал автоматического прокручивания слайдов в миллисекундах. По умолчанию интервал равен 5000 мс. Можно выбрать значение от 5000 до 10000 мс.

Отключить листание касанием. По умолчанию оно всегда включено.

Скрыть стрелки управления на концах. При включении данной настройки отключается Бесконечное повторение элементов списка и при прокрутке слайдера до последнего слайда стрелочка "Следующий" скрывается, и в начале прокрутки на первом слайде скрыта стрелка "Предыдущий".

Пагинация. Настройка позволяет выбрать из выпадающего списка тип пагинации: точки, числа, числа от 01, постранично (например, 1/3) и отключить пагинацию.

Сгруппировать стрелки управления и пагинацию.

Блоклист содержит в себе элементы для управления переключением слайдов — боковые стрелки (Controls) и элементы пагинации (Pagination) . Вы можете стилизовать их по своему усмотрению на панели Дизайн. Например, можно сделать элементы пагинации (Bullets) круглыми, поменять их цвет, а также расстояние между ними и расположение.

Бегущая строка (Ticker)

Бегущая строка — это виджет, в котором элементы Блоклиста автоматически двигаются влево или вправо с определенной скоростью.

Примеры: бегущая строка с названиями компаний-партнеров, яркий призыв или акцент.

Видео: Как создать Бегущую строку

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

Для Слайдера можно настроить следующие параметры:

Направление. Влево или вправо.

Скорость прокрутки. По умолчанию равна 10 пикселям в секунду. В выпадающем списке можно выбрать значение скорости от 10 до 50px.

Пауза при наведении. При наведении курсора мыши на бегущую строку ее движение останавливается.