Описание
С помощью этого модуля Вы сможете без знания веб-технологий за один вечер сделать редизайн магазина или поставить новое оформление в честь распродажи, нового сезона или праздника.
Подключение
Новый дизайн сайта доступен бесплатно на всех версиях коробки, начиная с обновления 1.5.0.
Чтобы функционал появился, необходимо его включить. Для этого, заходим в админку в раздел «Конфигурация — Система»:
Кликаем по надписи с пунктиром напротив пункта «Новый шаблон»:
Выбираем из выпадающего списка «Включить»:
Сохраняем выбор, нажав кнопку с галочкой:
После того, как настройка сохранена, в разделе «Конфигурация — Конструкция сайта» появится возможность использовать новый шаблон дизайна сайта:
Настройка
Управление дизайном
С помощью этого блока мы максимально подстроим Коробку под Ваш вкус и бизнес. Вот основные настройки, которые могут повлиять на цвет сайта:
Смена цвета
Чтобы сменить цвет любого из блоков, кликаем по цвету мышкой:
В открывшемся окне кликом мышки выбираем цвет из палитры:
Или подбираем свой цвет в панели справа. Когда цвет справа подобран, нажимаем кнопку «Добавить в набор», чтобы цвет оказался в палитре левой колонки:
После того, как цвет выбран, нажимаем кнопку «ОК»:
Когда изменены все нужные цвета, необходимо нажать кнопку «Сохранить», чтобы новый дизайн появился на сайте:
Задание фона
Чтобы задать фон, воспользуемся блоком справа:
Цвет фона задается также как и обычный цвет в дизайне (см выше).
Рассмотрим, как задать Фоновое изображение. Кликаем по кнопку «Изменить»:
Откроется окошко, чтобы выбрать фоновое изображение на Вашем компьютере. Выбираем его.
Когда изображение выбрано, кликаем по кнопке с галочкой, чтобы сохранить выбор:
Далее надо задать привязку фона. В таблице ниже мы покажем как выглядит каждая настройка. Для примера возьмем небольшое изображение с одним цветочком.
Повтор фона
Настройка | Внешний вид сайта |
---|---|
Не повторять | |
Замостить | |
Замостить по горизонтали | |
Замостить по вертикали |
Позиция фона
Выбирается с какой стороны будет изображение (или начало замощения)
Возьмем для наглядности настройку «Замостить по вертикали»
Настройка | Внешний вид сайта |
---|---|
По центру | |
Слева | |
Справа |
Привязка фона
Если зафиксировать изображение, то оно всегда будет «прижато» к той позиции, которую ему выбрали. То есть при прокрутке сайта оно будет оставаться на заданном месте. На примере мы покажем фон с позицией «слева» и как выглядит начало и конец страницы.
Настройка | Начало страницы | Конец страницы |
---|---|---|
Зафиксировать (наблюдаем за позицией «Цветочка» слева вверху). Какой бы длины не была страница, при прокрутке изображение всегда будет видно в его изначальном виде. Фон привязан к экрану, а не странице. Удобно использовать, когда ваш фон имеет большой рисунок размером с экран и вы хотите всегда оставлять его видимым. Или в верхней части сайта у вас располагается красивый орнамент, который является продолжением стиля меню. | ||
Прокручивать (наблюдаем за позицией «Цветочка» слева вверху). Избражение при прокрутке исчезает с экрана и остается только в том месте страницы, где было закреплено. Фон в этом случае привязан к странице, а не к экрану, поэтому в примере при прокрутке исчезает. Удобно использовать, если оформление нужно только для «шапки» сайта, а показывать его при прокручивании страницы нет никакой надобности. Также этот вариант подходит для дизайнов, которые хотят состредоточить внимание на товарах и не отвлекать от просмотра содержания. |
Все изменения нуждаются в сохранении. Поэтому, не забывайте нажать кнопку «Сохранить» после настройки:
Если изменения на сайте не видны (после обновления страницы), необходимо почистить кэш на сайте, нажав одновременно 2 клавиши: Ctrl и F5.
Свой код css
Если у Вас есть опыт работы с css или тот, кто умеет работать с такими файлами, то дизайн можно изменить с его помощью. Содержимое файла копируем и загружаем в специальный блок:
Не забываем сохранить изменения, нажав кнопку «Сохранить»: