Готовый интернет-магазин автозапчастей со всеми функциями Инструмент для успешной торговли автозапчастями
IV. Настройки сайта

Справочный центр

Расширенные настройки

Главная задача констуктора дать возможность (!) сделать практически любой дизайн сайта. По умолчанию клиент получает простой интерфейс настройки дизайна, достаточный для создания бизового шаблонного дизайна, но при желании можно сделать сайт практически любого уровня сложности, воспользовавшись модулями редактирования стилей, создавая свои или подключая сторонние JS-файлы, подключая различные  элементы оформления.
Каждый блок меню является абсолютно самостоятельным, можно двигать и менять свойства блоков как угодно, каждый блок может иметь свои css-стили или классы.
Все стили блоков, стили из редактора, стили из конструктора, стили прайсов собираются в один единсвенный design.css 

Изменение ширины сайта

Базовые настройки конструктора позволяют указать либо фиксированую ширину в пикселях, либо динамическую в %.

В отношении ширины нет никаких ограничений, т.к. настраивая ширину вы должны понимать что на 100px в ширину сайт не поместится.

Минимальная ширина при которой все должно работать нормально — 1000 пикселей если две колонки, и 1280 если три.

Выбор количества колонок у сайта

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

Добавление дополнительных блоков в боковые меню

При добавлении и редактировании блока открывается окно:
HTML - Редактор tinymce, но можно писать любой html, вставлять карты, информеры, курсы валют, скрипты и т.д. без ограничений.
Тут возникает 99% вероятность того,  что кто-то сломает верстку (достаточно одного незакрытого div-a или строки). Поэтому весь HTML, который вы будете вставлять самостоятельно, валидируется через HTML Purifier и система автоматически распознает незакрытый div или незакрытые строки и закроет их, что дает практически 100% гарантию от проблем.

CSS класс  — Можно писать через пробел классы которые потом будут добавлены к блоку.

CSS стили  — Можно писать стили для данного блока (например border-radius:10px;).

Что у нас тут хорошего — данные стили не прописываются потом в хтмл например <div style="border-radius:10px;"></div> , т.к. это отстойная верстка.
Вместо этого все стили блоков компилируются в итоговый design.css с дизайном магазина а к блоку применяюся по его уникальному id 
Вот так как в примере выше не делается. Вместо этого все стили блоков компилируются в итоговый design.css с дизайном магазина, а к блоку применяются по его уникальному id:
В итоге мы имеем чистую верстку и возможность писать CSS каждому блоку. 
Для блоков которые не содержат редактируемый html, например, меню, форма заказа обратного звонка, логин-форма, можно изменить только стили и класс.
Что это дает вообще? Нужны круглые края — пропишите border-radius блоку, хочется у меню картинку на бэкграунд — просто добавьте класс, нужно меню с буллитами — без проблем, можно любые поставить. Например, как на изображении ниже — буллиты в меню и текстура на бэкграунде в блоке:

В меню слева/справа можно менять местами все блоки

При наведении на блок появляется иконка перемещения. За нее можно перетаскивать и менять позицию блока. Eсли дизайн 3-колоночный то и между колонками.

Добавление любого количества блоков в шапку/подвал

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

Расширенные возможности конструктора

Возможность в шапке/футере через редактор дополнительного html сверстать любую шапку без ограничений

Писать дополнительный html можно в свойствах шапки, там же включаются логотипы.
Можно к шапке добавить любой CSS класс или стиль, все скомпилится в design.css магазина.
Писать можно любой HTML и он попадет вовнутрь <div id="head"></div>, ограничений нет совсем, и можно сверстать абсолютно любую шапку сайта. 
Добавленым через конструктор блокам в шапке это не мешает, т.е. можно что-то сверстать, а что-то вставить блоком.Например вставляем код:
Во встроенном редакторе прописываем стили для этих элементов:
И получаем «резиновую» шапку с блоком посередине:
Получается многослойный «пирог», внизу верстка, сверху блоки:

Возможность любому блоку в меню или в шапке/футере указать дополнительный CSS класс или CSS стили

Простой пример. Есть у нас меню с дефолтными стилями:
Хотим скруглить углы. Добавляем в стилях блока бордер радиус:
Сохраняем, получаем скругленные углы:
Добавляем класс, присываем ему во встроеном редакторе стили для класса, и вот буллиты:
Или картинки:

Возможность писать любой дополнительный CSS для сайта

На вкладке «Редактор CSS» можно писать любой CSS, который будет добавлени в общий design.css сайта.

Возможность писать любой дополнительный JS для сайта

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

Возможность заливать файлы необходмимые для дизайна (картинки, js, css, веб-шрифты)

Для загрузки файлов используемых в дизайне сайта, к заливке разрешены картинки, js, css, файлы шрифтов. Т.е. загружаем все что нужно и потом прописываем это в стилях и метатегах (поэтому выводится полный url файла).

Весь код, который будет написан во вкладке «Метатеги» будет вставлен между <head> и туда можно писать, например, метатеги для валидации в Яндекс-вебмастере или Гугле. Можно подключать любые внешние js, css-файлы, например веб-шрифты с Гугла и любые счетчики, метрики, консультантов и т.д.

Также любые JS и CSS скрипты как внешние так и залитые на вкладке «Файлы».

Предпросмотр

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

Ответы на вопросы

Где вставлять логотип?

Логотип вставляется во вкладке «Предпросмотр». Если в предпросмотре навести на шапку, то появится кнопка редактирования внизу шапки.
При ее нажатии откроется окно настроек шапки, включение логотипов находится там.

Где настраиваются логотипы платежных систем в футере?

Они во вкладке «Предпросмотр». Если нажать редактирование свойств футера, появится окно — они там.

Как спрятать сайдбар на определенной странице?

Например, включили 3-колоночную верстку, на главной странице разместили какие-то дополнительные блоки справа, но на внутренних страницах они не нужны. можно добавить модуль HTML на нужную страниу и прописать:
<style>
    #right-sidebar { display:none; }
    #middle { margin-right:0; }
</style>
Вообще можно не боятся использовать дебагер html и править что угодно как вам нужно.

Как изменить ширину сайдбара?

Через редактор CSS можно переопределить любые стили, например нужно сделать левое меню 350 пикселей. Пишем:

Как убрать все отступы при 100% ширине?

Если не задан «Фон общего контента» и они, получаются, не нужны, то:
#wrapper {
    margin: 0;
}

Как спрятать любой пункт меню?

У каждого пункта меню есть уникальный id.
Можно просто скрыть в редакторе CSS не нужное:
#menu-item-524648 {
    display: none;
}

Как в меню добавить буллиты?

Также через редактор CSS, либо по уникальному id блока меню (например #block-349692) или по дополнительному классу если это, например, навигация (.left-menu) или добавив дополнительный класс блоку с нужными стилям. Можно даже картинки поставить.

Пример для .left-menu

.left-menu{
    list-style: square;
    padding-left:30px;
}

Как пункту меню добавить иконку?

Также по ID элемента:

Как добавить горизонтальное меню?

Одной кнопкой никак, т.к. они нужны постоянно разные. Лучший вариант: создать нужные пункты меню (по умолчанию они появятся в левом блоке меню и будут иметь определенный адрес url), далее в редакторе html шапки сверстать какие нужны пункты и их внешний вид, а затем скрыть ненужные (дублирующиеся) пункты из левого меню. Таким образом пункты в горизонтальном меню сохранят url своих страниц, а в левом меню эти же пункты будут скрыты.

Несколько примеров

По ссылкам ниже вы можете посмотреть несколько примеров сайтов, дизайн которых был настроен с помощью конструктора внешнего вида:
Читайте дальше → FAQ по дизайну

Настройки сайта: Внешний вид