Организация, шапка и подвал

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

Сначала заполните данные организации

Откройте «Общие настройки → Организация». Укажите название и описание компании, загрузите логотип, заполните «Телефоны и адреса» и ссылки на социальные сети. В списке офисов можно хранить несколько адресов и телефонов, расписание, почту, картинку и ссылку на карту.

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

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

Логотип

Логотип задаётся в «Общие настройки → Организация → Основной логотип». Подойдёт обычная картинка, SVG-файл или SVG-разметка, вставленная целиком. Если заполнено несколько полей, тема использует разметку, затем SVG-файл, затем картинку; если логотипа нет, вместо него выводится название компании или сайта. У каждого вида есть поле для тёмного оформления; пустое тёмное поле использует светлый вариант.

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

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

Выберите состав шапки

На компьютере шапка состоит из частей: «Шапка → Верхняя часть шапки», «Основная часть шапки» и «Нижняя часть шапки». У готовых конфигураций может быть только основная часть. Каждую часть можно выключить, задать ей фон («На всю ширину» или «Внутри»), цвет текста и ссылок.

Начните с «Шапка → Общие настройки → Готовые составы»: «Магазин», «Маркетплейс», «Бутик», «В одну строку» или «С контактами». Состав заполняет части шапки, их фон и подписи у иконок, после чего всё можно менять. В подразделе «Состав шапки» каждой части элементы переставляются перетаскиванием, собираются в группы и выключаются: например, можно оставить логотип, меню, телефон и кнопку связи. Своим элементом может быть блок из «Сайт → Блоки».

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

В «Шапка → Настройки блоков» настраивается внешний вид элементов во всех частях: вид поиска и популярные запросы, подписи у иконок кабинета, корзины, избранного и сравнения, фон кнопки корзины и выпадающая корзина, окно с контактами у телефона (списком или в две колонки, слева, по центру или справа), вид кнопки обратной связи. «Кнопки с фоном» — цветные кнопки-плашки перед меню: текст, ссылка, вид (заливкой, мягкой заливкой или контуром) и цвет. Если включён «Выбор приложения для поиска», посетитель сможет выбрать, где искать: в магазине, блоге, поддержке или сообществе. Список доступных элементов зависит от конфигурации и приложений: у сайта услуг может не быть корзины или каталога магазина.

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

Полоса с объявлением над шапкой настраивается в «Медиа-баннеры → Баннер над шапкой»: заголовок, текст, кнопка, крестик закрытия и цвета фона и текста (отдельно для тёмной версии). Закрытый баннер не показывается посетителю заданное число часов; после изменения текста он появится снова. Остальные баннеры раздела — в статье «Медиа-баннеры».

Если первым блоком главной стоят «Большие баннеры» во всю ширину, на компьютере шапка может лежать поверх баннера — это настройка самого блока, см. «Блоки главной страницы».

Настройте меню шапки

Меню каждой части настраивается в её подразделе «Навигационное меню». В «Источнике ссылок меню» выберите:

• «Страницы сайта» — страницы приложения «Сайт» в их порядке, вложенные страницы становятся подпунктами;
• «Произвольные ссылки» — свой список: названия, адреса, порядок и вложенность. Изменение такого списка не переименовывает сами страницы;
• «Категории товаров» — дерево категорий магазина;
• «Приложение «Управление меню»» — меню из этого приложения по его номеру.

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

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

В «Шапка → Настройки блоков → Выпадающие меню» задаётся, как открываются подменю — по клику или при наведении, размер картинок подпунктов, сколько колонок у широкой панели, «Подпунктов до кнопки «Ещё»» (0 — все сразу) и «Подпункты с описанием — в две колонки».

Пункты, которые не помещаются в строку, автоматически уходят в пункт «Ещё», в том числе после смены шрифта или ширины контейнера. Вид «Ещё» выбирается отдельно в поле «Пункт «Ещё»». Длинные выпадающие меню не выходят за экран и прокручиваются внутри; их наибольшая высота, ширина и размер пунктов задаются в оформлении сайта.

Кнопка «Каталог» — отдельный элемент состава шапки. Её подпись, «Стиль кнопки» (как в оформлении или градиентом), вид меню («Колонки», «Сетка», «Список» или «Плитки»), источник — категории товаров или меню из приложения «Управление меню», глубина дерева категорий, картинки, бренды, «Подкатегорий до кнопки «Ещё»» и баннер настраиваются в «Шапка → Настройки блоков → Каталог» и «Баннер каталога». Пока каталог открыт на компьютере, страница под ним затемняется, а значок кнопки превращается в крестик.

Для вида «Колонки» отдельно выбираются «Раскладка подкатегорий» («Колонками сверху вниз» или «Строками»), число колонок, «Заголовок раздела с числом товаров», размер и оформление картинок подразделов. «Сворачивать подразделы» позволяет раскрывать их по названию, а ссылка «Все товары» ведёт в раздел; исходное состояние задаётся в «При открытии каталога». «Баннер раздела» берётся из картинок категории; рекомендуемая пропорция — 3:4, от 600×800 пикселей.

«Высота выпадающего меню» у «Колонок» сохраняет выбранную высоту при переходе между разделами; длинное содержимое прокручивается внутри, а само окно ограничено свободным местом на экране. «Ссылка на раздел первым пунктом подменю» добавляет переход в сам раздел у вида «Список», в том числе внутри «Ещё». По умолчанию она выключена; включите её, если название пункта по клику только раскрывает подменю.

Мобильная версия

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

• «Шапка» — «Вид мобильной шапки»: «В одну строку», «Поиск отдельной строкой» или «Цветная, как у маркетплейсов» (шапка цветом темы со скруглённым низом, поиск под логотипом, по желанию кнопка каталога рядом с поиском и картинка внизу шапки на главной, пропорции 4 к 1). Здесь же закрепление, состав элементов (отдельно для шапки в одну строку и для шапки с поиском отдельной строкой) и «Разделы лентой под шапкой»: строка ссылок-плашек, которая листается пальцем. Ссылки ленты — отдельный список, а не копия меню. «Кнопка телефона» решает, что делает трубка в шапке: «Открывать панель контактов» (снизу выезжают все номера и мессенджеры, обратный звонок, почта, адрес, режим работы и соцсети из «Организации») или «Сразу звонить» на первый номер.
• «Меню» — выезжающая панель по кнопке «Меню»: во весь экран на телефоне или панелью, с закрытием свайпом. «Источник основного меню» может повторять основную часть шапки («Как в шапке») или брать страницы, произвольные ссылки, категории или меню приложения; «Подпункты» открываются экранами вглубь, раскрываются на месте или не показываются вовсе. Ниже бренды и отдельное «Меню страниц» со своим источником; его можно выключить. Для каталога выбирается вид: «С кнопкой «Назад»», «Пункт «Каталог»» или «Аккордеоны», а также глубина, картинки категорий и отбор категорий по номерам. Если установлен плагин выбора города, «Выбор города перед каталогом» показывает его строкой в меню.
• «Нижняя панель» — кнопки внизу экрана телефона. В «Кнопках панели» меняются их порядок и видимость; «Подписи под иконками» включают названия. Если включённые кнопки не помещаются по ширине, панель листается пальцем вбок: лишние кнопки не пропадают.

Бренды выводятся в мобильном меню отдельным пунктом, если установлен плагин брендов и включено «Показывать бренды»; вид — список с логотипами, сетка логотипов или только названия. В подразделе «Что показывать» включаются вход, телефоны, кнопка обратной связи, контакты и социальные сети. Телефоны, адрес, почта и часы работы берутся из главного офиса. Если номеров несколько, поле «Несколько телефонов» выводит их списком или в подменю. «Блок действий» добавляет в меню ссылки на корзину, заказы, избранное, сравнение и кабинет.

Настройте подвал

В «Подвал → Общие» выберите вид подвала («Колонки: логотип, меню, контакты, соцсети», «Ссылки рядами» или «Компактный: ссылки и контакты»), его фон (отдельно для светлой и тёмной версии) и цвет текста — светлый подвал с тёмным текстом или тёмный со светлым, где стоят контактные данные (слева, справа или не показывать), способы оплаты и копирайт. Там же можно включить переключатели языка и валюты, небольшие ссылки «Работает на Webasyst» и «Разработано в Easyweb» рядом с копирайтом и «Произвольный HTML в подвале» — он печатается под копирайтом без изменений, например для значка платёжного сервиса. В копирайте можно использовать %year%: тема подставит текущий год. Пустой копирайт тема заполнит сама: знак, год и название сайта.

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

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

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

Хлебные крошки

В «Общие настройки → Хлебные крошки» задаются название и адрес первой крошки (например, «/shop/» — чтобы цепочка начиналась с главной магазина), показ крошки «Главная» на страницах первого уровня, показ текущей страницы последней крошкой, подкатегории в выпадающем списке и то, как выглядит длинная цепочка: переносится на новую строку или остаётся в одну строку с прокруткой.