К содержимому
Оформление и содержимое

Оформление сайта

Обновлено

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

Откройте настройки и проверьте изменения

Войдите в Webasyst как администратор и откройте свой сайт. Кнопка «Настройки» слева открывает панель темы. Те же настройки доступны в разделе «Дизайн → Настройки» соответствующего приложения. Показ панели на сайте задаётся в «Общие настройки → Основные настройки → Панель настроек на сайте»: «Выключена», «Администратору» или «Всем посетителям» (для демо-сайта: работает при установленном приложении «Настройки шаблонов», а сохранить изменения всё равно может только администратор). Если панель выключена, используйте раздел дизайна.

Нужный путь в панели — «Общие настройки → Оформление сайта». Часть изменений, включая цвета, шрифты, скругление и ширину, видна сразу. Для проверки всей страницы нажмите «Предпросмотр». Он показывает несохранённые изменения, но не делает их постоянными. «Сбросить предпросмотр» возвращает сохранённое состояние; «Сохранить» применяет настройки сайта.

Выберите цветовую схему

Поле «Оформление» предлагает схемы «Как в системе посетителя, с переключателем», «Светлая», «Тёмная», «Тёмная, с переключателем» и «Светлая, с переключателем». «Как в системе посетителя, с переключателем» учитывает оформление системы посетителя (тёмная система — сайт сразу открывается тёмным, без светлой вспышки) и позволяет переключать схему через соответствующий элемент шапки. При «Светлой» или «Тёмной» переключателя нет. Варианты «…с переключателем» открывают сайт в выбранной схеме, а посетитель может её сменить.

«Базовый цвет» используется для кнопок, ссылок и активных элементов; из него тема сама рассчитывает набор оттенков. «Акцентный цвет» окрашивает счётчик корзины и бейджи; пустое поле берёт оттенок базового цвета. Фон страницы, фон карточек, текст и рамки настраиваются отдельно. «Тёмные блоки» задают цвет подвала, верхней строки шапки, кнопки «Каталог» и других тёмных плашек.

У светлой и тёмной версий есть собственные значения: изменение светлого фона не заменяет тёмный. Пустое поле тёмной версии использует цвет темы или, для базового и акцентного цвета, светлое значение. Кнопки «Готовые палитры» над цветами заполняют поля обеих версий; после выбора их можно уточнить вручную.

«Фон под фотографиями» — подложка, которая видна по краям фото товаров и категорий, когда фото уже рамки; чтобы фото сливались со страницей, укажите цвет фона страницы. «Цвет выбранного» задаёт, чем отмечены текущая страница списка, выбранный вид каталога, вкладка, значение фильтра и точка листания: цветом текста или базовым цветом. «Выделение текста» — как выглядит выделенный мышью текст: системным, акцентным, базовым или своим цветом. Для своего цвета рядом есть поля светлой и тёмной версии.

Ссылки и подписи цветом темы тема затемняет сама настолько, чтобы их можно было прочитать на фоне, а текст на кнопке делает тёмным, если белый на светлом базовом цвете (лаймовом, жёлтом) читается плохо.

Фон главной можно изменить отдельно в «Главная страница → Сортировка блоков → Фон главной страницы»; рядом задаётся фон для тёмной версии. Пустые поля сохраняют общий фон сайта. Фон отдельного блока настраивается у самого блока и может закрывать фон страницы.

Готовые конфигурации

Раздел «Готовые конфигурации» в панели показывает доступные варианты оформления: карточку, кнопку «Применить», «Открыть витрину» и, если предусмотрено, «Скачать настройки». Применение заполняет подготовленные настройки оформления и содержимого главной; проверьте их в предпросмотре и нажмите «Сохранить». После этого поля можно менять вручную. Состав доступных вариантов зависит от вашей темы.

Поля «Своя цветовая схема» предназначены для тех, кто знаком с CSS: в них вставляются значения цветовых переменных темы, которые перекрывают цвета выше. Для обычной настройки они не нужны. Подробнее о собственном оформлении — в статье о CSS и JavaScript.

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

Настройте размеры и шрифты

В подразделе «Элементы дизайна» задаются скругление, тени и ширина контейнера. Ширина контейнера ограничивает основную область сайта на большом экране; она не превращает телефонную версию в уменьшенную копию настольной. «Скругление элементов» меняет характер кнопок, полей и карточек, а тени помогают отделить карточки от фона. При варианте «Круглые» кнопки и поля становятся «таблетками», а картинки, видео, таблицы и многострочные поля получают умеренное скругление и не превращаются в овал.

Там же:

  • «Размер кнопок и полей форм» — главные кнопки (купить, оформить, отправить, кнопки баннеров) и поля форм: 44, 48, 56 или 64 px на компьютере; на телефоне на 4 px меньше;
  • «Размер служебных элементов» — сортировка, переключатели вида, фильтры, вкладки, плашки, стрелки каруселей и листание; на телефоне они на 4 пикселя выше, чтобы попадать пальцем;
  • «Вид полей ввода» — с рамкой, заливкой или подчёркиванием;
  • «Ссылки в тексте» — подчёркнуты, подчёркиваются при наведении или пунктиром.

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

«Красивая типографика для текста, набранного в визуальном редакторе» оформляет абзацы, списки, цитаты и таблицы в описаниях категорий и товаров, на страницах и в текстовых блоках. Выключайте её только если этот текст уже оформлен собственным CSS.

«Максимальная высота выпадающих списков» ограничивает меню, фильтры и другие длинные списки: дальше они прокручиваются внутри. По умолчанию — 480 px, допустимо от 160 до 2000. Независимо от этого значения список не выходит за пределы экрана. «Ширина выпадающих меню» (меню пользователя, языка, валюты и другие короткие списки) и «Размер пунктов в выпадающих меню» задаются рядом; меню каталога и меню с колонками подстраиваются сами.

В подразделе «Настройки шрифтов» выбираются «Шрифт текста» и «Шрифт заголовков». Для текста доступны гарнитуры из поставки и «Шрифт устройства, без загрузки». Вариант «Тот же, что у текста» оставляет заголовки шрифтом основного текста; остальные варианты выбирают отдельную гарнитуру заголовков. В базовой Slate исходные шрифты — Onest для текста и Unbounded для заголовков; у готовой конфигурации они могут отличаться. Свой шрифт подключается полями «Название своего шрифта» (название семейства) и «Ссылка на свой шрифт» (адрес стилей шрифта, например Google Fonts): заполненное название заменяет оба шрифта выше — и текста, и заголовков.

Карусели и вкладки

В «Общие настройки → Карусели и вкладки» выбирается вид, общий для всего сайта: «Как показывать листание» (точки, полоски или номер слайда), «Как выглядят вкладки» (плашками, подчёркиванием или сегментами) и «Как выглядят стрелки» (контур, заливка, тень или без фона). Показывать ли стрелки и листание у конкретного блока, решают настройки этого блока. «Листание» не обязательно означает точки: при выборе «Полоски» или «Номер слайда» блок использует этот общий вид.

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

Что остаётся отдельной настройкой

Смена цветов не переставляет блоки и не заменяет фотографии. Состав главной меняется отдельно в настройках блоков, логотип — в «Общие настройки → Организация», а цвета частей шапки — в их собственных настройках (шапка и подвал).

Конфигурации могут иметь собственные декоративные элементы и оформление отдельных блоков. Поэтому одинаковые цветовые настройки не гарантируют совершенно одинакового вида разных конфигураций. Если отдельная форма сохраняет другой цвет, проверьте её настройки в приложении «Заявки»: заданное там оформление может перекрывать оформление темы. Подробнее — в статье о формах.

Готовые конфигурации магазина

В разделе панели «Готовые конфигурации» выберите «Дом и интерьер», «Электроника», «Одежда и стиль» или «Подарки». Это разные первые экраны, товарные подборки и блоки главной, а также оформление. Можно открыть демо или скачать штатный архив настроек родительской темы «Сайта» Slate:

«Применить» заполняет поля панели без постоянного сохранения. Проверьте страницу в предпросмотре и сохраните результат. Архив импортируется в настройках дизайна родительской темы «Сайта»; заранее сохраните экспорт текущих настроек. Контакты, название организации и номера сущностей демомагазина не переносятся. Товары и категории подключаются из вашего магазина.