Misea
Pro

Блок Hero — баннер первого экрана

Заголовок, подзаголовок, фон-картинка, CTA-кнопка. Как сделать сильный первый экран, куда вести кнопку.

Блок Hero — баннер первого экрана

Hero — это первый блок, который видит гость. Должен за 3 секунды ответить: «что это за заведение» и «что здесь можно сделать». Если hero слабый, пользователь закроет вкладку.

Что настраивается

  • Заголовок — 3–7 слов. Самое важное.
  • Подзаголовок — уточнение: кухня, часы, ключевое преимущество.
  • CTA-кнопка — одна главная. «Открыть меню», «Забронировать», «Заказать с доставкой».
  • Вторичная кнопка (опционально) — ссылка на меньшее действие.
  • Фон — одноцветный, градиент, картинка или анимация.
  • Выравнивание — по центру / слева / справа.
  • Высота — 50 / 70 / 100 vh.

Куда ведёт кнопка

В редакторе справа → поле Ссылка. Варианты:

  • Страница сайта — выбираете из списка ваших страниц (например, «Меню», «Контакты»).
  • Якорь на текущей странице — #menu, #about.
  • Каталог блюд — переход на дефолтный вид меню.
  • Внешний URL — пишете полный https://....
  • Корзина — если акция рассчитана на быстрый заказ.

Обычно самый эффективный вариант — «Открыть меню» (?page=menu). Гость сразу попадает куда нужно.

Фон

Четыре варианта:

  1. Сплошной цвет — тихий, элегантный. Бренд-цвет из палитры.
  2. Градиент — двухцветный. Бренд + акцент.
  3. Картинка — из медиа-библиотеки. Лучше 16:9, минимум 1920×1080 px, JPG < 500 KB.
  4. Анимированный фон (Pro) — 60+ вариантов, см. Анимированные фоны.

Поверх фона обычно кладётся затемнение (overlay 20–60 %) — текст становится читаемым.

Рекомендации по тексту

Хорошо:

  • «Кофе и тосты на Кузнецком»
  • «Мы доставляем горячую пиццу за 30 минут»
  • «Лавка с итальянскими сырами с 2018 года»

Плохо:

  • «Добро пожаловать в наше заведение!» — банально, ни о чём.
  • «У нас вкусно, приходите» — слабое обещание.
  • «ЛУЧШИЙ РЕСТОРАН В ГОРОДЕ!!!» — агрессивно, отпугивает.

Подзаголовок — одно предложение, усиливающее заголовок. Пример:

Заголовок: «Пельменная на Покровке» Подзаголовок: «12 сортов пельменей, лепим сами, варим на заказ. Открыто с 11:00.»

Картинка в hero

Что работает:

  • Крупный план блюда (пельмени, бургер, кофе).
  • Интерьер заведения.
  • Атмосферный кадр (барная стойка вечером, витрина утром).

Что не работает:

  • Стоковые фотографии еды из интернета — гость их узнаёт.
  • Групповые портреты персонала — в hero не место, вынесите в отдельный блок.
  • Ширина меньше 1200 px — будет пикселить на ноутбуке.

Вариант без hero

Иногда hero не нужен: если сайт — это просто меню-лендинг с быстрым заказом, можно сразу начинать с блока «Каталог» без обложки. Экономит скролл гостю.

Для этого удалите Hero → сохраните → опубликуйте.

Следующие шаги