🎅🎄❄️ Winter sale. 30% off on everything until February 05 ❄️🎄🥳

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

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

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 – высота секции с изображением для телефона

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

Инструкция по добавлению видео в CS-Cart

Текст и Видео Фон (Основа видео)

Этот вид баннеров лучше всего подходит для маркетинговых целей: презентации сильных сторон компании, показа категорий, акций и дополнительной информации.

Баннер состоит из 4 ключевых элементов:

  • Ссылок на видео (формат mp4 обязателен, остальные вспомогательные)
  • Фонового изображения (отображается для мобильных устройств, можно использовать анимированные gif)
  • Секции с текстом (заголовок, подзаголовок ). Не требуется заполнять все поля
  • Кнопки (появляется тогда когда заполнены поля Текст кнопки и URL)

Важно: Фоновое изображение является обязательным

Вы можете изменять позицию текста изменяя выравнивание
Фон для текста применяется для всех разрешений

Для демо мы использовали такие размеры:

  • 1200x564px – видео
  • 1200x564px – фоновое изображение

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


Настройки блокавверх

Для того что бы новые банеры отображались, в блоке необходимо выбрать шаблон Расширенная Карусель. Либо создать новый блок с таким шаблоном.

В настройках блока вы можете выбрать заданные положения элементов управления и скрыть их на мобильных устройствах
Так же вы можете указать время отображения одного баннера.


Настройки модулявверх

В настройках модуля вы можете изменить размер текста для различных разрешений экрана. Это делается в соответствующих вкладках.

Так же, вы можете настроить элементы управления каруселью.
Возможно настроить цвета и размеры стрелок и точек. Вы можете изменить стрелки на свои, для этого замените svg код на свой или иконочный шрифт.
В svg коде после символов { должен стоять пробел.
Если необходимо убрать фон для стрелок, то в поле цвета укажите none.


Изменение CSSвверх

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

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

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

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

Администрирование > Центр обновлений

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

Для обновления языковых переменных и настроек модуля:

  • Перейдите в девелоперский режим
  • Для этого в файле local_conf.php добавьте define(‘DEVELOPMENT’, true);
    В случае отсутствия файла создайте его
  • Обновите кэш
  • На странице модулей в выпадающем списке напротив модуля выберите “Обновить”
  • Вернитесь в обычный режим магазина


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

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