Фон дизайна

В данной статье рассмотрим пример, как создать собственный фон для интернет-магазина на базе 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) Структура архива с фоном

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

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

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

Рисунок 6.

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

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

Всё готово.

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