Здравствуй, дорогой читатель. В этой статье расскажу, как сделать шапку сайта и зачем она нужна. Какую информацию в ней разместить и какие инструменты использовать.
В предыдущих статьях мы познакомились с установкой темы сайта на примере шаблона Астра. Настроили цветовую гамму ресурса, кнопки и другое. Продолжим настраивать внешний вид.
Содержание
Шапка сайта — это …
Шапка сайта, или хедер, — это верхняя часть сайта, одинаково выводимая на каждой его странице. Она всегда находится на видном месте и всегда считывается. Поэтому должна предоставлять пользователю ключевые сведения о ресурсе.
В шапке необходимо разместить логотип и название сайта. При необходимости это подскажет читателю на каком ресурсе он находится. Так же нужно добавить меню сайта. Это поможет быстро перемещаться по разделам. Добавьте строку поисковых запросов на видное место. И она обеспечит удобный поиск материалов на ресурсе. Если у вас услуговый сайт добавьте телефон для быстрой связи.
Список рекомендуемых элементов для шапки зависит от назначения сайта. Например, для интернет-магазина он будет значительно шире. Добавятся кнопки для перехода: в каталог товаров, в корзину, в раздел с избранными, в профиль покупателя, в форму заказа звонка и другие.
Лишних элементов помещать в этот блок не следует. Опасно его перегружать. Это будет отвлекать внимание читателя. Например, размещенные кнопки с переходами в соцсети могут слишком рано увести пользователя с сайта. Поэтому их часто размещают в подвале.
Некоторым элементам следует уделить больше внимания поэтому их не стоит помещать в хедер. Например, вместо кнопки в шапке сайта на действующую акцию лучше сделать отдельный баннер под ней. При этом на нем можно разместить больше интригующей информации.
Шапка порой содержит много полезной информации и должна легко восприниматься. Поэтому необходимо правильно подобрать типографику. Стили и цвета шрифтов должны быть четкими, гармоничными, не теряться на основном фоне и среди изображений, улучшать восприятие предлагаемого контента.
Информативность, гармоничное сочетание и оформление элементов шапки сайта влияют на первое впечатление пользователя.
Стоит аккуратно использовать изображения в этой части сайта. Они должны гармонично вписывать и использоваться в минимальном количестве.
Как сделать шапку сайта
Инструменты настройки шапки сайта размещены в разделе Конструктор хедера. Чтобы в него попасть в Консоли выбираем раздел Внешний вид. Затем переходим в подраздел Настроить. Далее нажимаем Конструктор хедера. После чего откроется дополнительная нижняя панель инструментов.
Можно видеть, что данный блок состоит из трех горизонтальных секций. Они предназначены для размещения информационных элементов. И три уже представлены. Это название сайта. Оно создано автоматически и требует замены на реальное. Меню сайта и поисковая строка — были созданы нами ранее.
Добавляем телефон
Давайте добавим на сайт телефон в правый верхний угол шапки. Для этого в нижней панели инструментов в правой части средней секции нажимаем кнопку добавления элемента. В открывшемся меню выбираем элемент HTML1.
Видим, что в указанной секции панели появился новый элемент HTML1. В верхнем поле отображения результатов он также появился в соответствующем месте. Нажимаем у него клавишу редактирования (карандашик). После чего слева открывается панель инструментов для его корректировки. В текстовом поле стираем имеющуюся надпись и вносим номер телефона.
Телефон появился также в поле демонстрации результатов. У телефона можно поменять размер шрифта, выделить жирным. А также его возможно добавить другими способами.
Добавляем логотип
Изменим название сайта, разместим логотип и фавикон. Для этого нажимаем карандаш рядом с названием сайта. И переходим в открывшуюся боковую панель инструментов для его редактирования.
Первая строка панели предлагает разместить логотип. Нажимаем на кнопку Выбрать логотип. Далее выбираем вкладку Загрузить файлы. Затем нажимаем на кнопку Выберите файлы. Выбираем подготовленный файл в открывшемся окне и нажимаем Открыть. В окне загруженных файлов нажимаем кнопку Выбрать.
Алгоритм загрузки изображений рассмотрен здесь, а об их оптимизации читайте в этой статье.
Подобрать логотип можно с помощью конструкторов логотипов. Например, бесплатного сервиса logoza. Следует скачать готовый на компьютер. Затем загрузить на сайт.
В окне настроек ниже выбираем ширину логотипа 100. Включаем ролик в строке Показывать название сайта. В поле Название сайта вписываем его наименование. Нижеследующий ролик включаем. После чего логотип и заголовок выстроятся в одну линию. Включаем ролик в строке Показать краткое описание. А в соответствующее поле вносим краткую запись о содержании ресурса.
Ниже в специальное поле добавляем иконку сайта (фавикон). Алгоритм добавления фавикона такой же, как у логотипа. У меня логотип и иконка сайта — один и тот же файл с изображением. После размещения иконки нажимаем кнопку Опубликовать.
Найти иконку можно на бесплатных сайтах иконок, например, на Icons8. Скачать на компьютер, затем загрузить.
Обратите внимание. После введения названия сайта оно появилось в поле показа результатов редактирования. А также в адресной строке сайта. Видимость фавиконки изменится аналогично.
Добавляем кнопку
Рядом с телефоном разместим кнопку Написать в WhatsApp. Для этого в нижней панели инструментов в среднем секторе нажмем кнопку Добавить. В появившемся меню выберем элемент Button. Появилась кнопка в указанном месте.
Для ее редактирования нажимаем карандаш и переходим в открывшуюся боковую панель. В поле Текст вводим текст кнопки. Например, «Написать в WhatsApp». А в следующее поле вводим ссылку «https://web.whatsapp.com/». В строке ниже Открыть в новой вкладке включаем ролик.
Далее переходим во вкладку Дизайн. Здесь корректируем внешний вид кнопки. Можно изменить: цвет текста, фона, контура кнопки и др. Ниже открываем вкладку редактирования текста. В ней настраиваются: семейство и размер шрифтов, насыщенность и другие элементы. После выставления настроек нажимаем кнопку Опубликовать. Затем проверяем правильность работы кнопки на сайте.
Добавьте самостоятельно и другие элементы на ваше усмотрение. Для удаления ненужного элемента в нижней панели инструментов нажмите крестик справа от него. О настройке кнопки обратной связи, можно прочитать в этой статье.
Добавляем в шапку сайта меню и поисковую строку
Создание меню, поисковой строки и их добавление в шапку я перенесла в другую статью.
Заключение
Сегодня рассказала, как настроить шапку сайта и зачем она нужна. Какую информацию необходимо в ней размещать обязательно. Познакомила с инструментами добавления и настройки различных элементов. С помощью этой статьи вы настроили свою шапку сайта.
Функционал шапки вашего ресурса есть смысл расширить, так как она видна на всех страницах. В нее можно вывести кнопки обратной связи, такие как Заказать звонок, Получить консультацию, Оставить заявку и другие. О том, как сделать формы обратной связи с их размещением на странице или во всплывающем окне, можно прочитать в этой статье.
Рекомендую познакомиться с приемами настройки подвала, блога и сайдбара. Изучить способы предложения информации читателям через виджеты и ссылки.
