Шапка сайта

Шапка сайта — верхняя полоса на всех страницах: название или логотип, меню, кнопка действия и ссылки на соцсети. Её настраивают отдельно от глобальных стилей сайта — прямо в превью при редактировании страницы.

Состав и порядок пунктов меню подробнее — в Меню навигации. Над шапкой может располагаться панель объявлений.

Перед началом

1. Откройте редактор: ваш-id.photosquare.ru/config.
2. Откройте любую страницу в режиме редактирования (кнопка Редактировать на превью).
3. Наведите на шапку и нажмите Редактировать верхнюю часть сайта.

[изображение: оверлей «Редактировать верхнюю часть сайта» на шапке в превью]

Шапка подсветится, появятся области: Заголовок (или Логотип, если загружен), Навигация, Кнопка, Соцсети, на мобильном — Меню (иконка бургера).

Как открыть настройки

Есть два способа:

1. Общие настройки шапки — кнопка Редактировать на панели у шапки (на мобильном превью — справа от фрейма).
2. Конкретный элемент — клик по области шапки, затем иконка карандаша; можно также дважды щёлкнуть по области. Откроется диалог именно для этого элемента.

Диалоги можно перетаскивать зажав кнопкой мыши верхнюю часть диалога. Изменения сразу видны в превью.

Заголовок и логотип

Откройте область Заголовок / Логотип.

1. Заголовок сайта — текстовое название, если логотип не загружен.
2. Изображение логотипа — заменяет текст; после загрузки появятся ползунки Высота логотипа и Макс. высота логотипа на мобильных.
3. Логотип для социальных сетей (опционально) — картинка для превью при публикации ссылок на сайт в соцсетях (не путать с иконками соцсетей в шапке).

[изображение: диалог «Контент» с полями заголовка и загрузки логотипа]

Навигация

Откройте область Навигация. В дереве отображаются страницы главного меню — перетащите пункты, чтобы изменить порядок.

Чтобы добавить страницу в меню или создать новую, нажмите Перейти в раздел «Страницы» — подробнее в Меню навигации.

Кнопка действия

Кнопка в правой части шапки (например, «Записаться» или «Связаться»). Откройте область Кнопка.

Контент:

1. Текст — надпись на кнопке.
2. Ссылка — куда ведёт кнопка; можно открывать в новой вкладке.

Дизайн:

1. Вариант кнопки — основная, второстепенная или дополнительная (глобальный вид кнопок — в Стили кнопок).

Чтобы скрыть кнопку, отключите переключатель Кнопка действия на вкладке Элементы в общих настройках шапки или удалите её через иконку корзины на области Кнопка.

Ссылки на соцсети

Откройте область Соцсети.

Контент:

1. Список ссылок — добавление, редактирование URL, включение/отключение, сортировка перетаскиванием.

Дизайн:

1. Размер иконки
2. Форма обводки — без обводки, квадрат, скругление или круг
3. Стиль — контур или заливка (если обводка включена)
4. Толщина обводки

Скрыть блок — переключатель Ссылки соц. сетей на вкладке Элементы или удаление через оверлей.

Общие настройки шапки

Кнопка Редактировать на панели шапки открывает диалог с вкладками Элементы, Дизайн и Цвета.

Элементы

1. Кнопка действия — показать или скрыть.
2. Ссылки соц. сетей — показать или скрыть.

На мобильном превью вкладка Элементы доступна только когда открыто мобильное меню (кнопка Посмотреть меню).

Дизайн

Макет — расположение логотипа и меню на десктопе:

1. Навигация по центру
2. Навигация справа
3. Навигация слева
4. Брендинг по центру
5. Брендинг по центру, навигация по центру

На мобильном — отдельные варианты с превью (положение логотипа и кнопки меню).

[изображение: выпадающий список макетов шапки с мини-схемами]

Расстояния (десктоп):

1. Интервал между ссылками — расстояние между пунктами меню.
2. Интервал между элементами — расстояние между группами (логотип, меню, кнопка, соцсети).

Эффекты:

1. Фиксированное положение — шапка остаётся вверху при прокрутке страницы.

Размеры:

1. Высота — вертикальные отступы шапки (отдельно для десктопа и мобильного превью).
2. Ширина — На всю ширину или Врезка (шапка уже полей сайта).

Цвета

Заливка:

1. Сплошной — однотонный или по цветовой теме сайта (Цвета и цветовые темы).
2. Градиент — цвет фона и цвет навигации.
3. Адаптивный — прозрачная шапка, которая подстраивается под фон секции под ней.

Для сплошной заливки можно выбрать Цвет (фон и навигация) или Тему из палитры сайта. Доступны Прозрачность, Размытие фона и Сила размытия.

[изображение: вкладка «Цвета» с выбором заливки и палитрой тем]

Мобильное меню

Переключите превью на Мобильный (Превью в редакторе). Нажмите Посмотреть меню, чтобы открыть полноэкранное меню.

Область Меню (иконка бургера):

1. Иконка — две линии, три линии, смещённая линия или плюс.
2. Толщина линии

Когда меню открыто, на вкладке Дизайн общих настроек:

1. Интервал между ссылками в оверлее меню
2. Выравнивание — слева, по центру или справа

На вкладке Цвета в этом режиме выбирается цветовая тема для фона мобильного меню.

Сохранение

Изменения шапки сразу отображаются в превью, но на сайт попадают только после сохранения.

1. Убедитесь, что нужный результат виден в превью.
2. Нажмите Сохранить на панели над превью.

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