Блоклист

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

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

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

Вы можете добавлять в элемент Списка также любые другие элементы и виджеты, кроме Формы.

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

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

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

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

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

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

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

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

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

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

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

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

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

Слайдер

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

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

Пример слайдера

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

https://vk.com/video-219751701_456239142

VK Видео | YouTube

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

Открыть настройки Слайдера

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

Настройки Слайдера

  • Расположение.

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

  • Анимация.

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

  • Длительность анимации.

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

  • Количество прокручиваемых элементов.

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

  • Отображение текущего слайда в центре.

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

  • Бесконечное повторение элементов.

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

  • Авто-проигрывание элементов.

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

  • Задержка.

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

  • Отключить листание касанием.

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

  • Скрыть стрелки управления на концах.

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

  • Пагинация.

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

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

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

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

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

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

Пример бегущей строки

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

https://vk.com/video-219751701_456239109

VK Видео | YouTube

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

Открыть настройки Бегущей строки

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

Настройки Бегущей строки

  • Направление.

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

  • Скорость прокрутки.

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

  • Пауза при наведении.

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