# Шапка сайта: что в ней должно быть

30 октября 2026 г. · 2 мин чтения · Студия AETHER · https://aether-studio.ru/blog/shapka-sajta

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

## Что это такое

Шапка, или хедер (от английского header), — верхний блок, общий для всех страниц сайта. Её пара — подвал, или футер: нижний общий блок с контактами, реквизитами и документами. Вместе с меню они и делают набор страниц сайтом: на любой странице человек понимает, где он и куда можно перейти. Подробнее об этом — в статье [«Чем веб-страница отличается от сайта»](https://aether-studio.ru/blog/veb-stranica-i-sajt).

## Что в ней должно быть

- **Логотип** — он же ссылка на главную. О версиях и размерах логотипа статья [«Логотип для сайта»](https://aether-studio.ru/blog/logotip-dlya-sajta).
- **Меню** — четыре-семь главных разделов. Всё остальное — в подвал.
- **Главная кнопка** — одно действие, ради которого сайт существует: «Обсудить проект», «Записаться», «Корзина». Как её подписать, разобрано в статье [«Кнопка призыва к действию»](https://aether-studio.ru/blog/knopka-prizyva-k-dejstviyu).
- **Контакт** — телефон или мессенджер, если клиентам привычнее позвонить.
- **По ситуации**: поиск и корзина — для магазина, город и режим работы — для местного бизнеса.

Всё сразу не нужно. Выберите то, что клиенты ищут первым делом.

## Размер и поведение

- **Компактно.** Шапка — указатель, а не баннер: обычно она занимает в высоту 60–100 пикселей на компьютере и меньше на телефоне.
- **Закреплённая шапка** остаётся сверху при прокрутке: на длинных страницах кнопка связи всегда под рукой. На телефоне её делают ниже или прячут, пока человек листает вниз, и показывают при прокрутке вверх.

## На телефоне

- Меню сворачивается в кнопку, а главная кнопка и контакт остаются на виду.
- Всё, что нажимают пальцем, — не меньше 44 пикселей в высоту.
- Шапка не должна занимать пол-экрана: на телефоне каждый сантиметр — это контент.

## Частые ошибки

- **Перегруз**: два телефона, адрес, соцсети, слоган и десять пунктов меню.
- **Логотип не ведёт на главную** — люди привыкли, что ведёт.
- **Три разные кнопки** с похожими действиями, и непонятно, какая главная.
- **Разные шапки** на разных страницах.
- **Белый логотип на белой шапке** после прокрутки — проверьте все состояния.

## Как устроено у нас

В шапке нашего сайта — логотип, кнопка «Обсудить проект» и меню. Логотип ведёт на главную, а для экранных дикторов у него есть скрытая подпись «AETHER — на главную». Шапка закреплена сверху, поэтому кнопка связи всегда под рукой.

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

**Услуга «Корпоративный сайт»:** от 7 рабочих дней, от 45 000 ₽, обычно 45 000–130 000 ₽. Подробнее: https://aether-studio.ru/services/corporate

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.