Генератор секции hero (верх страницы)

Генератор секции hero (верх страницы): для чего нужен

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

Генератор создаёт hero с фоновым изображением и настраиваемым тёмным слоем для читаемости текста или с текстом и изображением рядом, заголовком плавного размера, основной и второстепенной кнопками. Изображение добавляется как img с fetchpriority=high и без отложенной загрузки, потому что обычно это самый крупный элемент первого экрана (LCP).

Как пользоваться

1. Напишите заголовок, подзаголовок и кнопки.
2. Выберите изображение, макет и цвета.
3. Скопируйте код и вставьте в верх страницы.

Когда использовать

• Главная страница местного бизнеса.
• Посадочная страница кампании.
• Страница запуска.

Частые вопросы

Что поместить в hero?

Результат, который нужен клиенту, в одной фразе (заголовок), как вы его обеспечиваете (подзаголовок) и одно главное действие, например «Узнать цену в мессенджере». Вторая неброская кнопка необязательна. Всё должно помещаться на первом экране без прокрутки.

Как изображение не замедляет сайт?

Изображение hero обычно — самый крупный элемент первого экрана, что Google измеряет как LCP. В коде используется тег img (не background-image) с fetchpriority=high и без loading=lazy, чтобы браузер загружал его первым. Используйте изображение в WebP и нужного размера.

А текст поверх фото?

Тёмный слой (оверлей) поверх изображения обеспечивает контраст белого текста на любом фото. Настройте прозрачность, пока текст не станет легко читаться; обычно достаточно 45–60%.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты