Как называются блоки сайта: hero, header, CTA и другие термины

Когда заказчик пишет «поменяйте вот ту штуку наверху, где картинка и кнопка», дизайнер и разработчик сначала уточняют, о чём речь, — и только потом делают. Когда пишут «в hero замените фото и поменяйте текст CTA», правку можно выполнять сразу. Названия блоков — это не жаргон ради жаргона, а способ сократить переписку и не потерять смысл правок.

Ниже — экскурсия по типичной продающей странице (лендингу, landing page) сверху вниз. Для каждого блока: как его называют в команде, зачем он нужен и где чаще всего ошибаются. В конце — элементы интерфейса, которые «всплывают» поверх страницы.

Header (шапка) — верхняя полоса с логотипом, меню и обычно одной кнопкой: «Связаться», «Записаться». Если шапка остаётся на месте при прокрутке, её называют sticky header (липкая шапка). Под шапкой начинается hero — главный экран: крупный заголовок, короткий подзаголовок, изображение или видео и главная кнопка. Всё, что пользователь видит без прокрутки, называют первым экраном, или above the fold — выражение пришло из газет, где важное печатали над сгибом полосы.

CTA (call to action, призыв к действию) — это кнопка или ссылка, которая просит сделать конкретный шаг: оставить заявку, позвонить, купить. На странице их обычно несколько, но главный CTA один, и он повторяется в нескольких местах.

• Заголовок hero говорит о компании («Мы — лидер рынка»), а не о пользе для клиента
• На первом экране три кнопки равного веса — посетитель не понимает, какая главная
• Тяжёлое фоновое видео в hero, из-за которого первый экран долго грузится на телефоне
• Меню в шапке на десять пунктов, хотя страница одна и пунктов хватило бы четырёх
• Липкая шапка занимает треть экрана телефона и закрывает содержимое

После первого экрана посетитель решает, верить ли вам. Здесь работают блоки, которые отвечают на вопросы «почему вы?» и «что будет дальше?». В команде их называют так:

Pricing table (таблица тарифов) показывает варианты и их отличия. FAQ — блок частых вопросов; чаще всего его делают аккордеоном (accordion): вопросы видны списком, ответ раскрывается по нажатию. Перед подвалом ставят финальный CTA — ещё одно приглашение к действию для тех, кто дочитал до конца. Footer (подвал) — нижняя часть с контактами, адресом, ссылками на документы и соцсети.

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

• В FAQ отвечают на вопросы, которые никто не задаёт, вместо реальных возражений: «а если не подойдёт?», «сколько ждать?»
• Тарифы отличаются десятком мелких галочек, и разницу между ними не видно
• После последнего блока нет кнопки — посетитель дочитал и не знает, что делать
• В подвале нет телефона и адреса, хотя для местного бизнеса это главное

Кроме блоков страницы есть элементы, которые появляются по действию пользователя. Modal (модальное окно) — окно поверх страницы, которое блокирует всё остальное, пока его не закроют. Drawer (выдвижная панель) — панель, выезжающая сбоку или снизу, например корзина или фильтры. Toast (тост) — короткое уведомление в углу экрана, которое исчезает само: «Заявка отправлена». Tooltip (подсказка) — маленький текст при наведении или нажатии на значок. Tabs (вкладки) переключают содержимое внутри одного блока, а burger menu (бургер-меню) — значок из трёх полосок, за которым на телефоне прячется навигация.

Названия пригодятся не только при правках готового сайта. На старте проекта по ним удобно описать будущую страницу списком: «шапка, hero с формой, отзывы, шаги, FAQ, подвал» — такой список уже похож на структуру, по которой дизайнер собирает прототип. А на приёмке работ по тем же названиям проще проверить, что ничего не потерялось.