Виды баннеров: как создать баннер в Stripo Email Builder за считанные минуты

Сложно представить современную промо-рассылку без баннера. Вы видели тысячи писем — и с хорошими баннерами, и с плохими.

Как известно, баннер – это самый первый элемент, который увидят наши получатели. Следовательно, он должен быть броским, привлекательным и эмоциональным.

Возможно, вы уже знаете, какой баннер вам нужен для будущих кампаний.

Но так ли просто создать именно такой баннер, который действительно будет соответствовать всем вашим требованиям?

Как правило, нам нужно найти подходящее изображение или сделать фото, отредактировать его в Photoshop, написать текст поверх баннера, затем экспортировать это все в используемый вами конструктор шаблонов и проверить, подходит ли он к дизайну письма. Если что-то не соответствует, и вам нужно внести изменения, пусть даже минимальные — добавить запятую, уменьшить размер шрифта – вам придется вернуться в Photoshop и снова редактировать баннер, а затем заново импортировать его в свой шаблон. Конечно, иметь непосредственный доступ к Photoshop очень полезно, но все же это сложный и трудоемкий процесс, который доставляет много неудобств.

Stripo позволяет создавать сложные многослойные баннеры с нуля прямо в редакторе менее чем за 10 минут.

Если вы выберете для будущих кампаний любой из наших готовых шаблонов, то Stripo разделит баннер на слои. Вы можете редактировать и оптимизировать каждый слой отдельно, не покидая конструктор. Это сэкономит вам массу времени. Встроенный фоторедактор, возможность размещения текста поверх изображения, множество декоративных шрифтов, богатая цветовая палитра и банк с тысячами доступных изображений – все эти опции призваны значительно облегчить вашу работу.

Создавая баннер, вы должны иметь представление о том, как он должен выглядеть и что именно вам нужно.

Мы рассмотрим некоторые самые популярные типы баннеров и покажем, как можно легко реализовать ваши идеи с помощью Stripo.

Как создать баннер в Stripo

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

Перетаскивание блока баннера в письмо

Первый этап – перетащить блок баннера в ваш шаблон.

Вы можете поместить его в любом месте шаблона. Но обычно баннер находится сразу после заголовка (логотипа) вашего письма.

Загрузка изображений

Есть четыре способа добавления изображений в письмо в Stripo:

1. перетаскивание изображения непосредственно в нужное место – для этого просто переместите изображение в эту область или кликните по ней, чтобы загрузить изображения с вашего компьютера;

2. добавление внешней ссылки – добавьте линку на изображение, которая заканчивается на .jpg, .png, .gif;

3. использование картинки из нашего банка – нажмите на иконку “банк” и выберите понравившееся изображение из тысяч доступных у нас бесплатных изображений;

4. использование любой из ваших предыдущих кампаний – кликните значок “email” и выберите любое изображение, которое вы использовали ранее.

Добавление текста поверх изображений

Прямо над HTML-шаблоном, с которым вы работаете, на панели настроек есть иконка “текст”.

• кликните по ней, чтобы активировать. Поместите текстовую область в любое место на изображении баннера;

• поработайте над дизайном текста – выделите нужную часть и настройте тип шрифта, размер, цвет и т.д.;

Важно отметить:

Смело используйте любой декоративный шрифт для баннеров. Не волнуйтесь! Все они будут расценены email-клиентами получателей как элементы изображения и отобразятся именно так, как вы планировали.

Загрузка дополнительных изображений

Загрузив основное изображение, на панели настроек вам нужно включить опцию “Дополнительное изображение”. После чего смело загружайте изображение любым из вышеописанных способов.

Важно отметить:

При желании вы можете загрузить даже GIF-файлы.

Чтобы добавить на баннер любое дополнительное изображение с одинаковыми отступами как минимум с трех сторон, вам понадобится наша опция “Липкая зона”.

Примечание: вам нужно просто вставить дополнительное изображение, и система порекомендует, где поместить лого. Удерживайте кнопку Shift при перетаскивании этого изображения на баннере. Как только вы выберете место для изображения, оно будет выделено сплошной линией. Просто продолжайте удерживать Shift — функция “Липкая зона” выровняет изображение по трем сторонам. Так ваше письмо будет выглядеть аккуратнее.

Основные типы баннеров:

1. баннер с одним изображением и вашим предложением;

2. баннер с двумя изображениями;

3. баннер в рамке;

4. баннер с кнопкой CTA;

5. баннер с фотоколлажами;

6. баннер с прозрачными дополнительными изображениями;

7. GIF-анимированный баннер;

8. баннер с видео;

9. баннер с AMP-каруселью.

1. Баннер с одним изображением и вашим предложением

Это самая популярная разновидность баннера для промо-рассылок.

Он используется для объявлений о распродаже или для рекламы одного товара. Все зависит от ваших потребностей.

Под такими баннерами бренды часто добавляют таймеры обратного отсчета.

2. Баннер с двумя изображениями

Красочное изображение затрудняет правильный выбор цвета шрифта для текста поверх баннера. В такой ситуации уместно использовать дополнительное пустое изображение — этого будет вполне достаточно. В этом примере M&M’s закрыли половину баннера дополнительной картинкой и написали поверх нее свой рекламный текст.

3. Баннер в рамке

Рамки используются для разделения двух изображений внутри баннера или для акцента на призыве к действию.

Можно использовать нашу рамку или загрузить свою. Любой фоторедактор предлагает множество рамок.

Добавляя рамки, вы придаете рассылкам еще больше уникальности.

Обратите внимание, что при загрузке изображения, созданного сторонним инструментом, вы не сможете вносить в него изменения в нашем (и в любом другом) конструкторе шаблонов.

Рамки загружаются точно так же, как и дополнительные изображения.

Пожалуйста, оцените эти два баннера: первый без рамки, второй — с черной рамкой.

(баннер без рамки)

(баннер с рамкой)

Первый баннер выглядит свежо, но вы вряд ли обратите внимание на предложение, тогда как второй выглядит стильно и с акцентом на текст. Предложение на втором баннере сложно не заметить.

4. Баннер с кнопкой CTA

Сложно найти письмо от Forbes, в котором не было бы кнопки призыва к действию поверх баннера.

Но действительно ли Forbes добавляют кнопку? Нет. Они загружают изображение кнопки как дополнительное – и добавляют ссылку для всего баннера.

Никакой магии, все предельно просто! Но все равно письма от Forbes выглядят стильно.

5. Баннер с фотоколлажами

Здесь нужно немного потрудиться.

Этот баннер состоит из трех структур (строк) с тремя колонками в каждой.

Просто добавьте их в шаблон, перетащите блок “Изображение” в каждый контейнер и загрузите изображение в каждую колонку/контейнер по отдельности. Отредактируйте изображения, чтобы повернуть их, в нашем встроенном фоторедакторе.

А вместо среднего изображения во втором ряду вставьте свой текст. Готово :)

6. Баннер с прозрачными дополнительными изображениями

Дизайн любой рассылки – это полет фантазии. Вы можете использовать что угодно. И мы еще порекомендуем добавлять сезонные изображения. Это придает письму дух праздника.

В этом рождественском шаблоне мы решили использовать прозрачную снежинку.

Прозрачные изображения помогут вам внести небольшие изменения в рассылку без изменения всего дизайна.

Пожалуйста, посмотрите на эти два примера и сравните их:

(без дополнительных изображений, но с предложением поверх изображения баннера)

(с дополнительными изображениями и предложением)

Прочитать предложение в первом примере практически невозможно – текст накладывается прямо на товары, которые рекламирует компания.

Но небольшая деталь во втором, а именно прозрачный слой, облегчает чтение. А в качестве “бонуса” вы при этом видите товары.

7. GIF-анимированный баннер

GIF-анимированные баннеры – это отдельная тема, и мы уже обсуждали, почему их стоит использовать в рассылках.

GIF-анимации помогут привлечь внимание к вашему выгодному предложению и показать больше товаров на одном экране.

Важно: 

Загружайте GIF-файлы с помощью блока "Картинка". 

8. Баннер с видео

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

Видео, помещенное на первом скролле экрана, выполняет функцию баннера.

Используйте их для своих кампаний, если это необходимо. В статье “Как добавить видео в электронное письмо” мы показываем, как встраивать видео с помощью Stripo.

9. Баннер с AMP-каруселью

Этот тип баннера, по сути, представляет собой компиляцию из 3-16 баннеров, размещенных на первом экране. А необходимость нажимать кнопку прокрутки слайдов поможет лучше вовлекать целевую аудиторию и взаимодействовать с ней.

Технология AMP – новое слово в email-маркетинге. Бренды сейчас только начинают с ним знакомиться, но на всех конференциях по email-рассылкам и цифровому маркетингу в этом году активно обсуждается AMP for Emails. Это означает, что AMP очень скоро получит широкое признание.

Будьте одними из первых, кто использует его в своих рассылках, чтобы удивить получателей. Они запомнят вас, потому что AMP-письма помогут вам выгодно выделиться среди конкурентов.

Не беспокойтесь — эти элементы можно сделать с помощью Stripo буквально за считанные минуты и без каких-либо навыков программирования.

Все ваши подписчики, которые пользуются Gmail и Mail.ru (а скоро и пользователи Outlook и Yahoo), увидят эти баннеры.

Тестируйте письма

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

В завершение

Баннер – первое, что увидят клиенты. Уделите ему особое внимание, чтобы сделать кампании мощнее и эффективнее.