Расширенные Баннеры Документация
Установка – вверх
1. Загрузка
- Скачайте модуль
- Перейдите в Панель Администратора > Модули > Управление модулями
- Нажмите на [+] чтобы открыть диалоговое окно загрузки
- Выберите удобный для вас способ:
– Загрузить: zip архив храниться на вашем компьютере
– Сервер: zip архив храниться на вашем сервере
– URL: у вас есть прямая ссылка на zip архив - После того как вы выбрали zip архив для соответствующей версии CS-Cart, пожалуйста, нажмите кнопку Загрузить и установить
- Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш
2. Активация лицензии
- Откройте страницу настроек модуля Панель Администратора > Модули > Управление модулями >
[TH] Extended Banners - Во вкладке Активация введите Номер лицензии
- Сохраните настройки и вернитесь на страницу Управление модулями
- В строке с названием модуля, выберите Вкл.
- Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш
Далее необходимо создать и настроить баннеры и создать блок в макетах
При необходимости внешний вид карусели можно изменить в настройках модуля
Так же примеры баннеров вы можете посмотреть в админке демо
Для работы с модулем необходимо знать как работают стандартные баннеры, это описано в официальной документации
Типы баннеров – вверх
Начиная с 1.06 баннеры распологаются Маркетинг > Расширенные Баннеры
Модуль добавляет следующие типы баннеров:
- Текст и Графика
- Текст и Фон
- Текст и Фон (Основа изображение)
- Текст и Видео Фон
- Текст и Видео Фон (Основа видео)
Для всех баннеров вы можете задать собственный класс и стилизовать его
Текст и Графика
Этот вид баннеров лучше всего подходит для презентации продуктов
Баннер состоит из 4 ключевых элементов:
- Основного изображения
- Фонового изображения (загружать не обязательно, тогда у баннера будет прозрачный фон)
- Секции с текстом (заголовок, подзаголовок и текст). Не требуется заполнять все поля
- Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)
Для десктопа меняется порядок вывода основного изображения и текстовой секции
Фон текста отображается только для мобильного вида
Для демо мы использовали такие размеры картинок:
- 564x564px – основное изображение
- 1200x564px – фоновое изображение
Для своих баннеров вы можете использовать другие размеры
Текст и Фон
Этот вид баннеров лучше всего подходит для маркетинговых целей: презентации сильных сторон компании, показа категорий, акций и дополнительной информации
Баннер состоит из 3 ключевых элементов:
- Фонового изображения
- Секции с текстом (заголовок, подзаголовок ). Не требуется заполнять все поля
- Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)
Вы можете изменять позицию текста изменяя выравнивание
Фон для текста применяется для всех разрешений
Для демо мы использовали такие размеры:
- 1200x564px – фоновое изображение
- 576px – минимальная высота баннера для ПК
- 450px – минимальная высота баннера для планшета
- 185px – высота секции с изображением для телефона
Для своих баннеров вы можете использовать другие размеры, изображение для фона масштабируются под указанные вами размеры
Текст и Фон (Основа изображение)
Этот вид баннеров лучше всего подходит для маркетинговых целей: презентации сильных сторон компании, показа категорий, акций и дополнительной информации
Баннер состоит из 3 ключевых элементов:
- Фонового изображения
- Секции с текстом (заголовок, подзаголовок ). Не требуется заполнять все поля
- Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)
Вы можете изменять позицию текста изменяя выравнивание
Фон для текста применяется для всех разрешений
Для демо мы использовали такие размеры:
- 1200x564px – фоновое изображение
Для своих баннеров вы можете использовать другие размеры, изображение для фона задает размеры баннера
Текст и Видео Фон
Этот вид баннеров лучше всего подходит для маркетинговых целей: презентации сильных сторон компании, показа категорий, акций и дополнительной информации
Баннер состоит из 4 ключевых элементов:
- Загруженный видео файл (формат mp4 )
- Фонового изображения (отображается для мобильных устройств, можно использовать анимированные gif)
- Секции с текстом (заголовок, подзаголовок ). Не требуется заполнять все поля
- Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)
Важно: Фоновое изображение является обязательным
Вы можете изменять позицию текста изменяя выравнивание
Фон для текста применяется для всех разрешений
Для демо мы использовали такие размеры:
- 1200x564px – фоновое изображение и видео
- 576px – минимальная высота баннера для ПК
- 450px – минимальная высота баннера для планшета
- 185px – высота секции с изображением для телефона
Для своих баннеров вы можете использовать другие размеры, видео и изображение для фона масштабируются под указанные вами размеры
Текст и Видео Фон (Основа видео)
Этот вид баннеров лучше всего подходит для маркетинговых целей: презентации сильных сторон компании, показа категорий, акций и дополнительной информации.
Баннер состоит из 4 ключевых элементов:
- Загруженный видео файл (формат mp4)
- Фонового изображения (отображается для мобильных устройств, можно использовать анимированные gif)
- Секции с текстом (заголовок, подзаголовок). Не требуется заполнять все поля
- Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)
Важно: Фоновое изображение является обязательным
Вы можете изменять позицию текста изменяя выравнивание
Фон для текста применяется для всех разрешений
Для демо мы использовали такие размеры:
- 1200x564px – видео
- 1200x564px – фоновое изображение
Для своих баннеров вы можете использовать другие размеры, видео и изображение для фона задают размеры баннера
Настройки блока – вверх
Для того что бы новые банеры отображались, в блоке необходимо выбрать шаблон Расширенная Карусель. Либо создать новый блок с таким шаблоном.
В настройках блока вы можете выбрать заданные положения элементов управления и скрыть их на мобильных устройствах
Так же вы можете указать время отображения одного баннера.
Настройки модуля – вверх
В настройках модуля вы можете изменить размер текста для различных разрешений экрана. Это делается в соответствующих вкладках.
Так же, вы можете настроить элементы управления каруселью.
Возможно настроить цвета и размеры стрелок и точек. Вы можете изменить стрелки на свои, для этого замените svg код на свой или иконочный шрифт.
В svg коде после символов { должен стоять пробел.
Если необходимо убрать фон для стрелок, то в поле цвета укажите none.
Изменение CSS – вверх
Файлы стилей не должен быть изменены, это может привести к некорректной работе модуля. Если необходимо переопределить или добавить стили, пожалуйста, используйте Редактор тем
- Перейдите в Дизайн > Темы
- Нажмите кнопку Редактор тем рядом с активным макетом
- В новой вкладке, вы увидите свой магазин с панелью Редактор тем
- В выпадающем списке РЕДАКТИРОВАТЬ выберете Пользовательские CSS
- В текстовое поле вы можете добавить свои стили
- После редактирования сохраните изменения, нажав Сохранить и нажмите [X] чтобы закрыть редактор
FAQ – вверх
Как сделать высоту баннера 100% экрана?
Выберите тип: Текст и фон или Текст и видео Фон
Минимальную и остальные высоты задайте: 100vh, так же можно попробовать задавать значения через calc, например так:
~"calc(100vh - 145px)"
Подробнее информацию об единице измерения vh и других можно почитать тут
K) Обновление модуля – вверх
Начиная с версии 1.05 обновления устанавливаются через Центр обновлений
Список изменений
2.00 (21 Jan 2024) Добавили загрузчик видео файлов (оставили только .mp4) Обновили логику работы с выводом видео (изображение обложка не обязательно) Добавлена поддержка html для поля описания Улучшена лицензионная система 1.07 (03 Dec 2023) Исправления рекомендованы для 4.16.2 и выше (улучшенная загрузка баннеров) Улучшена лицензионная система Изменен шаблон 1.06 (23 Aug 2021) Переместили баннеры модуля в отдельный раздел, для лучшей совместимости с продуктами других компаний Новый путь: Маркетинг > Расширенные Баннеры 1.05 (12 Jun 2021) На мобильных устройствах видео фон проигрывается сразу Интегрировали систему обновления через Центр Обновлений 1.04 (09 Dec 2020) Обновили модуль для совместимости с CS-Cart 4.12.1 Требуется переустановка модуля для CS-Cart Multivendor Ultimate 1.03 (11 Jun 2020) Добавили вертикальное выравнивание текста и изменение отступов для видов: - Текст и Фон (Основа изображение) - Текст и Видео Фон (Основа видео) - Текст и Фон - Текст и Видео Фон 1.02 (12 May 2020) Добавили два новых вида: - Текст и Фон (Основа изображение) - Текст и Видео Фон (Основа видео) Добавили у баннера поле для ввода пользовательского CSS-класса 1.01 (07 May 2020) Увеличили отступы для текста Изменили стили Исправили совместимость с ThinTheme 1.00 (04 May 2020) Релиз