Макеты¶
Чтобы разобраться в визуальной структуре сайта вашего магазина и маркетплейса, рассмотрим основные понятия.
- Макет — это вся визуальная структура сайта или приложения вашего магазина в целом.
- Каждый макет состоит из страниц макета. Страницы макета соотносятся с определенными страницами или типами страниц на витрине, например, страницами “Каталог”, “Профиль” и т. д.
- Страница имеет определенную логическую структуру. Такую структуру без визуального наполнения называют каркасом страницы. Каркас страницы определяет, где на странице будут располагаться верхняя панель, заголовок, подвал и т. д.
- Самостоятельные секции внутри страницы, объединенные определенной функциональностью, называются блоками. Каждый блок отображает определенную информацию, например, логотип, карточку товара, поисковую форму и т. д.
- Блоки сгруппированы по контейнерам. Контейнеры — это структурные элементы, которые группируют и блоки, и другие контейнеры. Следует отметить, что если блок является логической единицей, то контейнер — это структурная обертка.
- Каждый макет состоит из страниц макета. Страницы макета соотносятся с определенными страницами или типами страниц на витрине, например, страницами “Каталог”, “Профиль” и т. д.
На картинках ниже представлена структура макета:
Редактирование макета витрины в реальном времени¶
В панели администратора магазина перейдите на страницу Веб-сайт → Темы.
В разделе Выбранная тема нажмите кнопку Редактировать макет.
Откроется витрина, на которой элементы, доступные для редактирования, будут выделены пунктирной линией. Вы можете перетаскивать эти элементы мышью или удалять их. При этом вы можете переключаться между страницами так же, как и в обычном режиме.
При наведении мыши на редактируемый элемент появляется меню кнопок:
- кнопка шестеренки открывает меню редактирования макета для той страницы макета, на которой вы находились, когда нажали эту кнопку;
- кнопка с изображением глаза позволяет скрыть элемент на витрине, а при повторном нажатии — показать его;
- кнопки со стрелками позволяют менять расположение элемента на странице.
Редактирование макета в меню “Макеты”¶
В панели администратора магазина перейдите на страницу Веб-сайт → Темы → Макеты.
Откроется меню Редактирование макета: Main, где доступны все настройки макета, его страниц, секций, блоков и контейнеров.
Для редактирования всех этих логических и структурных элементов найдите нужный вам элемент и наведите на него мышью. Появится меню с кнопками:
Здесь вы можете добавить новый элемент (например, блок или секцию), отредактировать или удалить его, а также включить и выключить отображение этого элемента.
Для просмотра внесенных изменений нажмите кнопку с шестеренкой в правом верхнем углу страницы. В открывшемся меню выберите Предпросмотр:
В новой вкладке браузера откроется витрина с примененными изменениями.
Добавление макета¶
Нажмите кнопку + Добавить макет в правом верхнем углу страницы.
В открывшемся окне введите название макета и выберите макет, который хотите взять за основу для нового макета. Нажмите Сохранить.
Новый макет появится в списке макетов справа, под заголовком Сменить макет. Вы можете переключаться между макетами, нажимая на их названия в списке. При наведении на название макета появится кнопка с изображением шестеренки:
Важно
Макет по умолчанию (т. е. используемый на витрине) удалить не получится. Сначала выберите другой макет по умолчанию.
Свойства макета¶
При создании и редактировании макета укажите его свойства:
- Название — название макета.
- Использовать блоки с макета (только при создании макета) — в выпадающем меню выберите макет, который хотите взять за основу для нового макета.
- По умолчанию — если поставить флажок, макет будет использоваться на витрине по умолчанию.
- Число колонок — сетка макета может состоять из 12 или 16 колонок.
- Ширина страницы — определяет, как страницы макета будут себя вести при разных размерах окна браузера:
- Фиксированная ширина — например, 1200px;
- Диапазон — ширина страницы будет меняться при необходимости. Можно задать минимальную и максимальную ширину;
- По ширине окна — страница будет адаптироваться к ширине окна.