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

Фон дизайна

Статья актуальна для версии магазина: 10.0 | 8.0 | 7.0-6.0 | 5.0-3.0

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

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

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

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

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

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

Фон дизайна - 1987
Рисунок 1.

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

Фон дизайна - 5821
Рисунок 2.

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

Фон дизайна - 2424
Рисунок 3.

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

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

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

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

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

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

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

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

Пример:

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

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

Пример повторяющиеся картинки фона, размером 200px на 200px.
Рисунок 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) Структура архива с фоном

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

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

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

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

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

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

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

Всё готово.

 

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

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

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

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

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...