Баннер для сайта: размеры, текст и примеры, которые кликают

Какие бывают баннеры на сайте

Если вы искали «рекламный баннер» для показа на других сайтах, это отдельный формат со своими требованиями площадок. Мы разобрали его в статье нейросеть для баннеров: там размеры для Рекламной сети Яндекса и VK Рекламы, модерация и маркировка. Здесь — про баннеры на вашем собственном сайте.

Главный баннер: что должно быть на первом экране

Главный баннер — самая дорогая площадь сайта. Его видят все, кто зашёл, и по нему решают, остаться или уйти. На первом экране должно быть пять элементов:

1. Заголовок-оффер. Что вы делаете и для кого, с конкретикой: «Ремонт ванной под ключ за 14 дней».
2. Подзаголовок. Почему вам верить: цена «от», гарантия, срок, район работы.
3. Кнопка. Одно главное действие: «Рассчитать стоимость», «Записаться», «Получить каталог».
4. Изображение. Ваш продукт, результат работы или люди. Не абстракция.
5. Доверие. Рейтинг на Картах, число клиентов, логотипы партнёров — одной строкой.

Как написать оффер для первого экрана и проверить его по данным Метрики, подробно разобрали в статье первый экран сайта. Здесь сосредоточимся на баннере как на картинке: размеры, текст поверх изображения и мобильная версия.

Размеры баннера для сайта: компьютер и телефон

Единого стандарта нет: размер зависит от вёрстки сайта и платформы. Вот ориентиры, которыми пользуемся мы.

Почему для телефона нужна отдельная картинка: горизонтальное фото 1920 × 1080 на экране смартфона либо превращается в узкую полоску, либо обрезается по краям. Если важный объект стоит у края кадра — например, человек справа, — на телефоне его не будет видно.

Ещё три технических правила:

• Вес. Главная картинка — до 200–300 КБ в формате WebP или JPEG с хорошим сжатием. Тяжёлый баннер — частая причина медленного первого экрана, подробнее в статье скорость загрузки сайта.
• Безопасная зона. Главный объект держите в центральной части кадра: края обрезаются на разных экранах по-разному.
• Место под текст. Оставьте на фото спокойную область — небо, стену, размытый фон, — где текст будет читаться.

Текст на баннере: как написать, чтобы кликали

Баннер читают за секунды. Поэтому в тексте одна мысль и никакой воды.

Формула текста

Заголовок: что получит клиент + конкретика (срок, цена, результат). Подзаголовок: снятие главного сомнения или условие. Кнопка: глагол + что получит.

Примеры по нишам:

Цифры в примерах условные: подставьте свои.

Кнопка

• Глагол и результат: «Рассчитать стоимость», «Получить подборку», «Записаться на пятницу».
• Одна главная кнопка на баннере. Вторая, если нужна, — менее заметная, например «Смотреть работы».
• Контрастный цвет, который больше нигде на экране не повторяется.

Почему текст лучше делать вёрсткой

Частая ошибка: дизайнер рисует баннер целиком в графическом редакторе — с текстом и кнопкой — и загружает как одну картинку. Что получается:

• на телефоне текст уменьшается вместе с картинкой и становится нечитаемым;
• поисковики не видят заголовок: для них это просто изображение;
• чтобы поменять цену или дату акции, нужен дизайнер;
• «кнопка» на картинке не нажимается, или нажимается вся картинка.

Правильно: картинка — фоном, текст и кнопка — элементами сайта поверх неё. Все конструкторы и CMS это умеют.

Если не уверены, что написать на главном баннере, проще всего увидеть свой первый экран уже собранным: с оффером, фото и кнопкой.

Слайдер или один баннер

Слайдер — несколько баннеров, которые сменяют друг друга. Владельцы бизнеса любят его, потому что на первом экране помещается всё: и акция, и новинка, и «о компании».

Проблема в том, что дальше первого слайда смотрят немногие, а автоматическая смена мешает дочитать текст. Исследователи юзабилити из Nielsen Norman Group давно пишут о вреде автопрокрутки: люди не успевают прочитать и теряют контроль над страницей.

Что делать вместо:

• Один главный баннер с основным предложением.
• Акции — отдельным блоком ниже или полосой над шапкой.
• Если слайдер всё-таки нужен — без автопрокрутки или с медленной сменой, со стрелками и точками, все слайды в одной пропорции.

Как настроить слайдер на Тильде и где он уместен, — в статье слайдер в Тильде.

Всплывающий баннер: когда он работает

Всплывающий баннер (попап) — окно поверх страницы. Работает, когда предложение ценное и показано вовремя:

• при попытке уйти со страницы — подборка, скидка на первый заказ, расчёт стоимости;
• после прокрутки 50–70% страницы — человек уже заинтересован;
• по клику на кнопку — форма заявки в окне.

Не работает, когда появляется в первую секунду и закрывает оффер. Яндекс в блоге для вебмастеров писал, что страницы с рекламой, которая мешает доступу к основному содержимому или открывает нежелательные окна, ранжируются ниже. Подробно о триггерах, текстах и проверке эффекта в Метрике — в статье попап на Тильде. Логика там применима к любой платформе.

Как сделать баннер для сайта самому

В онлайн-редакторе

Онлайн-редакторы с шаблонами позволяют собрать баннер без дизайнера. Порядок:

1. Задайте размер холста под место на сайте: например, 1920 × 900 для компьютера и 1080 × 1350 для телефона.
2. Выберите фото продукта или работы. Своё фото лучше стокового.
3. Если текст будет вёрсткой на сайте, сохраните только фон без текста.
4. Если текст всё же в картинке (например, для карточки акции), крупный шрифт, не больше двух строк, контраст с фоном.
5. Экспортируйте в WebP или JPEG и проверьте вес.

В нейросети

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

Важно: если на баннере ваш товар, показывайте реальный товар, а не сгенерированную похожую версию. Покупатель, который получил не то, что видел на картинке, пишет отзыв.

Условный пример: главный баннер до и после

Пример условный, не кейс студии. Компания по установке натяжных потолков в Казани. Трафик с рекламы — 2 500 визитов в месяц.

Было: слайдер из четырёх баннеров с автопрокруткой каждые 3 секунды. Первый слайд — фото интерьера и надпись «Натяжные потолки любой сложности», впечатанная в картинку. На телефоне текст мелкий, кнопки нет. Конверсия в заявку — 1,6%, это 40 заявок.

Стало: один баннер. Заголовок вёрсткой: «Натяжной потолок в комнату 18 м² от 9 900 ₽ под ключ за 1 день». Подзаголовок: «Замер бесплатно, гарантия 10 лет по договору». Кнопка «Рассчитать мой потолок». Справа — фото реального объекта, на телефоне — вертикальная версия того же кадра.

Допустим, конверсия выросла до 2,8% — это 70 заявок при том же бюджете. При конверсии заявки в договор 30% и среднем чеке 25 000 ₽ разница — около 225 000 ₽ выручки в месяц. Цифры условные, но порядок эффекта от понятного первого экрана мы видим постоянно.

Чек-лист баннера для сайта

1. Одна мысль: что вы предлагаете и почему сейчас.
2. Заголовок до 8–10 слов с конкретикой: цена, срок, результат.
3. Одна главная кнопка с глаголом.
4. Текст и кнопка — элементами сайта, а не частью картинки.
5. Отдельная картинка для телефона, главный объект в безопасной зоне.
6. Вес изображения до 200–300 КБ, формат WebP или JPEG.
7. Реальное фото продукта или работы.
8. Акции с датой окончания, просроченные баннеры удалены.
9. Нет автопрокрутки слайдера или она медленная.
10. Всплывающий баннер не появляется в первые секунды.

Если по чек-листу всё в порядке, а заявок с первого экрана мало, проблема может быть в оффере или в трафике. Мы посмотрим сайт и рекламу вместе и скажем, где теряются люди.