Плагин «Баннер»
Плагин «Баннер» редактора макета позволяет установить на любой странице сайта интернет-магазина баннер либо группу баннеров, которые можно просматривать при помощи слайдера. Баннеры позволяют рекламировать товары, определенные услуги и другое. Чтобы начать работу с плагином «Баннер» перейдите в редактор макета и нажмите на кнопку «ДОБАВИТЬ БЛОК».
Узнать больше про плагин «Баннер» в видео формате можно по соответствующей ссылке.
После этого появиться боковая панель, в которой нужно нажать на плагин «Баннер» и перенести его в определенное место на странице сайта интернет-магазина.
После этого появиться боковая панель настроек плагина «Баннер». Рассмотрим детальнее каждую вкладку боковой панели настроек плагина «Баннер».
Вкладка «Вид» позволяет выбрать один из имеющихся типов отображения элементов баннера 1 таких, как: изображение, заголовок, описание, кнопки.
При необходимости можно включить отображение баннеров на всю ширину экрана нажав на соответствующий переключатель 2.
Вкладка «Баннеры» позволяет создавать и настраивать баннеры, которые будут отображаться на странице сайта интернет-магазина. Чтобы создать баннер нажмите на кнопку «Добавить». Далее необходимо выбрать изображение баннера, выбор изображение происходит через менеджер файлов.
Узнайте больше про менеджер файлов по ссылке.
В добавленном баннере можно редактировать его заголовок 1, описание 2, настройки элементов баннера 3, при необходимости можно установить текущие настройки элементов баннера для всех следующих баннеров 4. Это позволяет сохранить время в случае когда баннеры должны иметь одинаковый размер элементов, цвет и другое. При необходимости баннер можно удалить нажав на кнопку «Удалить» 5.
Рассмотрим детальнее все настройки элементов баннера. Элемент баннера «ЗАГОЛОВОК» имеет следующие настройки.
- Цвет текста 1 – эта настройка позволяет выбрать цвет заголовка баннера;
- Размер текста 2 – эта настройка позволяет выбрать размер текста заголовка баннера для настольной, ноутбучной, планшетной, мобильных (вертикальной и горизонтальной) версий сайта интернет-магазина;
- «Ширина заголовка и описания (%)» 3 – эта настройка позволяет установить ширину заголовка и описания от 20 до 100 процентов;
- «Межстрочный интервал (%)» 4 – эта настройка позволяет установить межстрочный интервал между заголовком и элементами баннера от 100 до 200 процентов;
- «Стиль текста» 5 – эта настройка позволяет сделать шрифт заголовка баннера жирным, курсивным, подчеркнутым, БОЛЬШИМИ БУКВАМИ;
- «Отступ снизу» 6 – эта настройка позволяет установить отступ от заголовка баннера к описанию баннера;
- «Скрывать на мобильных устройствах» 7 – этот переключатель позволяет скрыть заголовок баннера для мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Элемент баннера «ОПИСАНИЕ» имеет следующие настройки.
- Цвет текста 1 – эта настройка позволяет выбрать цвет описания баннера;
- Размер текста 2 – эта настройка позволяет выбрать размер текста описания баннера для настольной, ноутбучной, планшетной, мобильных (вертикальной и горизонтальной) версий сайта интернет-магазина;
- «Ширина заголовка и описания (%)» 3 – эта настройка позволяет установить ширину заголовка и описания от 20 до 100 процентов;
- «Межстрочный интервал (%)» 4 – эта настройка позволяет установить межстрочный интервал между описанием и элементами баннера от 100 до 200 процентов;
- «Стиль текста» 5 – эта настройка позволяет сделать шрифт описания баннера жирным, курсивным, подчеркнутым, БОЛЬШИМИ БУКВАМИ;
- «Отступ снизу» 6 – эта настройка позволяет установить отступ от описания баннера к кнопкам баннера;
- «Скрывать на мобильных устройствах» 7 – этот переключатель позволяет скрыть описание баннера для мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Элемент баннера «КНОПКА 1» и «КНОПКА 2» имеет следующие настройки.
- «Показывать кнопку» 1 – этот переключатель позволяет отображать кнопку на баннере либо скрыть ее;
- «Текст кнопки» 2 – эта настройка позволяет установить текст на кнопке;
- «Действие при клике» 3 – эта настройка позволяет выбрать действие при клике на кнопку, доступные действия 4: «Перейти на страницу» позволяет выбрать определенную страницу сайта интернет-магазина, на которую произойдет переход, «Перейти к публикации» позволяет выбрать определенную публикацию сайта интернет-магазина, на которую произойдет переход, «Перейти по ссылке» позволяет ввести определенную ссылку, на которую произойдет переход, «Перейти к блоку на странице» позволяет ввести ссылку на блок страницы в формате «#value», к которому произойдет переход;
- Вид кнопки» 5 – эта настройка позволяет выбрать вид кнопки, а именно: просто текст, текст с обводкой без внутренней заливки, текст с обводкой с внутренней заливкой;
- «Цвет кнопки» 6 – эта настройка позволяет выбрать цвет текста и при наличии цвет обводки/фона кнопки;
- «Цвет при наведении» 7 – эта настройка позволяет выбрать цвет кнопки и в случае кнопки с обводкой с внутренней заливкой цвет внутренней заливки кнопки при наведении на нее;
- «Закругление краев» 8 – эта настройка позволяет выбрать тип краев кнопки, а именно: «Круглые», «Скругленные», «Без закругления»;
- «Стиль текста» 9 – эта настройка позволяет сделать шрифт кнопки баннера жирным, курсивным, подчеркнутым, БОЛЬШИМИ БУКВАМИ;
- «Высота кнопки (px)» 10 – эта настройка позволяет установить высоту кнопки от 5 до 15 пикселей;
- «Ширина кнопки (px)» 11 – эта настройка позволяет установить ширину кнопки от 5 до 30 пикселей;
- «Размер текста (px)» 12 – эта настройка позволяет установить размер текста внутри кнопки от 11 до 25 пикселей;
- «Скрывать на мобильных устройствах» 13 – этот переключатель позволяет скрыть кнопку баннера для мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Элемент баннера «ДОПОЛНИТЕЛЬНО» имеет следующие настройки.
- «Ссылка» 1 – эта настройка позволяет ввести ссылку, на которую будет происходить переход при нажатии на баннер;
- «Открывать в» 2 – эта настройка позволяет выбрать каким образом будет происходить переход по ссылке при нажатии на баннер, а именно: в текущем окне браузера или в новом окне браузера;
- «Цвет фильтра» 3 – эта настройка позволяет выбрать цвет фильтра, который накладывается на заголовок, описание и кнопки баннера либо на изображение, в зависимости от выбранного дизайна баннера;
- «Прозрачность фильтра» 4 – эта настройка позволяет выбрать процент прозрачности наложенного фильтра на заголовке, описании и кнопках баннера либо на изображении, в зависимости от выбранного дизайна баннера;
- «ИЗОБРАЖЕНИЕ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ» 5 – эта настройка позволяет выбрать отдельное изображение для баннера в мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Добавленные баннеры можно перемещать в списке баннеров при помощи кнопки «Изменить позицию» 1, при необходимости можно изменить изображение баннера нажав на пиктограмму изображения 2 либо сделать баннер доступным/скрытым 3.
Вкладка «Общие настройки» позволяет настроить скорость прокрутки слайдера баннеров, элементы управления слайдером и размер изображений баннеров.
Рассмотрим детальнее настройки вкладки «Общие настройки».
- «Бесконечная прокрутка» 1 – этот переключатель позволяет установить бесконечную прокрутку баннеров слайдера, то есть последний баннер слайдера можно прокрутить вправо и после этого будет отображаться первый баннер слайдера. В случае выключенного переключателя «Бесконечная прокрутка» прокрутить последний баннер слайдера вправо будет невозможно, нужно будет вернуться влево к первому баннеру слайдера.
- «Скорость прокрутки слайдера (мс)» 2 – эта настройка позволяет установить скорость прокрутки слайдера баннеров в миллисекундах;
- «Настройки элементов управления слайдера» 3 – позволяют настраивать элементы управления слайдера баннеров;
- «Размер изображений» 4 – эта настройка позволяет установить определенный размер с пропорциями по ширине:высоте для всех изображений баннеров;
- «Другие пропорции для мобильных» 5 – этот переключатель позволяет установить отдельный размер с пропорциями 6 по ширине:высоте для всех изображений баннеров в случае мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина. Следует отметить, что установка отдельного размера с пропорциями происходить для основного изображения баннера в мобильной версии сайта интернет-магазина, если баннер имеет отдельное изображение для мобильной версии сайта интернет-магазина, эта настройка не будет применена для этого изображения.
Рассмотрим детальнее настройки элемента управления слайдера «ТОЧКИ».
- «Отображать точки» 1 – этот переключатель позволяет отображать точки с количеством баннеров слайдера либо скрыть их;
- «Форма» 2 – эта настройка позволяет выбрать круглую, квадратную форму или форму в виде рисок;
- «Положение» 3 – эта настройка позволяет установить положение точек на баннере либо под баннером слайдера;
- «Выравнивание» 4 – эта настройка позволяет разместить точки слева, по центру либо правее баннера слайдера;
- «Скрывать на мобильных устройствах» 5 – этот переключатель позволяет скрыть точки количества баннеров слайдера для мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Рассмотрим детальнее настройки элемента управления слайдера «СТРЕЛКИ».
- «Отображать стрелки» 1 – этот переключатель позволяет отображать стрелки смены баннера слайдера либо скрыть их;
- «Иконка» 2 – эта настройка позволяет выбрать иконку смены баннера слайдера, можно выбрать следующий вид иконки смены баннера слайдера: больше/меньше, стрелка или загрузить собственную иконку через менеджер файлов;
- «Стиль» 3 – эта настройка позволяет выбрать стиль отображения стрелки баннера слайдера в виде контура либо контура с заполнением;
- «Форма» 4 – эта настройка позволяет выбрать форму стрелки баннера слайдера в виде иконки, иконке в круге, иконке в закругленном квадрате, иконки в обычном квадрате;
- «Размер стрелок» 5 – эта настройка позволяет выбрать размер стрелок смены баннера слайдера в пикселях, можно выбрать размер от 20 до 50 пикселей;
- «Цвет кнопки» 6 – эта настройка позволяет выбрать цвет иконки смены баннера слайдера и цвет фона иконки смены баннера слайдера в случае стиля «С заполнением»;
- «Цвет при наведении» 7 – эта настройка позволяет выбрать цвет иконки смены баннера слайдера и цвет фона иконки баннера слайдера в случае стиля «С заполнением» при наведении на иконку смены баннера слайдера;
- «Положение» 8 – эта настройка позволяет разместить иконки смены баннера слайдера по бокам, в левом нижнем углу или в правом нижнем углу;
- «Скрывать на мобильных устройствах» 9 – этот переключатель позволяет скрыть иконку смены баннера слайдера для мобильной версии (экраны, которые меньше чем 740 px) сайта интернет-магазина.
Закончив с настройками плагина «Баннер» нажмите на кнопку «СОХРАНИТЬ», далее нажмите на кнопку «СОХРАНИТЬ» в редакторе макета, чтобы сохранить настройки страницы.
Настроенный баннер имеет следующий вид на сайте интернет-магазина.
58 отзывов