Чтобы добавить на сайт меню (шапку или Header), откройте библиотеку блоков, категорию «Меню» и выберите подходящий тип.
Настройка дизайна меню с помощью настроек и контента
Попробуем разработать похожее меню. Как можно заметить, дизайн данного меню использует прозрачную белую подложку, логотип, пункты и контактную информацию в виде телефона.
Шаг 1. Выбираем похожий тип меню в библиотеке блоков.
Шаг 2. Редактируем настройки меню. Во-первых, нам необходимо увеличить высоту меню, для этого переходим в «Основные настройки» — «Высота меню» и подбираем нужный нам размер. Задавать высоту можно либо в пикселях (например, 400px), либо в процентах от высоты экрана (vh, 1vh равен 1% области просмотра экрана) То есть, выбирая 100vh — мы создаем меню, которое занимает весь экран, выбирая 100px — мы создали меню, нужное нам по размеру. Во-вторых, зафиксируем меню при прокрутке сайта, выбираем «Фиксация при скролле» в «Поведение позиционирования меню»
Шаг 3. Продолжаем редактировать настройки меню. С помощью предпросмотра, можно увидеть что фон меню — темный с прозрачностью, нам необходимо заменить на светлый фон, сделать это можно перейдя к «Фон меню» и меняя цвет фона меню. Также, здесь можно настроить непрозрачность, тень, и непрозрачность меню после скролла (это процесс прокрутки содержимого веб-страницы)
Шаг 3. Доработаем настройки, изменив размер контейнера меню на 12 колонок, чтобы весь контент меню не растягивался по всей ширине экрана, а входил в ширину 12 колонок.
Шаг 4. Редактируем контент блока меню. Переходим в «Контент» и настраиваем логотип, удаляем текстовый заголовок и вставляем изображение логотипа. Переходим к списку пунктов меню, пишем текст и вставляем ссылки. Ссылку на страницу можно вставить, непосредственно, скопировав и вставив её, либо используя способ удобнее — «выбрать страницу».
Шаг 5. Вновь редактируем настройки, но для пунктов меню. Изначальный текст белого цвета — на светлой подложке он не читабелен, поэтому меняем цвет на черный, либо чуть светлее серый. Смотрим промежуточный результат через «предпросмотр». Кажется, текст мелкий, поэтому увеличием размер текста пунктов меню. Не забываем про жирность текста, редактировать её можно также в настройках пунктах меню «Насыщенность пунктов меню»
Шаг 6. Анимация при наведении. Для того, чтобы пункты меню при наведении курсора видоизменялись, например, по цвету, необходимо перейти также в настройки пунктов меню, пролистать вниз и обозначить необходимые цвета при наведении, подчеркивание и его цвет. Теперь, когда мы наводим мышкой на пункт меню, он меняет цвет и подчеркивается.
Шаг 7. Добавим номер телефона вместо кнопки. Для этого перейдем в настройки контента, уберем текст кнопки (таким образом, исчезнет и сама кнопка) вставим текст номера телефона в «Дополнительно». Отредактируем текст, выделив его, увеличивая размер и изменяя цвет.
Шаг 8. Итог и поправки. Частая ситуация, что на выходе получается не совсем то что планировали, поэтому необходимо всегда дорабатывать итоговый вариант, проанализировав в чем допустили ошибки. В данном случае, получился нечитабельный номер телефона — исправить это можно уменьшив непрозрачность блока меню до 80%
Шаг 9. Настройте меню автоматически для каждой страницы. Подробнее в разделе «Как правильно настроить сайт?» —
«Шапка и подвал» 