Фон дизайна

В данной статье рассмотрим пример, как создать собственный фон для интернет-магазина на базе AdVantShop. 

Перед началом, ещё раз определим, что мы имеем в виду под словом "фон" и чем он отличается от "темы дизайна".

Тема дизайна включает в себя большую фоновую картинку, элемент-разделитель блоков и "подвал". Фон, включает в себя, по сути, только простую фоновую картинку, которая повторяется и занимает таким образом весь фон.

Если вам нужна именно тема дизайна, вот инструкция по созданию собственной темы дизайна если нужен фон, читайте далее.

• Выбор стандартного фона
• Создание фона
  • Создание изображений фона
  • Работа с css файлом
  • Создание .zip-архива фона
  • Загрузка и проверка фона

Выбор стандартного фона

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

Рисунок 1.

В поле "Фон" можно выбрать из списка понравившийся вариант (рис. 2).

Рисунок 2.

Выбранный фон сразу применится к открытой странице - Вы сможете увидеть, как он будет выглядеть на сайте, до сохранения изменений (рис. 3).

Рисунок 3.

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

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

Создание фона

Весь процесс создания фона делится на 4 этапа:

1. Создание изображений фона
2. Работа с css файлом
3. Создание zip архив фона
4. Загрузка и проверка фона

Пример архива с уже созданным фоном: скачать.

1. Создание изображения фона

Для фона, в отличие от темы дизайна, нет необходимости загружать фоновую картинку целиком (1980px на 700px), это будет тормозить загрузку страницы сайта. Вместо этого нам необходимо использовать лишь часть фона, например квадрат размером 200px на 200px так, чтобы картинка по вертикали и горизонтали повторялась, т.е. был бесшовный фон.

Пример:

Рисунок 4.

Мы видим, что фон состоит из точек. Достаточно вырезать часть фона, так как показано ниже:

Рисунок 5.

В целом это квадрат 200 на 200px. Формат изображения, именно для фона, лучше использовать *.png, а название файла bg.png.

2. Работа с css файлом

2.1 Создаем папку с названием вашего фона, например "point".

В ней создаем еще 2 папки – styles и images. Сохраняем в папке images созданную картинку фона bg.png.

2.2 Далее в папке styles создаем файл styles.css, для его создания можно использовать редактор "Блокнот".

В файле напишем следующий код:

body {
    background:transparent url('../images/bg.png');
}

2.3 В корне папки point, где было создано 2 папки styles и images, создаем так же файл background.config.

Вставляем указанный код и заменяем в коде название фона (выделенные красным цветом) на свое название – в нашем примере point (Точки).

<?xml version="1.0" encoding="utf-8" ?>
<Theme name="point" previewImage="">
    <Names>
        <Name lang="ru-RU" value="Точки" />
        <Name lang="en-US" value="Point" />
    </Names>
</Theme>

3. Создание zip архиха фона

Архив должен содержать в себе папку с названием фона, а внутри папки уже файлы, которые были созданы ранее (файл background.config, директории styles и images). 

Рассмотрим пример:

1) Структура архива с фоном

Внимание!

Требования к zip архиву.
Максимальныq размер архива 5 Mb.

4. Загрузка и проверка фона в интернет-магазин

После того как архив с фоном готов, настало время его проверить. Для этого переходим в панель администрирования интернет-магазина. В меню выбераем "Интернет - магазин" - "Параметры магазина" раздел "Основные".

Далее в строке "Фон" нажимаем "Добавить". Откроется окно вашего компьютера, где требуется выбрать свой заархивированный файл point.zip (рис. 6).

Рисунок 6.

Нажимаем "Открыть". Ваш фон добавится в список фонов магазина.

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

Всё готово.

Примеры использования фона для магазина

Готово.