Баннеры
01 – 09
01
▶
Full-screen hero
Главный баннер во весь экран. Заголовок, подзаголовок, CTA. Фото или видео фон.
Фон
цвет / фото / видео / градиент
Ширина
100% экрана / контейнер
Высота
100vh / 80vh / px / auto
Горизонт. позиция
лево / центр / право
Вертикаль. позиция
верх / центр / низ
Overlay
цвет + прозрачность
CTA кнопка
текст / ссылка / стиль
Доп. CTA
вторая кнопка outline
магазинресторануслугивизиткадоставка
02
▶
Split banner (50/50)
Баннер пополам: текст + медиа. Хорошо для визуального storytelling.
Ширина
100% экрана / контейнер
Соотношение
50/50 · 40/60 · 60/40
Порядок
текст лево / текст право
Фон текста
цвет / паттерн
Медиа
фото / видео / иллюстрация
Мобайл
стэк вертикально
CTA
кнопка / ссылка / форма
продуктыaboutуслуги
03
▶
Minimal text banner
Лёгкий баннер без тяжёлого визуала. Заголовок + подзаголовок + CTA.
Фон
белый / светлый / брендовый
Ширина
100% экрана / контейнер
Разделитель
верх / низ / нет
Иконка/лого
опционально слева
CTA позиция
право / под текстом
внутренние страницыакцииновости
04
▶
Image overlay banner
Текст поверх фото с overlay. Когда фото — главное.
Ширина
100% экрана / контейнер
Overlay
цвет + opacity 0–100%
Позиция текста
9 вариантов (3×3)
Бейдж
текст / иконка / позиция
Parallax
вкл / выкл
Мобайл фото
отдельное / обрезка
ресторанотельfashionсобытия
05
▶
Slider / Carousel
Несколько слайдов с автопрокруткой. Для промо-акций и главных страниц.
Ширина
100% экрана / контейнер
Кол-во слайдов
2–10
Автоплей
вкл / задержка сек
Навигация
стрелки / точки / оба
Переход
slide / fade / zoom
На слайд
фон + заголовок + CTA
Горизонт. позиция
лево / центр / право
Вертикаль. позиция
верх / центр / низ
Пауза hover
вкл / выкл
магазинпромопортфолио
06
▶
Video background
Видео как фон баннера. Максимальный wow-эффект при первом заходе.
Ширина
100% экрана / контейнер
Источник
upload / YouTube / Vimeo
Постер
фото пока грузится
Autoplay
вкл muted / выкл
Overlay
цвет + opacity
Горизонт. позиция
лево / центр / право
Вертикаль. позиция
верх / центр / низ
Мобайл
видео / постер / скрыть
агентствабрендыивенты
07
▶
Announcement bar
Топ-строка над хедером: акции, доставка, уведомления. Статичная или бегущая.
Фон
цвет / брендовый
Ширина контента
100% экрана / контейнер
Текст
HTML / Rich text
Ticker
статичный / бегущая строка
Таймер
countdown опционально
Закрытие
крестик / навсегда
Ссылка
опциональная
магазинресторанакции
08
▶
CTA section banner
Финальный призыв к действию. Конец страницы или раздел контакта.
Фон
цвет / градиент / фото
Ширина
100% экрана / контейнер
Layout
горизонт / центр / с иконкой
Кнопок
1 или 2 (primary + outline)
Email форма
inline вместо кнопки
все типы сайтов
09
▶
Centered hero (без фото)
Типографический герой без медиа. Чистый акцент на тексте и CTA.
Фон
цвет / паттерн / без
Бейдж
пилюля над H1
Размер H1
S / M / L / XL
Кнопок
1 / 2 primary + ghost
Вертикаль. позиция
верх / центр / низ
Соц. доказательство
аватары + текст под CTA
Отступы
padding top / bottom
SaaSагентствасервисы
Структура страницы
10 – 11
10
▶
Header / навигация
Шапка сайта. Логотип, меню, контакты, CTA. Основной ориентир пользователя.
Лого
изображение / текст / svg
Ширина контента
контейнер / 100% экрана
Меню
ссылки / дропдаун / мегаменю
Sticky
фиксированный при скролле
Transparent
прозрачный поверх баннера
CTA кнопка
текст + ссылка в шапке
Мобайл
бургер / боковое меню
Корзина / тел.
иконки справа
Язык / валюта
переключатель
магазинресторануслугивизиткадоставка
11
▶
Footer
Подвал. Контакты, меню, соцсети, копирайт. Часто последнее что видит пользователь.
Колонки
1–4 колонки ссылок
Ширина контента
контейнер / 100% экрана
Лого + описание
колонка с брендингом
Контакты
адрес / телефон / email
Соцсети
иконки + ссылки
Форма подписки
email инпут
Фон
тёмный / светлый / брендовый
Копирайт
строка с годом
Карта
встроенная Google Maps
магазинресторануслугивизитка
Контент-блоки
12 – 1812
▶
Text + media
Универсальный блок: заголовок, текст, фото/видео рядом. Основа любого лендинга.
Ширина
100% экрана / контейнер
Layout
текст лево / право / верх / низ
Соотношение
50/50 · 40/60 · 60/40
Медиа
фото / видео / иллюстрация
Текст
rich text H2/H3/p/bold/ul
CTA
кнопка / ссылка
Фон секции
цвет / прозрачный
все типы сайтов
13
▶
Features / иконки с текстом
Сетка 3–6 блоков: иконка + заголовок + текст. Преимущества, услуги, шаги.
Ширина
100% экрана / контейнер
Колонок
2 / 3 / 4 / auto
Иконка
SVG / emoji / фото / число
Стиль карточки
с рамкой / без / с фоном
Иконка позиция
верх / лево
Кол-во
1–12 элементов
услугивизиткамагазиндоставка
14
▶
Testimonials / отзывы
Социальное доказательство. Текст, имя, фото, рейтинг. Критично для услуг и ресторанов.
Ширина
100% экрана / контейнер
Layout
сетка / слайдер / одиночный
Аватар
фото / инициалы
Рейтинг
звёзды 1–5
Источник
Google / Yelp / вручную
Кол-во
1–12 карточек
Автослайд
вкл / выкл + скорость
ресторануслугивизиткамагазин
15
▶
FAQ / аккордеон
Частые вопросы с раскрывающимися ответами. SEO-friendly, снижает нагрузку на поддержку.
Ширина
100% экрана / контейнер
Layout
1 колонка / 2 колонки
Стиль
линии / карточки / bordered
Открытие
один / несколько сразу
Иконка
плюс / стрелка / кастом
Текст ответа
rich text
Кол-во
неограниченно
услугимагазиндоставка
16
▶
Logos / trust-bar
Лого клиентов, партнёров, СМИ. Доверие с первых секунд.
Ширина
100% экрана / контейнер
Layout
ряд / бегущая строка
Лого
до 20 изображений
Цвет
оригинал / grayscale
Скорость
ticker speed
услугиагентствомагазин
17
▶
Team / команда
Карточки сотрудников: фото, имя, должность, соцсети.
Ширина
100% экрана / контейнер
Колонок
2 / 3 / 4
Фото
квадрат / круг / полный рост
Соцсети
LinkedIn / Instagram / иконки
Hover
overlay с bio
услугивизиткаресторан
18
▶
Stats / цифры и факты
Большие цифры: '500+ клиентов', '12 лет на рынке'. Быстрое визуальное доверие.
Ширина
100% экрана / контейнер
Кол-во
2–6 блоков
Анимация
count-up при скролле
Иконка
опционально
Фон
цвет / прозрачный
услугимагазиндоставка
Каталог и меню
19 – 2119
▶
Product / dish card
Карточка товара или блюда: фото, цена, кнопка. Основной блок каталога.
Фото
1 или галерея (swipe)
Бейдж
new / sale / хит / веган
Цена
обычная / старая / скидка %
CTA
в корзину / заказать / подробнее
Варианты
размер / цвет / топпинги
Колонок
2 / 3 / 4 в сетке
Рейтинг
звёзды + кол-во отзывов
Быстрый просмотр
модал по hover
магазинресторандоставка
20
▶
Category tabs / фильтр
Горизонтальные табы над каталогом: категории, сортировка, теги.
Тип
табы / пилюли / дропдаун
Sticky
фиксируется при скролле
Сортировка
цена / новинки / рейтинг
Мультифильтр
несколько тегов сразу
Иконки
иконка + текст категории
Счётчик
кол-во товаров в категории
магазинресторандоставка
21
▶
Pricing / тарифы
Карточки тарифов с ценой и списком включённого. Агентства, мастера, SaaS.
Ширина
100% экрана / контейнер
Карточек
2–4
Выделение
popular / recommended бейдж
Переключатель
месяц / год (–20%)
Список фич
✓ / ✗ включено / нет
CTA
кнопка в каждой карточке
Цена формат
от / фикс / по запросу
услугивизиткаагентство
Контакт и конверсия
22 – 2422
▶
Contact form
Форма обратной связи. Имя, email, телефон, сообщение. Главная точка конверсии.
Ширина
100% экрана / контейнер
Поля
имя / email / тел / текст / файл
Обязательные
выбор per-field
Отправка
email / webhook / CRM
Успех
сообщение / редирект
Layout
1 колонка / 2 колонки
Рядом
карта / контакты / фото
все типы сайтов
23
▶
Booking / бронирование
Резервация стола или запись на услугу: дата, время, количество человек.
Дата
date picker
Время
список слотов / time picker
Гости / услуга
dropdown
Интеграция
Calendly / OpenTable / кастом
Подтверждение
email / SMS
Комментарий
доп. поле
ресторанбарбершопмастерсалон
24
▶
Map + contacts
Google Maps + адрес, часы работы, телефон. Обязателен для физических точек.
Карта
Google Maps embed
Layout
full / карта + инфо рядом
Часы работы
таблица дней
Мессенджеры
WhatsApp / Telegram кнопки
Высота
px / vh
Несколько точек
несколько маркеров
ресторанмагазинуслугидоставка
Медиа и галереи
25 – 2625
▶
Gallery / фотогалерея
Сетка фотографий. Интерьер, блюда, работы. Lightbox по клику.
Ширина
100% экрана / контейнер
Layout
сетка / masonry / слайдер
Колонок
2 / 3 / 4
Lightbox
открытие по клику
Категории
фильтр по тегам
Кол-во
неограниченно
Load more
кнопка / infinite scroll
ресторануслугивизиткамагазин
26
▶
Video embed
Встроенное видео с YouTube, Vimeo или загруженный файл. Промо и обучение.
Источник
YouTube / Vimeo / upload
Layout
full-width / по центру / с текстом
Постер
превью до клика
Autoplay
вкл muted / выкл
услугиресторанмагазин
Специальные
27 – 3027
▶
Delivery zones
Зоны доставки с ценами и сроками. Ключевой блок для food-delivery.
Ширина
100% экрана / контейнер
Карта зон
цветные зоны на карте
Таблица
зона / цена / время
Мин. заказ
per зона
Бесплатно от
порог суммы
доставка едымагазин
28
▶
Allergens / КБЖУ
Ингредиенты, аллергены, калорийность. Обязательно для EU / немецкого рынка.
Аллергены
иконки 14 EU аллергенов
КБЖУ
ккал / белки / жиры / углеводы
Теги
веган / безглютен / острое
Вес / порция
граммы / мл
ресторандоставка
29
▶
Steps / процесс работы
Нумерованные шаги: как работаем, как заказать. Снимает страх перед покупкой.
Ширина
100% экрана / контейнер
Кол-во шагов
3–7
Layout
горизонт / вертикаль / зигзаг
Коннектор
линия / стрелка / нет
Иконка
номер / SVG / emoji
услугимагазиндоставка
30
▶
Popup / модальное окно
Всплывающее окно: акция, подписка, cookie. Настройки триггеров критичны.
Триггер
таймер / скролл % / exit-intent
Тип
акция / email / cookie / 18+
Частота
1 раз / раз в N дней
Закрытие
крестик / ESC / фон
Контент
текст / форма / изображение
CTA
кнопка + ссылка
магазинресторануслуги