Плагін «Банер»
Плагін «Банер» редактора макета дозволяє встановити на будь-якій сторінці сайту інтернет-магазину банер або групу банерів яку можна переглядати за допомогою слайдера. Банери дозволяють рекламувати товари, певні послуги та інше. Щоб розпочати роботу з плагіном «Банер» перейдіть до редактора макета й натисніть на кнопку «ДОДАТИ БЛОК».
Дізнатися більше про плагін «Банер» у відеоформаті можна за відповідним посиланням.
Після цього з'явиться бокова панель, в якій потрібно натиснути на плагін «Банер» та перенести його в певне місце на сторінці сайту інтернет-магазину.
Після цього з'явиться бокова панель налаштування плагіна «Банер». Розглянемо детальніше кожну вкладку бокової панелі налаштувань плагіна «Банер».
Вкладка «Вигляд» дозволяє вибрати один з наявних типів відображення елементів банера 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 – це налаштування дозволяє вибрати окреме зображення для банера в мобільної версії сайту інтернет-магазину.
Додані банери можна переміщувати в переліку банерів за допомогою кнопки «Змінити позицію» 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 відгуків