Как сделать шапку и подвал на сайте
Шапка сайта
Вы можете сделать любую шапку, какую хотите. Вы можете сделать, чтобы там всё мелькало, прыгало и скакало, но сейчас мы действуем чётко.
Задача данного шага - создать шапку, наполнив соответствующую область сайта.
Задача данного шага - создать шапку, наполнив соответствующую область сайта.
Шапка может состоять из нескольких блоков. Скажем, если у вас шапка с кнопкой, то нужно добавить в шапку блок с попапом, который бы вызывался при клике на эту кнопку.
Вариант шапки №1
Сочетание блоков:
1) Шапки и подвалы → HdrSimpl: просто логотип
2) Поскольку в данной шапке нет меню, то мы добавляем его отдельно.
1) Шапки и подвалы → HdrSimpl: просто логотип
2) Поскольку в данной шапке нет меню, то мы добавляем его отдельно.
Во втором варианте использован блок MenuHam - Меню-гамбургер
Вариант шапки №2
Это блок HDRST-1. Просто шапка в строчку.
Вы можете выключить кнопку, можете выключить телефон, оставив шапку с логотипом и пунктами меню
Если вы делаете в шапке кнопку, по которой должен появляться попап с формой, то нужно прямо в шапку добавить блок "Форма, открываемая в попапе" (Формы → Fm05: Форма в попапе), сделав с кнопки ссылку (3 изображение)
На приведённом примере ссылка с кнопки будет такой: #popupform
Вы можете выключить кнопку, можете выключить телефон, оставив шапку с логотипом и пунктами меню
Если вы делаете в шапке кнопку, по которой должен появляться попап с формой, то нужно прямо в шапку добавить блок "Форма, открываемая в попапе" (Формы → Fm05: Форма в попапе), сделав с кнопки ссылку (3 изображение)
На приведённом примере ссылка с кнопки будет такой: #popupform
Ссылки на пунктах меню
Помните, что с логотипа мы делаем ссылку /, которая ведёт на главную страницу сайта
В будущем её можно использовать для большинства создаваемых вами сайтов. Для интернет-магазинов будут другие шапки, а для сайтов - самое оно.
В будущем её можно использовать для большинства создаваемых вами сайтов. Для интернет-магазинов будут другие шапки, а для сайтов - самое оно.
Дополнительные комментарии по созданию шапки
А. Шапка не должна быть высокой. Не нужно вставлять туда огромные логотипы. Особенно вертикальные. Шапка должна быть компактной. И у неё не должно быть огромных полей сверху/снизу
Б. Если вы загружаете логотип в виде картинки, у него не должно быть полей. Вот такой логотип должен быть обрезан
В. Нежелательно устанавливать изображения на фон. Не всегда получается подобрать такое изображение, которое хорошо смотрится и на компьютерах, и на мобильных. Но в подавляющем большинстве случаев сделать хорошее фоновое изображение в узком блоке проблематично
Б. Если вы загружаете логотип в виде картинки, у него не должно быть полей. Вот такой логотип должен быть обрезан
В. Нежелательно устанавливать изображения на фон. Не всегда получается подобрать такое изображение, которое хорошо смотрится и на компьютерах, и на мобильных. Но в подавляющем большинстве случаев сделать хорошее фоновое изображение в узком блоке проблематично
Подвал сайта
Есть 2 прекрасных блока, похожих друг на друга, которые подходят для оформления подвалов:
1) Шапки и подвалы → Footer03: Подвал в 4 столбца: лого и ссылки
2) Шапки и подвалы → Footer04: Подвал в 4 столбца: лого + текст, ссылки, ссылки, соцсети + контакты.
1) Шапки и подвалы → Footer03: Подвал в 4 столбца: лого и ссылки
2) Шапки и подвалы → Footer04: Подвал в 4 столбца: лого + текст, ссылки, ссылки, соцсети + контакты.
Детали:
1. Имя я написал текстом. Это важно для SEO, если у вас в шапке имя (название компании) сделано в виде графического файла. То есть поисковикам нужно знать название вашей компании, так что помочь им его узнать, сообщив текстом, - это важно.
2. В данном подвале 2 столбика ссылок. Во второй я поместил ссылки на посты в блоге. А над заголовком для первого думал минут 5, но ничего лучше чем "разделы" не придумал.
1. Имя я написал текстом. Это важно для SEO, если у вас в шапке имя (название компании) сделано в виде графического файла. То есть поисковикам нужно знать название вашей компании, так что помочь им его узнать, сообщив текстом, - это важно.
2. В данном подвале 2 столбика ссылок. Во второй я поместил ссылки на посты в блоге. А над заголовком для первого думал минут 5, но ничего лучше чем "разделы" не придумал.
Мессенджеры в подвале и ссылки
Теперь добавим в подвал ещё блок с мессенджерами (Соцсети и мессенджеры → Sn03: Мессенджеры, закрепленные на экране, Sn05: Иконка WhatsApp, закрепленная на экране, Sn06: Иконка Telegram, закрепленная на экране).
Как делаются ссылки на мессенджеры:
1. Телеграм: https://t.me/bazium, где на место "bazium" нужно поставить ваш ник.
2. Вотсап: https://wa.me/79000000000, где на место номера нужно поставить ваш.
И вот структура сайта и готова.
Всё реально просто, но есть мелочи, которые нужно проверить: работа ссылок, вид на мобильном, отсутствие грамматических ошибок.
1. Телеграм: https://t.me/bazium, где на место "bazium" нужно поставить ваш ник.
2. Вотсап: https://wa.me/79000000000, где на место номера нужно поставить ваш.
И вот структура сайта и готова.
Всё реально просто, но есть мелочи, которые нужно проверить: работа ссылок, вид на мобильном, отсутствие грамматических ошибок.