Как вам помочь ?

Фон дизайна

Актуально для версии магазина: 6.0 | 5.0-3.0

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

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

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

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

 

Создание собственного фона для трансформера дизайна

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

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

2. Работа с css файлом и загрузка

Пример архива с уже созданным фоном для версии 6.0: скачать (21кб).

 

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

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

Пример:


Рисунок 1. Пример использования фона.

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


Рисунок 2. Пример повторяющиеся картинки фона, размером 200px на 200px.

В целом это квадрат 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) Структура архива с фоном

Файл point.zip
| - Папка point
   | - Файл background.config
   | - Папка styles
       | - Файл styles.css
   | - Папка images
       | - Файл bg.png
 
По аналогии с примером - point.zip (21кб).

 

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

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

Справа в данной строке нажмите на ссылку "Добавить", откроется окно Вашего компьютера, где требуется выбрать свой архивированный файл, в нашем примере это point.zip.


Рисунок 3.

Нажмите "Загрузить". Ваш фон появится в списке. 

Далее, чтобы проверить работу созданного фона, найдите в списке свой фон и примените. Либо можете выбрать Ваш фон в "Трансформере дизайна" в клиентской части магазина и нажать "Сохранить".

Всё готово.

 

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

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: редактировать стандартный шаблон, трансформер дизайна, загрузить фон, своя темя, загрузить свою фон, создание изображения темы, работа с css файлом и загрузка темы, трансформер дизайна, тема, загрузить фон, шаблон, дизайн, свой дизайн, как изменить шаблон, как изменить дизайн, как изменить фон, сменить фон, сменить фон, загрузить свой фон, поменять дизайн, сменить цвета, цветовая схема, схема, ntvf, изменить цвет, ajy, фон