Как только мы задумываемся о создании сайта, первая мысль — это какой должна быть шапка сайта и как создать шапку сайта. И это естественно. Ведь шапка это первое, что бросается в глаза посетителям. Не зря говорят — встречают по одежке…
Лучше всего конечно, заказать шапку дизайнеру если вы сами не умеете рисовать или у вас отсутствует художественное воображение. Но не у всех и не всегда есть такая возможность. И в этой статье давайте разберем, как мы может сделать шапку для своего сайта самостоятельно и что для этого надо знать.
Шапка сайта (Header) — это верхняя часть ресурса, которая повторяется на всех страницах. Она не только служит украшением, оформлением, но и несет также информационную-маркетинговую составляющую. Что более важно.
Какой должен быть размер шапки сайта?
Сказать, что хедер должен быть каких то четких размеров, нельзя. Все зависит от вашего желания, дизайна и цели. Сейчас все больше и больше появляется ресурсов, где header несет чисто информативный характер. И такую шапку создать, относительно дизайна, гораздо легче.
Какие элементы должны быть на шапке?
- Логотип — это графический знак который будет ваш ресурс отличать от других. Логотип должен быть уникальным, качественным и привлекать внимание. Маркетинговые исследования показали, что стоять он должен в левом верхнем углу. Так как мы сканируем информацию с лева на право и сверху вниз. Такой латинской буквой F.
- Контакт для связи — это может быть телефон, email адрес, физический адрес. И располагаться должен в правом верхнем углу. Хотя и может быть верху посередине строчки. Главное, чтобы его было хорошо и четко видно и не надо было искать.
- Меню — это обязательная составляющая. Без него посетитель не сможет ориентироваться на вашем ресурсе. Так называемая юзабилити сайта.
- Заголовок — должен иметь крупный шрифт. Написан кратко и понятно о чем сайт. Что получит, о чем узнает посетитель на вашем ресурсе.
Это четыре элемента которые считаются обязательными. Также можно добавить фото автора, картинку которая подходит по смыслу или фон.
Если ваш header на весь экран, то можно написать, для кого этот ресурс, чем он уникален и поставить небольшую форму для связи или заказа.
Только не делайте такие формы с большим количеством полей. Максимально 3-4 поля имя, город, телефон и email
Адаптивность — очень важно и это влияет на продвижение в поисковиках, чтобы сайты были адаптивными. Это значит, что одинаково красиво, четко и понятно отображались не только на компьютерах, но и планшетах и мобильных телефонах.
Изображения — если вы используете в шапке картинки, фото, фон, то они должны быть уникальны и оптимизированы.
Это значит, что желательно делать картинки для своего ресурса самостоятельно и главное уменьшать вес картинки. От этого зависит, как долго будет загружаться ваша шапка в браузере. И поверьте очень плохо реагируют на долгую загрузку и посетители и поисковики.
Инструменты для создания шапки самостоятельно?
Для того чтобы создать хедер для сайта, на движке wordpress. Нам нужны несколько плагинов.
Плагин — Elementor, как его скачать и установить смотрите здесь и
Плагин — Header, Footer for Elementor
Для создания логотипа можно воспользоваться сервисом Logaster или LogoFactory Web
А сейчас пришло время практики. Открывайте видео урок м смотрите как создать шапку сайта, так как там показать как работать с этими инструментами удобнее и удачи!
