Рекомендации по созданию шапки сайта

Раннее мы уже рассказывали о том, каким должен быть подвал сайта, про который часто забывают владельцы сайта. Нынешняя статья посвящена более заметному блоку — шапке сайта.

Шапка сайта или хедер (от анг. header — заголовок) — это элемент навигации, который находится в самом начале страницы. Это первый элемент, на который обращает внимание пользователь при переходе на сайт. Именно поэтому важно проработать его оформление.

Зачем нужна шапка сайта:

• Как уже упоминалось выше, шапка сайта — это первое, что видит пользователь. При правильном заполнении она помогает удостовериться, что пользователь зашел на нужный сайт.
• Чаще всего, когда пользователи ищут что-то в поисковых системах, то просматривают несколько сайтов, сравнивают их между собой. В этом случае хедер может помочь отстроиться от конкурентов и сориентировать по условиям работы.
• Ссылки в шапке сайта помогают клиентам быстро перемещаться на сайте, а также позволяют ознакомиться с основными разделами и возможностями сайта.
• Такие элементы, как логотип и слоган, в шапке сайта участвуют в формировании бренда и узнаваемости компании.

В целом шапка сайта помогает в формировании первого впечатления о сайте, поэтому важно продумать, какие элементы будут располагаться в данном блоке. А мы в этом поможем.

Что разместить в шапке сайта: основные элементы

Предлагаю рассмотреть элементы как для сайтов услуг, так и для интернет-магазинов, поэтому лучше корректировать список в зависимости от тематики вашего сайта.

Логотип

Элемент, который лучше располагать слева — такое расположение более привычное для пользователей и легче воспринимается. Все надписи в логотипе должны быть читабельны и разборчивы.

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

Описание направления деятельности компании

Данная информация поможет сориентировать нового пользователя, что он зашел на нужный сайт. Описание должно быть кратким и емким. Если удалось сократить его до нескольких слов, то можно сделать надпись частью логотипа:

Если же текст длинный, рекомендуем расположить его справа от логотипа:

Дополнительно в описании направления деятельности компании стоит указать УТП (уникальное торговое предложение), которое поможет выделиться среди конкурентов. Например:

Подробнее о том, как сформировать УТП, рассказали здесь.

Регионы работы и/или доставки

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

Если работаете в нескольких регионах, также укажите об этом:

Дополнительно можно настроить автоопределение города посетителя сайта. Кроме того, рекомендуем добавить соответствующий выпадающий список городов, чтобы показать, что вы работаете в разных регионах. Информацию стоит расположить рядом с логотипом:

Адрес

Если ваш бизнес предполагает встречи с клиентами в офисе или магазине, лучше указать адрес в шапке сайта.

Если у вас несколько офисов/магазинов, то стоит выводить их в виде всплывающего окна или выпадающего списка, как в примере ниже:

Форма поиска

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

Подробнее о том, как организовать поиск на сайте, читайте в данной статье.

Контактная информация

Для быстрой связи со специалистами рекомендуем разместить в правой части шапки сайта номер телефона и рядом с ним режим работы сотрудников, чтобы сориентировать клиентов (например, из других регионов).

Не рекомендуем располагать несколько номеров телефона, чтобы не путать пользователей. В таком случае в шапке лучше расположить 1-2 номера, а остальные способы связи «убрать» в подвал сайта.

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

Форма заказа обратного звонка

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

Подробнее о том, как создавать рабочие формы на сайте.

Личный кабинет

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

О том, каким должен быть личный кабинет, рассказали в данной статье.

Корзина

Для интернет-магазинов полезно будет дать в хедере ссылку на корзину. Если позволяет место, можно дополнительно отображать количество добавленных товаров и сумму заказа:

Избранное и список сравнения

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

Версия для слабовидящих

Переход на версию для слабовидящих обязателен для медицинской тематики, поэтому стоит добавить соответствующую ссылку в шапке сайта. Для удобства кнопку стоит расположить в правой части хедера:

Горизонтальное меню шапки сайта

Горизонтальное меню — важный элемент хедера, поэтому поговорим о нем отдельно, так как рекомендаций будет немало.

• Каталог товаров или услуг. Можно добавить общую ссылку или список подкатегорий, если их немного.
• Акции и спецпредложения. От плюшек мало кто отказывается.
• Портфолио и/или отзывы клиентов. Данный раздел необходим для повышения доверия к сайту и компании в целом.
• Оплата и доставка, гарантии, возврат или другие страницы об условиях работы компании.
• Блог, новости или другие информационные разделы о продукции или услугах.
• Страница о компании. Также необходима для повышения лояльности пользователей к компании.
• Страница контактов. Более подробная информация с адресами и телефонами.

Это лишь основные разделы. В зависимости от тематики сайта у вас будет свой набор популярных ссылок. Например, для фитнес-зала стоит показать ссылку на страницу с расписанием работы, а для b2b указать раздел с информацией об условиях сотрудничества.

Не стоит добавлять в меню ссылки на:

• политику обработки персональных данных (о том, для чего данный раздел нужен, рассказали здесь) или другие юридические документы;
• вакансии;
• карту сайта

Перечисленные разделы достаточно показать в подвале сайта, так как они редко нужны пользователям и будут только нагружать хедер.

Как лучше оформить горизонтальное меню в шапке сайта:

• Рекомендуем располагать в меню не более 5-7 ссылок, чтобы оно легче воспринималось. Исключение можно сделать для списка категорий каталога — тогда формируется два меню. Первое меню со вспомогательными разделами располагается над шапкой сайта, а второе меню со списком категорий — внизу:

• Не рекомендуем скрывать ссылки под кнопкой «Еще» или многоточием, так как пользователи пропускают данную информацию. Лучше объединять похожие ссылки в группы с более понятными заголовками и делать выпадающие списки.

• Не стоит выделять какой-либо раздел цветным фоном, чтобы не дезориентировать пользователей при перемещении по сайту. Обычно цветом выделяется раздел, в котором находится пользователь.

Что не стоит размещать в шапке сайта

Теперь поговорим о тех элементах, которые лучше убрать из шапки сайта.

Ссылки на соцсети

Не стоит сразу уводить пользователей с сайта, поэтому рекомендуем рассказать об аккаунтах в соцсетях ниже или оставить ссылки только в подвале сайта. Вот неплохой пример отдельного блока с постами из соцсетей для Главной страницы:

Большие изображения

Шапка сайта должна быть компактной, чтобы не мешать изучать основную часть страницы. Особенно при просмотре сайта с мобильных устройств. Ловите антипример и никогда так не делайте:

Лучше ограничиться цветным фоном и не перегружать шапку сайта графикой.

Длинные тексты

Хорошая практика указать в шапке сайта УТП или девиз компании, но перечислять все преимущества лучше в основной части страницы, чтобы также не нагружать хедер. Вот так делать не нужно:

Рекомендации по оформлению шапки сайта

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

И в целом рекомендуем не оставлять хедер пустым или, наоборот, перегружать его информацией, чтобы блок приносил пользу новым посетителям сайта. Найдите свою золотую середину. =)

Выводы

Шапка сайта — ключевой элемент для захвата внимания потенциальных клиентов, поэтому рекомендуем использовать его по максимуму. Добавляйте основную информацию о компании и ссылки на популярные разделы сайта. Новые пользователи скажут вам только спасибо.

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

Инструкция по созданию и изменению шапки сайта для пользователей конструктора «Нубекс»

Шапкой называется верхняя часть страницы сайта, на которой обычно размещают название компании, логотип и другую важную информацию (контакты, время работы, слоган и т.д.).

Изменить шапку Вашего сайта в «Нубексе» очень легко: для этого зайдите в админку, в меню управления (слева) выберите раздел «Оформление», а в нем — пункт «Шапка страницы».

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

Также Вы можете выбрать пустую шапку (без фона), если хотите сконцентрировать внимание пользователей на логотипе и текстовой информации.

Если ни один из готовых шаблонов Вам не подошел, можно создать шапку самостоятельно. Для этого найдите в списке пункт «Собственная шапка» и нажмите кнопку «Редактировать».

В первую очередь нужно загрузить на сайт изображение, которое Вы хотите использовать в качестве шапки. Для этого нажмите кнопку «Загрузить», выберите на своем компьютере нужный файл и нажмите «Открыть».

Обратите внимание: допустимые форматы файла для загрузки — jpeg, jpg, gif, png, ico; максимальный размер — 10 Мб; в высоту изображение должно иметь не меньше 90 пикселей.  Верхней границы для высоты шапки нет, но не стоит грузить слишком большие изображения. Иначе шапка займет большую часть экрана, не оставив места для информации самих страниц. Как правило, высоты в 250-300 пикселей достаточно для размещения логотипа, слогана, адреса и контактных данных.

После загрузки изображения настройте выравнивание шапки: по центру, слева или справа. Особенно это важно, когда ширина загруженного изображения сильно превышает ширину колонки (940 пикселей). В этом случае от выравнивания будет зависеть, какие части картинки отобразятся в шапке, а какие — нет.

Если ширина изображения, наоборот, меньше ширины колонки, особое внимание следует обратить на галочку «Показывать шапку с повторениями». На скриншоте ниже показано, как активность этой галочки влияет на отображение шапки на сайте.

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

• Как создать сайт самостоятельно
• Работа со страницами
• Наполнение страниц
• Работа с изображениями и файлами
• Фотогалереи
• Новости
• Каталог товаров
• Интернет-магазин
• Формы обратной связи
• Виджеты
• Функции продвижения
• Доступ в систему управления
• Внешние сервисы
• Дизайн

Вставить верхний или нижний колонтитул

Разметка страниц

• Изменить поля
  Статья
• Создавайте колонки новостей
  Статья
• Изменить ориентацию страницы на альбомную или портретную
  Статья
• Добавить границу на страницу
  Статья
• Вставьте верхний или нижний колонтитул
  Статья
• Вставьте номера страниц
  Статья
• Вставить разрыв страницы
  Статья
• Вставить оглавление
  Статья

Следующий: Вставка таблиц, изображений и водяных знаков

Word для Microsoft 365 Word для Microsoft 365 для Mac Word для Интернета Word 2021 Word 2021 для Mac Word 2019Word 2019 для Mac Word 2016 Word 2016 для Mac Word 2013 Word 2010 Word 2007 Word для Mac 2011 Word Starter 2010 Дополнительно. ..Меньше

1. Перейти к Вставить > Верхний колонтитул или Нижний колонтитул .

2. Выберите стиль заголовка, который хотите использовать.

   Совет:  Некоторые встроенные верхние и нижние колонтитулы включают номера страниц.

3. Добавить или изменить текст для верхнего или нижнего колонтитула. Дополнительные сведения о том, что можно делать с верхними колонтитулами, см. в разделе Изменение существующих верхних и нижних колонтитулов. Чтобы отредактировать уже созданный верхний или нижний колонтитул, дважды щелкните его.

4. Чтобы удалить заголовок — например, удалить его на титульном листе — выберите его, а затем проверьте Другая первая страница 9Коробка 0038.

5. Выберите Закрыть верхний и нижний колонтитулы или нажмите Esc для выхода.

Чтобы удалить, выберите Вставить > Верхний колонтитул (или Нижний колонтитул ) > Удалить верхний колонтитул (или Удалить нижний колонтитул ).

Добавить стандартный или настраиваемый верхний или нижний колонтитул

1. org/ListItem»>

   Перейти к Вставить > Верхний колонтитул или Нижний колонтитул .

2. Выберите из списка стандартных верхних или нижних колонтитулов, перейдите к списку вариантов  Верхний или Нижний колонтитул и выберите нужный верхний или нижний колонтитул.

   Или создайте свой собственный верхний или нижний колонтитул, выбрав Редактировать верхний колонтитул или Редактировать нижний колонтитул .

3. Когда вы закончите, выберите Закрыть верхний и нижний колонтитулы или нажмите Esc.

Важно: Office для Mac 2011 больше не поддерживается . Перейдите на Microsoft 365, чтобы работать где угодно с любого устройства и продолжать получать поддержку.

Обновить сейчас

1. На вкладке Макет в разделе Вид щелкните Макет страницы .
   

2. На вкладке Макет в разделе Параметры страницы щелкните Верхний и нижний колонтитулы .
   

3. Выберите из списка стандартные верхние или нижние колонтитулы, перейдя на Верхний колонтитул или Нижний колонтитул всплывающее меню и щелкните нужный верхний или нижний колонтитул.

   Или создайте свой собственный верхний или нижний колонтитул, нажав Настроить верхний колонтитул или Настроить нижний колонтитул и следуя инструкциям.

Примечание. При настройке верхнего или нижнего колонтитула вы можете добавить изображения, номера страниц, дату, время, имя листа, имя файла и путь к нему и многое другое.

1. Перейти к Вставить > Верхний и нижний колонтитулы .
   

2. Добавить текст верхнего или нижнего колонтитула.

3. Используйте меню Параметры для дополнительной настройки.
   

4. Чтобы выйти, выберите Закрыть верхний и нижний колонтитулы или нажмите Esc .

5. Чтобы удалить, выберите Вставить > Верхний колонтитул (или Нижний колонтитул ) > Удалить верхний колонтитул (или Удалить нижний колонтитул ).

Дополнительные сведения о верхних и нижних колонтитулах см. в разделе Верхние и нижние колонтитулы в Word.

Как создать заголовок?

Заголовки появляются в верхней части большинства веб-страниц. Как правило, на сайтах используется один стандартный заголовок для каждой страницы сайта, хотя некоторые страницы сайта могут не иметь заголовка или нуждаться в специальном заголовке.

В разделе Заголовок  Часть сайта конструктора тем перечислены все созданные вами заголовки, если таковые имеются, что дает быстрый доступ к добавлению, редактированию или удалению любого заголовка.