Как сделать шапку и подвал на сайте

Шапка сайта

Вы можете сделать любую шапку, какую хотите. Вы можете сделать, чтобы там всё мелькало, прыгало и скакало, но сейчас мы действуем чётко.

Задача данного шага - создать шапку, наполнив соответствующую область сайта.

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

Вариант шапки №1

Сочетание блоков:

1) Шапки и подвалы → HdrSimpl: просто логотип
2) Поскольку в данной шапке нет меню, то мы добавляем его отдельно.

Во втором варианте использован блок MenuHam - Меню-гамбургер

Вариант шапки №2

Это блок HDRST-1. Просто шапка в строчку.
Вы можете выключить кнопку, можете выключить телефон, оставив шапку с логотипом и пунктами меню

Если вы делаете в шапке кнопку, по которой должен появляться попап с формой, то нужно прямо в шапку добавить блок "Форма, открываемая в попапе" (Формы → Fm05: Форма в попапе), сделав с кнопки ссылку (3 изображение)
На приведённом примере ссылка с кнопки будет такой: #popupform

Ссылки на пунктах меню

Помните, что с логотипа мы делаем ссылку /, которая ведёт на главную страницу сайта

В будущем её можно использовать для большинства создаваемых вами сайтов. Для интернет-магазинов будут другие шапки, а для сайтов - самое оно.

Настройка шапки поверх контента

Шапку поверх контента можно закрепить в блоках:

HdrSh: шапка для интернет-магазинов, с избранным, входом в личный кабинет и гибкими настройками
HdrSt-1: шапка для сайтов с выпадающим меню
Hdr05: Шапка с гамбургером и корзиной
Hdr06: Шапка в строчку с меню, телефоном и корзиной
Hdr07: Шапка с основным меню и меню-гамбургер

Чтобы установить шапку поверх контента нужно:
- перейти в настройки "Дизайн" блока
- выбрать пункт "Поведение" ("Закрепить шапку")
- поставить отметку "Поверх контента"

Так же в этом меню можно зафиксировать блок шапки на экране. То есть, при прокрутке странички шапка будет оставаться на экране.

В блоках, которые следуют за шапкой, нужно установить отступ сверху, чтобы шапка не перекрывала информацию!

Дополнительные комментарии по созданию шапки

А. Шапка не должна быть высокой. Не нужно вставлять туда огромные логотипы. Особенно вертикальные. Шапка должна быть компактной. И у неё не должно быть огромных полей сверху/снизу

Б. Если вы загружаете логотип в виде картинки, у него не должно быть полей. Вот такой логотип должен быть обрезан

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

Подвал сайта

Есть 2 прекрасных блока, похожих друг на друга, которые подходят для оформления подвалов:

1) Шапки и подвалы → Footer03: Подвал в 4 столбца: лого и ссылки
2) Шапки и подвалы → Footer04: Подвал в 4 столбца: лого + текст, ссылки, ссылки, соцсети + контакты.

Детали:

Имя я написал текстом. Это важно для SEO, если у вас в шапке имя (название компании) сделано в виде графического файла. То есть поисковикам нужно знать название вашей компании, так что помочь им его узнать, сообщив текстом, - это важно.

В данном подвале 2 столбика ссылок. Во второй я поместил ссылки на посты в блоге. А над заголовком для первого думал минут 5, но ничего лучше чем "разделы" не придумал.

Мессенджеры в подвале и ссылки

Теперь добавим в подвал ещё блок с мессенджерами (Соцсети и мессенджеры → Sn03: Мессенджеры, закрепленные на экране, Sn05: Иконка WhatsApp, закрепленная на экране, Sn06: Иконка Telegram, закрепленная на экране).

Как делаются ссылки на мессенджеры:

1. Телеграм: https://t.me/bazium, где на место "bazium" нужно поставить ваш ник.
2. Вотсап: https://wa.me/79000000000, где на место номера нужно поставить ваш.

И вот структура сайта и готова.

Всё реально просто, но есть мелочи, которые нужно проверить: работа ссылок, вид на мобильном, отсутствие грамматических ошибок.