TGPRINT

Дизайн

Внешний вид сайта: глобальный стиль, цвета, логотип и скругления.

Обновлено:

Настройки → Дизайн управляют тем, как выглядит сайт, — без кода и без дизайнера. Решения, принятые здесь, применяются везде: на страницах товаров, в корзине, при авторизации, в виджетах. Страница разделена на вкладки: Стиль сайта, Бренд и цвета, Макет, Меню и футер, Страницы; у каждой из них своя кнопка Сохранить изменения.

Настройки дизайна
Дизайн → Стиль сайта: выбор глобального визуального стиля магазина из семи вариантов.

Стиль сайта

Стиль сайта — это единый визуальный стиль для всего магазина: страниц товаров, корзины и авторизации, — выбранный из вариантов Classic, Minimal, Bordered, Compact, Mesh Grid, Spotlight и Liquid. Каждый вариант меняет карточки, поля и кнопки в одном ключе (от классического с тенями до минимального без рамок). У меню и подвала остаются собственные настройки (вкладка Меню и футер). Отдельный товар может стать исключением благодаря Page Design Overrides в его карточке — см. Карточка товара.

Бренд и цвета

Визуальная идентичность: Логотип и фавикон — логотип (PNG, JPG или SVG, максимум 400 КБ; варианты для светлого и тёмного фона) и фавикон (только .ICO, рекомендуется 16×16 или 32×32 px), выбранные из Медиабиблиотеки или загруженные на месте, — затем Цветовая схема: основной цвет, акцентный, фоны и текст, сохраняемые цвет за цветом (Цвет сохранён). Тема по умолчанию определяет, с какой темой открывается сайт (Светлая или тёмная) для нового посетителя; дальше посетитель может переключить её сам. Цвета становятся переменными на всём сайте.

Макет

Настройки макета: Ширина контейнера (px) — максимальная ширина контента на больших экранах; Минимальный боковой отступ (px) — расстояние от края экрана на телефоне; Радиус скругления (px) — скругление углов, применяемое пропорционально к карточкам, кнопкам и полям (0 = прямые углы). То же значение скругления наследуют и виджеты, и страницы товаров, чтобы всё выглядело из одной семьи.

Меню и футер

Внешний вид меню и подвала — их содержимое администрируется отдельно, в разделе Контент → Контент сайта → Меню / Меню в подвале (Меню и подвал):

  1. Верхняя линия — тонкая полоса над меню (телефон, режим работы, язык) с её блоками.
  2. Стиль меню и Дизайн меню — визуальный вариант; Позиция меню (Сверху, Слева, Справа — как боковая панель, с параметрами Ширина боковой панели и Свёрнуто по умолчанию); Фиксированное меню (остаётся видимым при прокрутке); Ширина меню (Полная ширина / Compact) и Выравнивание меню (Начало / Центр / Окончание).
  3. Цвета меню — Цвет фона меню, Цвет текста меню, Цвет акцента меню, с параметрами Прозрачный фон, Прозрачность фона и Размытие фона для эффекта стекла.
  4. Толщина иконок (Тонкие, Лёгкие, Обычные, Жирные, Заливка, Двухтон) и Размер иконок, с такой же парой настроек для подвала.
  5. Стиль подвала, Дизайн подвала, Цвет фона / текста / акцента подвала и Ширина подвала.

Страницы

Стиль страницы товара (положение галереи относительно калькулятора, плотность) и значения по умолчанию для виджетов (отступы, стиль карточки, эффекты при наведении), которые каждый виджет может переопределить в своей форме, — см. Виджеты.

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