С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Как создать и загрузить свой фон в трансформер дизайна

Актуально для версии магазина: 5.0, 4.1, 4.0, 3.0

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

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

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

Если вам нужна именно тема дизайна, вот инструкция по созданию собственной темы дизайна - http://www.advantshop.net/help/pages/upload-theme если нужен фон, читайте далее.

 

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

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

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

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

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

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

 

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

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

Пример:


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

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


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

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

 

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

2.1 Создайте папку с названием вашего фона, например «point»

В ней создайте еще 2 папки – css (для версии 3.x и 4.x) / styles (для версии 5.0) и images. Сохраните в папке images созданную картинку фона bg.png

 

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

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

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

 

2.3 В корне папки point, где было создано 2 папки css/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, директории css/styles и images). 

Рассмотрим 2 примера, для версии 5.0 и для версий ранее.

1) Структура архива с фоном для версии 5.0

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

2) Структура архива с фоном для версии 3.x и 4.x

Файл point.zip
| - Папка point
   | - Файл background.config
   | - Папка css
       | - Файл styles.css
   | - Папка images
       | - Файл bg.png

По аналогии с примером - point.zip (21кб).

 

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

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

В верхней части окна в поле "Загрузить новый фон" выберите свой архивированный файл, в нашем примере это point.zip.


Рисунок 3.

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

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

Всё готово.

 

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

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.