Как добавить адаптивные слайдеры?

Слайдер (карусель или слайд‑шоу) — это интерактивный элемент на веб‑страницах, который последовательно показывает серию «слайдов» / баннеров (обычно изображений, текстовых блоков или комбинации того и другого). Пользователь может перелистывать эти слайды вручную (стрелками, точками‑навигацией, свайпом на мобильном), либо они меняются автоматически через заданный интервал времени.

Основные цели использования слайдеров:

1. выделение ключевых предложений (скидки, новые товары, акции);
2. концентрированное и упорядоченное представление нескольких сообщений в одном одном видимом блоке;
3. управления вниманием посетителя через интерактивность и анимацию;
4. повышения конверсии за счёт акцентов на ключевых предложениях.

Для упрощения механизма размещения и управления адаптивными слайдерами, в дополнение к существующему механизму управления баннерными полями, мы создали расширение, упрощающее работу со слайдерами их наполнением и управлением.

После установки расширения, в панели управления сайтом, в модуле «Контент» добавится элемент «Слайдеры».

• Создание нового слайдера
• Добавление слайдов
• Включение отображения слайдеров на страницах сайта

Для корректной работу расширения вам необходимо обновить шаблон до последней актуальной версии. Обратитесь к вашему менеджеру для обновления шаблона и подключения расширения.

Создание нового слайдера

Каждый слайдер (карусель) состоит из:

• Элементов управления.
• Слайда или последовательности меняющихся слайдов.

Для добавления нового слайдера:

Нажмите на кнопку «Добавить слайдер». Вы перейдете в интерфейс создания и оформления нового слайдера.

1.1. Включите слайдер (1).

1.2. Задайте уникальное имя (2).

1.3. Укажите правило автопрокрутки / изменения слайдов (3).

1.4. При необходимости, выберите элементы управления переключения слайдов (4).

1.5. Задайте цвета элементов управления переключения слайдов (5).

1.6. Добавьте слайды (баннеры).

Добавление слайдов

Для каждого отдельного слайда можно задать:

2.1 Статус: слайд Включен / Выключен (1).

2.2. Ссылка: куда перейдет пользователь при клике на слайде (2).

2.3. Заголовок слайда (3).

2.4. Подзаголовок слайда (4).

2.5. Текст кнопки (5).

2.6. Главное изображение (6).

2.7. Фонового цвета или изображения (7).

2.8. Цвета для текстовых и кликабельных элементов.

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

При использовании фонового цвета или фонового изображения, см. п. 2.7, вам необходимо загрузить главное изображение (см. п. 2.6.) в формате PNG или WEBP с прозрачным фоном! Удалить фон на главном изображении можно при помощи приложения Adobe Photoshop или онлайн-сервисов по удалению фона.

В интерфейсе управления слайдерами вы можете:

• Активировать или деактивировать слайдер (1). Чек-бокс - Статус.
• Отредактировать (иконка «Карандаш») или удалить ранее созданный слайдер (иконка «Корзина») (2).
• Создать новый Слайдер (3).

Включение отображения слайдеров на страницах сайта

Ранее, см. п. 1. и п. 2. мы пошагово рассмотрели механизм создания слайдера и добавления слайдов.

Для того, чтобы слайдер начал отображаться на странице его необходимо подключить в модуле «Баннерные поля»:

1. Перейдите в модуль «Баннерные поля».
2. Нажмите на кнопке «Добавить блок».
3. Включите новый баннерный блок. Статус «Вкл»
4. Выберите место размещения слайдера. Например, для главной страницы слайдеры добавляются через «Центральное банерное поле».
5. Укажите название баннерного блока.
6. В поле «Источник вывода» укажите — Слайдер.
7. В поле «Слайдер» выберите один из ранее созданных слайдеров.
8. Нажмите кнопку «Сохранить».

Созданный слайдер начнет отображаться на выбранной позиции.

В модуле «Баннерные поля» вы можете:

• Активировать или деактивировать Баннерное поле. Чек-бокс - Статус.
• Отредактировать (иконка «Карандаш») или удалить ранее созданное Баннерное поле (иконка «Корзина»).
• Создать новое Баннерное поле.