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

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

Как изменить дизайн сайта

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

В данной статье мы расскажем о стандартных инструментах магазина, с помощью которых можно изменить дизайн Вашего сайта.

Трансформер дизайна

Шаблон дизайна

Структура сайта

Цветовая схема

Тема дизайна

Фон

Трансформер дизайна

Трансформер дизайна - это специализированный инструмент управления внешним видом и оформлением Вашего сайта. С помощью трансформера дизайна Вы сможете изменить структуру сайта, цветовую схему, тему дизайна и фон непосредственно находясь в клиентской части интернет магазина. Более детально каждый элемент трансформера дизайна будет рассмотрен ниже.

Управление производится в двух режимах:

1) в клиентской части по нажатию на ссылку “Трансформер дизайна” в шапке сайта (см.рис.1)


Рисунок 1.

2) в панели администрирования сайта пункт меню Дизайн->Трансформер дизайна (см. рис.2)


Рисунок 2.

Шаблон дизайна

Начнем с выбора шаблона дизайна Вашего сайта.

Изменить шаблон Вы можете только через панель администрирования пункт меню Дизайн->Трансформер дизайна вкладка Шаблоны (см.рис.3)


Рисунок 3.

На нужном шаблоне необходимо сначала нажать ссылку “Загрузить” (см.рис.4)


Рисунок 4.

После чего при наведении на превью загруженного шаблона появится кнопка “Применить” (см.рис.5)


Рисунок 5.

После нажатия кнопки “Применить” Ваш магазин будет отображаться в браузере в новом оформлении в соответствии с выбранным шаблоном (см.рис.6)


Рисунок 6.

Примечание: бесплатно предоставляются только два шаблона из списка: Standart 2015 и Classic. Остальные шаблоны предоставляются в платном режиме, с ценами Вы можете ознакомиться по адресу: http://www.advantshop.net/theme-store

Структура сайта

Структура сайта может быть представлена в двухколоночном и одноколоночном режиме.

Одноколоночный режим представляет собой размещение содержимого сайта в одной колонке, то есть контент последовательно расположен в одной колонке по центру страницы.

Визуальное представление такой структуры показано на рисунке (см.рис.7)


Рисунок 7.

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

правая колонка значительно уже левой и содержит в себе меню категорий каталога, боковые виджеты новостей, блок проверки статуса заказа, опрос, подарочные сертификаты и виджет группы ВКонтакте

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

Визуальное представление такой структуры сайта показано на рисунке (см.рис.8)


Рисунок 8.

В двухколоночном режиме существует возможность настраивать вид отображения бокового меню с категориями.

Настройка осуществляется в панели администрирования сайта пункт меню Дизайн->Настройка шаблона. Здесь доступно для изменения поле Стиль отображения меню (см.рис.8.1)


Рисунок 8.1.

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


Рисунок 8.2.

В результате видим новый стиль отображения меню категорий и подкатегорий (см.рис.8.3)


Рисунок 8.3.

Выбрать нужную структуру (одноколоночный или двухколоночный вариант) Вы можете через Трансформер дизайна в клиентской части магазина (см.рис.9)


Рисунок 9.

После нажатия кнопки “Сохранить” выбранная структура применяется на сайте.

Всё готово.

Цветовая схема

Цветовая схема - это оформление кнопок, панелей меню и прочих элементов сайта в каком-либо определенном цвете .

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


Рисунок 10.

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

После того как цвет выбран нужно нажать кнопку Сохранить.

Всё готово, новая цветовая схема установлена.

Изменение цветовой схемы доступно и из панели администрирования сайта пункт меню Дизайн->Трансформер дизайна вкладка Цветовые схемы

Выбор цветовой схемы осуществляется установкой галочки напротив названия нужного Вам цвета (см. рис.11)


Рисунок 11.

Примечание: Вы можете создать свою цветовую схему и загрузить её в трансформер дизайна.

Инструкция по созданию своей цветовой схемы доступна по ссылке Как создать свою цветовую схему.

Тема дизайна

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

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

В платформе AdvantShop предусмотрен целый ряд стандартных тем дизайна под различные тематики магазинов.

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


Рисунок 12.

Выбираем тему из списка и смотрим как сайт выглядит с установленной темой дизайн.

Выбрав понравившуюся тему из списка сохраняем настройки.

Всё готово, тема дизайна установлена.

Изменение темы дизайна доступно и из панели администрирования сайта пункт меню Дизайн->Трансформер дизайна вкладка Темы

Выбор темы дизайна осуществляется установкой галочки напротив названия нужной Вам темы(см. рис.13)


Рисунок 13.

Примечание: Вы можете создать свою тему дизайна, со своими картинками и загрузить её в трансформер дизайна.

Инструкция по созданию своей темы дизайна доступна по ссылке Как создать и загрузить свою тему в трансформер дизайна.

Фон

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

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

В платформе AdvantShop.NET предусмотрен целый ряд стандартных фонов.

Выбрать подходящий фон для Вашего магазина Вы также можете через Трансформер дизайна в клиентской части магазина (см.рис.14)


Рисунок 14.

Выбираем фон из списка и смотрим как сайт выглядит с установленным фоном Ваш сайт.

Выбрав понравившийся фон из списка сохраняем настройки.

Всё готово, фон установлен.

Изменение фона доступно и из панели администрирования сайта пункт меню Дизайн->Трансформер дизайна вкладка Фоны

Выбор фона осуществляется установкой галочки напротив названия нужного Вам фона(см. рис.15)


Рисунок 15.

Примечание: Вы можете создать свой фон для сайта и загрузить его в трансформер дизайна.

Инструкция по созданию своего фона доступна по ссылке Как создать и загрузить свой фон в трансформер дизайна.

Примечание: При установке фона и темы возможен только один вариант: устанавливаете либо тему дизайна либо фон. Установить и то и другое сразу возможности, к сожалению, нет.

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

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

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