🎅🎄❄️ 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] Секции на всю ширину
  2. Во вкладке Активация введите Номер лицензии
  3. Сохраните настройки и вернитесь на страницу Управление модулями
  4. В строке с названием модуля, выберите Вкл.
  5. Очистите кэш, выберите Администрирование > Хранилище данных > Очистить кэш

Настройки модуляtop

Модуль начинает работать сразу после активации
Он работает для темы Responsive и её дочерних

Модуль добавляет такие настройки в опции секций:


Для того что бы они появились необходимо выполнить следующие условия:

  • У секции не должно быть родительской секции (секция без вложенности)
  • Ширина – 16

Размер отступов задается глобально в настройках модуля


Примеры использования и частые вопросыtop

Баннер на всю ширину экрана

  1. Создайте секцию максимальной ширины, стандартно это 16
  2. После того как секция создана и изменения сохранены, заходим в её настройки (шестеренка) и выбираем опцию Вся ширина: Да
  3. Создаем или перемещаем в новую секцию блок с баннерами
  4. Если это старый блок, то у него удаляем все лишние классы в настройках

Фон меню на всю ширину экрана

  1. Открываем настройки секции в которой лежит блок меню
  2. В настройку Пользовательский CSS-класс для секции добавляем свой класс, например fw_bg_1
  3. Далее для этого класса добавляем фон через CSS
  4. Как добавить CSS в магазин описано тут

Пример стилей использованных в демо:

.fw_bg_1{
background: #26323e;
}

Фон для секции где есть дочерние секции (пример на демо: блок отзывов и блог)

  1. Создайте секцию максимальной ширины, стандартно это 16
  2. После того как секция создана и изменения сохранены, заходим в её настройки (шестеренка) и выбираем опцию Вся ширина: Да
  3. Что бы фон лучше выглядел, добавляем в секцию отступы. Включаем отступы Сверху и Снизу
  4. В настройку Пользовательский CSS-класс для секции добавляем свой класс, например fw_bg_2
  5. Далее для этого класса добавляем фон через CSS
  6. Как добавить CSS в магазин описано тут

Пример стилей использованных в демо:

.fw_bg_2 {
background: #f7f7f7;
}

Далее в эту секцию добавляем дочерние и в них нужные вам блоки
Так это выглядит на демо:

Фон с эффектом параллакса

Логика та же что и в примерах выше, но теперь в фон добавляем картинку и фиксируем его при помощи CSS свойств fixed 50%
Пример CSS кода из демо:

.fw_bg_3 {
background: url('//demo.themehills.com/cscart/a_full_width_grid/images/companies/1/bg/austin-distel-wawEfYdpkag-unsplash_bg.jpg') no-repeat fixed 50%;
background-size: cover;
}

Ошибки в отображение фона в футоре (подвале)

Если вы используете стандартные темы Responsive или Bright theme, то фон в футоре может быть не на всю ширину
Что бы это исправить, зайдите в проблемную секцию и скопируйте классы из поля Пользовательский CSS-класс
в поле Пользовательский CSS-класс для секции

Это решит проблему


Ограничения в использованииtop

Модуль не требуется при использовании следующих тем:

  • Thin, Emerald, Jelly Themes(ThemeHills)
  • UniTheme2, Youpi Themes (AlexBranding)

В них уже содержится схожий функционал


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

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

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

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

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

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

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


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

1.03 (21 Dec 2020)
Обновили модуль для совместимости с CS-Cart 4.12.1
Требуется переустановка модуля для CS-Cart Multivendor Ultimate

1.02 (26 Jul 2020)
Исправлены стили фона

1.02 (26 Jul 2020)
Добалвены настройки отступов

1.00 (09 Jul 2020)
Релиз