Створення групи банерів

Розглянемо, як створити групу банерів на OkayCMS, до групи створимо слайди, розберемо налаштування банерів і виведемо це у нас у шаблоні.

Першим етапом створимо групу банерів

Заходимо в адмін-панель OkayCMS, у лівому бічному меню знаходимо пункт "Банери" і в ньому "Групи банерів"

У групі банерів ми побачимо всі поточні групи банерів, на яких сторінках чи товарах відображається ця група та активність.

Далі натискаємо на кнопку "Додати групу банерів":

Тепер займемося налаштуванням нової групи банерів

Обов'язково ставимо назву, можна писати кирилицею, назва відображатиметься лише у нас в адмін. панелі.

Наприклад, у нас буде гурт зі смартфонами, пишемо назву “Смартфони”

Також можемо настроїти активність групи банерів, ставимо перемикач на активний.

ID групи банера - це унікальний ключ, за яким ми зможемо взаємодіяти з банерами. Рекомендується писати в нижньому регістрі та латинськими літерами, назвемо його:

smartphones_banners_group

Індивідуальний шорткод - цей пункт нам дозволяє створювати шорткоди, це знадобиться для виведення на сторінку, включаємо його натискаємо “Застосувати”

Після цього у нас створиться шорткод, повернемося до нього трохи згодом.

Далі ми можемо налаштувати відображення банерів на сторінках, категоріях товарів чи брендах на окремих або відображати для всіх, ми будемо відображати для всіх.

Останнє, що ми налаштуємо в групі банерів, буде саме відображення на сайті:

1. Група банерів як слайдер - дозволяє вмикати/вимикати функціонал слайдера на основі Swiper.JS
2. Автоперегортання слайдів (autoplay) - слайди автоматично змінюватимуться самі по собі
3. Нескінченний слайдер (loop) - при досягненні останнього слайда та перегортанні на наступний ми повернемося на перший слайд
4. Стрілки слайду (arrows)
5. Крапки навігації (bullets/dots)
6. Швидкість зміни слайдів - параметр відповідає за те, з якою швидкістю перегортатимуться слайди, задається в мс.

Налаштовуємо під себе і натискаємо кнопку "Застосувати":

Другим етапом у нас буде створення окремих банерів та прив'язка до нової групи банерів.

У бічному меню знаходимо пункт "Слайди", вони ж банера. Тут у нас будуть відображатися всі створені банера, так само ми можемо керувати активністю кожного окремого банера, швидко прив'язати до групи та керувати порядком відображення.

Натискаємо на кнопку "Додати банер"

У налаштуваннях нового банера нам необхідно ввести ім'я банера та прив'язати його до нашої групи “Смартфони”, а також у полі “Адреса (URL)” можемо додати довільне посилання на сторонній ресурс або на сторінки нашого сайту.

Розглянемо додаткові налаштування банера:

Зображення - доступні більшість растрових та векторних форматів зображення.

Варіант відображення - визначає як виглядає розташування текстів.

Ресайз банерів - перетворює зображення з одного дозволу на інше. Наприклад, з 1200х700 до 800х480.

Текст для банера - тут ми можемо задати Заголовок, текст та Назва зображення (Alt для SEO)

Заповнюємо та натискаємо застосувати. Група банерів та банер у нас є, залишилося їх вивести на сторінку.

Повернемося до нашої групи банерів і копіюємо назву шорткоду.

Потім переходимо до пункту меню адмін.панелі Дизайн>Файли шаблону та знаходимо файл main.tpl (головна сторінка сайту).

Залишилося лише вставити наш шорткод.

Готово! Група банерів відображається у потрібному місці