Расширенные Баннеры Документация

Установка – вверх

0. Видео пример

1. Загрузка

1. Скачайте модуль
2. Перейдите в Панель Администратора > Модули > Управление модулями
3. Нажмите на [+] чтобы открыть диалоговое окно загрузки
4. Выберите удобный для вас способ:
   – Загрузить: zip архив храниться на вашем компьютере
   – Сервер: zip архив храниться на вашем сервере
   – URL: у вас есть прямая ссылка на zip архив
5. После того как вы выбрали zip архив для соответствующей версии CS-Cart, пожалуйста, нажмите кнопку Загрузить и установить
6. Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш

2. Активация лицензии

1. Откройте страницу настроек модуля Панель Администратора > Модули > Управление модулями >
   [TH] Extended Banners
2. Во вкладке Активация введите Номер лицензии
3. Сохраните настройки и вернитесь на страницу Управление модулями
4. В строке с названием модуля, выберите Вкл.
5. Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш

Далее необходимо создать и настроить баннеры и создать блок в макетах
При необходимости внешний вид карусели можно изменить в настройках модуля

Так же примеры баннеров вы можете посмотреть в админке демо

Для работы с модулем необходимо знать как работают стандартные баннеры, это описано в официальной документации

Типы баннеров – вверх

Начиная с 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 – вверх

Файлы стилей не должен быть изменены, это может привести к некорректной работе модуля. Если необходимо переопределить или добавить стили, пожалуйста, используйте Редактор тем

1. Перейдите в Дизайн > Темы
2. Нажмите кнопку Редактор тем рядом с активным макетом
3. В новой вкладке, вы увидите свой магазин с панелью Редактор тем
4. В выпадающем списке РЕДАКТИРОВАТЬ выберете Пользовательские CSS
5. В текстовое поле вы можете добавить свои стили
6. После редактирования сохраните изменения, нажав Сохранить и нажмите [X] чтобы закрыть редактор

FAQ – вверх

Как сделать высоту баннера 100% экрана?

Выберите тип: Текст и фон или Текст и видео Фон

Минимальную и остальные высоты задайте: 100vh, так же можно попробовать задавать значения через calc, например так:

~"calc(100vh - 145px)"

Подробнее информацию об единице измерения vh и других можно почитать тут

K) Обновление модуля – вверх

Начиная с версии 1.05 обновления устанавливаются через Центр обновлений

Список изменений

2.01 (05 Jul 2024)
Добавили дополнительную (вторую) кнопку
Улучшили страницу настроек баннера
Поправлены стили

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)
Релиз