Шапка сайта — не просто вывеска с логотипом, а первый экран воронки продаж: именно здесь посетитель решает, звонить прямо сейчас, кликать «Заказать» или листать дальше в поисках повода уйти. Разбираем, как расположить телефон, кнопку заказа, меню и преимущества так, чтобы шапка реально работала на конверсию.
Шапка — не декорация, а часть воронки продаж
К моменту, когда посетитель долистает до формы заявки внизу страницы, часть аудитории уже уйдёт — просто потому что не увидела повода остаться на первом экране. Шапка попадает в поле зрения раньше любого другого блока, и именно она формирует первое впечатление о том, можно ли сайту доверять и легко ли будет получить то, за чем пришли. Слабая шапка — с потерянным среди ссылок номером телефона или CTA-кнопкой, которая ничем не выделяется, — теряет часть конверсии ещё до того, как посетитель добрался до сути предложения.
Что делает шапку «продающей»
- Один явный CTA, а не три конкурирующих. Если рядом висят «Купить», «Консультация» и «Обратный звонок» одинакового веса, посетитель чаще не нажимает ни одну — выбор между похожими опциями отнимает решимость.
- Контакты на виду, а не в футере. Для сайтов услуг и B2B — телефон в шапке снижает барьер для тех, кто предпочитает звонить, а не заполнять форму.
- Минимум отвлекающих ссылок. Каждый дополнительный пункт меню — это ещё один способ уйти со страницы, не дойдя до целевого действия.
- Визуальный контраст у кнопки действия. CTA должен физически выделяться цветом и формой на фоне остальной шапки — не сливаться с навигацией.
Где расположить телефон и кнопку «Заказать»
Пользователи чаще всего сканируют шапку слева направо: логотип — стартовая точка, дальше меню, а в правом углу — зона, куда естественным образом падает взгляд перед действием. Именно поэтому телефон и основной CTA почти всегда располагают справа: это не случайность дизайнеров, а результат того, как человек читает страницу. Кнопку «Заказать» стоит делать заметно крупнее и контрастнее, чем номер телефона рядом — это две разные по весу опции: звонок для тех, кто уже готов, кнопка — для тех, кому нужен ещё один толчок.
Короткая строка преимуществ под шапкой
Многие сайты услуг и интернет-магазины добавляют под основной шапкой узкую полосу с 3–4 короткими преимуществами: «Доставка бесплатно», «Гарантия 2 года», «Работаем без предоплаты». Это не декоративный элемент — такая строка снимает типичные возражения ещё до того, как посетитель успел их сформулировать, и делает первый экран более убедительным без изменения самой структуры навигации.
Частые ошибки, которые снижают конверсию
- CTA-кнопка того же цвета, что и остальная шапка, — визуально не считывается как кнопка действия.
- Телефон указан мелким текстом без ссылки tel: — на мобильном по нему нельзя нажать и сразу позвонить.
- Слишком длинное меню — 10+ пунктов вместо 5–7 отвлекают внимание от целевого действия.
- Корзина или личный кабинет спрятаны глубоко в меню вместо заметной иконки — усложняет уже принятое решение купить.
- Несколько разных CTA с одинаковым визуальным весом — распыляют внимание вместо того, чтобы вести к одному действию.
Если в шапке вашего сайта узнаётся хотя бы пара пунктов из этого списка — это обычно не повод переделывать сайт целиком: чаще всего достаточно точечной доработки шапки, чтобы вернуть фокус на целевое действие.
Частые вопросы
Можно ли использовать два CTA в шапке?
Можно, но один должен быть явно приоритетным (например, «Купить» — заполненная кнопка), а второй — второстепенным и визуально тише (например, «Задать вопрос» — контурная кнопка или ссылка).
Обязательно ли показывать номер телефона, если у компании нет колл-центра?
Если основной канал обращений — заявки с сайта, а не звонки, вместо телефона можно поставить более заметную CTA-кнопку заявки. Важно не смешивать оба варианта на равных, а выбрать приоритетный.
Влияет ли строка преимуществ под шапкой на скорость загрузки?
При аккуратной реализации — нет, это лёгкий текстовый блок. Проблему создают только тяжёлые изображения или анимации в этой полосе, без которых обычно можно обойтись.
Шапка, которая продаёт, — это не про красивый дизайн, а про то, что посетитель за пару секунд понимает: куда он попал, чем ему это полезно и что нажать, чтобы получить это быстрее.
