Как сделать шапку и подвал на сайте
1
Шапка сайта
Вы можете придумать любую шапку, какую захотите. Можно сделать так, чтобы в шапке всё плавно подсвечивалось, прыгало или скакало — всё зависит только от вашей фантазии.
Задача этого шага — создать саму шапку и наполнить её нужным содержимым.
Важно помнить, что шапка — это общая часть сайта, она будет отображаться на всех страницах.
Задача этого шага — создать саму шапку и наполнить её нужным содержимым.
Важно помнить, что шапка — это общая часть сайта, она будет отображаться на всех страницах.
Шапка может состоять из нескольких блоков. Например, если у вас есть кнопка, то вместе с ней нужно добавить блок с попапом — окно, которое откроется при нажатии на кнопку.
2
Варианты шапок
Есть разные варианты шапок — с кнопками, соцсетями, логотипами, с меню или без. Вы можете выключить кнопку, можете выключить телефон, оставив шапку с логотипом и пунктами меню.
В разделе «структура» (навести на нужный блок → Дизайн) можно легко менять местами эти части: например, переместить логотип посередине или сделать так, чтобы меню было на отдельной строке.
Таким образом, вы можете настроить шапку так, чтобы она идеально подходила под ваш стиль и нужды.
В разделе «структура» (навести на нужный блок → Дизайн) можно легко менять местами эти части: например, переместить логотип посередине или сделать так, чтобы меню было на отдельной строке.
Таким образом, вы можете настроить шапку так, чтобы она идеально подходила под ваш стиль и нужды.
Если вы делаете в шапке кнопку, по которой должен появляться попап с формой, то нужно прямо в шапку добавить блок «Форма, открываемая в попапе» (Попапы → Pop08: Форма в попапе), сделав с кнопки ссылку (2 изображение)
На приведённом примере ссылка с кнопки будет такой: #popupform
На приведённом примере ссылка с кнопки будет такой: #popupform
3
Шапка поверх контента
Шапку поверх контента можно закрепить в блоках:
Чтобы установить шапку поверх контента нужно:
- навести на нужный блок → Дизайн
- выбрать пункт Поведение → «Поверх контента»
Так же в этом меню можно зафиксировать блок шапки на экране. То есть, при прокрутке странички шапка будет оставаться на экране:
Дизайн → Поведение → «Фиксировать на экране»
- Head01: Логотип и слоган по центру (и на вариациях слева, справа -- тоже)
- Head03: Шапка в строчку (максимальная компоновка)
- Head04: Шапка в строчку с телефоном
- Head05: Шапка в строчку с соцсетями
- Head06: Шапка в строчку с кнопкой
- Head07: Шапка в строчку для интернет-магазинов
- Head08: Шапка в строчку (лого и меню)
- Head09: Шапка в строчку с логотипом по центру
- Head10: Шапка с меню на 2-ой строке
- Head12: Шапка с 2 кнопками для доступа в личный кабинет
Чтобы установить шапку поверх контента нужно:
- навести на нужный блок → Дизайн
- выбрать пункт Поведение → «Поверх контента»
Так же в этом меню можно зафиксировать блок шапки на экране. То есть, при прокрутке странички шапка будет оставаться на экране:
Дизайн → Поведение → «Фиксировать на экране»
В блоках, которые следуют за шапкой, нужно установить отступ сверху, чтобы шапка не перекрывала информацию!
4
Ссылки на пунктах меню
Для ссылки на другую страницу сайта прописываем /pаge
Для ссылки на блок внутри страницы прописываем #blok
Если вы делаете ссылку на внутренний блок, а у вас на сайте несколько страниц, перед ссылкой блока #blok, нужно поставить URL страницы.
Например, если блок находится на главной странице, то ссылка будет вида /#blok
Для ссылки на блок внутри страницы прописываем #blok
Если вы делаете ссылку на внутренний блок, а у вас на сайте несколько страниц, перед ссылкой блока #blok, нужно поставить URL страницы.
Например, если блок находится на главной странице, то ссылка будет вида /#blok
Помните, что с логотипа мы делаем ссылку /, которая ведёт на главную страницу сайта.
5
Дополнительные комментарии по созданию шапки
А. Шапка не должна быть высокой. Не нужно вставлять туда огромные логотипы. Особенно вертикальные. Шапка должна быть компактной. И у неё не должно быть огромных полей сверху/снизу
Б. Если вы загружаете логотип в виде картинки, у него не должно быть полей. Вот такой логотип должен быть обрезан
В. Нежелательно устанавливать изображения на фон. Не всегда получается подобрать такое изображение, которое хорошо смотрится и на компьютерах, и на мобильных. Но в подавляющем большинстве случаев сделать хорошее фоновое изображение в узком блоке проблематично
Б. Если вы загружаете логотип в виде картинки, у него не должно быть полей. Вот такой логотип должен быть обрезан
В. Нежелательно устанавливать изображения на фон. Не всегда получается подобрать такое изображение, которое хорошо смотрится и на компьютерах, и на мобильных. Но в подавляющем большинстве случаев сделать хорошее фоновое изображение в узком блоке проблематично
6
Подвал сайта
Есть 2 прекрасных блока, похожих друг на друга, которые подходят для оформления подвалов:
- Шапки и подвалы → Footer03: Подвал с контактами и 3 блоками ссылок
- Шапки и подвалы → Footer04: Подвал с контактами и 2 блоками ссылок
Название компании/имя лучше писать текстом -- это важно для SEO, если ранее в шапке вы использовали логотип. То есть, поисковикам необходимо знать название вашей компании, поэтому важно предоставить им эту информацию в виде текста — чтобы они могли легко её распознать и учесть
7
Мессенджеры в подвале и ссылки
Теперь добавим в подвал ещё блок с мессенджерами (Соцсети и мессенджеры → 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, где на место номера нужно поставить ваш.
И вот структура сайта и готова.
Всё реально просто, но есть мелочи, которые нужно проверить: работа ссылок, вид на мобильном, отсутствие грамматических ошибок.