Что такое Hero-блок
Hero-блок (первый экран, главный блок) - верхняя часть страницы, которую пользователь видит сразу после загрузки сайта. За 3-5 секунд он решает, оставаться или уходить. От качества hero-блока зависит до 80% конверсии.
Hero-блок простыми словами
Это первое, что видит посетитель. Как обложка книги или вход в магазин. Если за несколько секунд непонятно, что предлагают и зачем оставаться - пользователь закрывает вкладку.
Что должно быть в hero-блоке
Минимум - три элемента:
- Заголовок (H1). Конкретное предложение: что вы делаете и для кого.
- Подзаголовок или дополнение. Уточнение, выгода, отличие от конкурентов.
- CTA (призыв к действию). Кнопка с конкретным действием: "Получить расчёт", "Записаться на консультацию".
Дополнительно:
- Изображение, видео или иллюстрация
- Список ключевых преимуществ (3-4 пункта)
- Социальные доказательства (количество клиентов, награды, отзывы)
- Сертификаты и логотипы партнёров
Принципы хорошего hero-блока
- Конкретика. Не "Мы делаем сайты", а "Делаем корпоративные сайты за 21 день".
- Ценность. Понятно, что получит пользователь.
- Один главный CTA. Не пять кнопок, а одна основная.
- Адаптив. Хорошо смотрится и на мобильном, и на десктопе.
- Скорость загрузки. Картинки оптимизированы, не "весит" много мегабайт.
Типичные ошибки
- Размытый заголовок "Решения для бизнеса"
- Несколько одинаково важных CTA
- Тяжёлое фоновое видео или большое изображение, замедляющее загрузку
- Текст поверх неконтрастного фона - плохо читается
- Картинки с фотобанка вместо реальных фото компании