Дизайн Структура Шаблоны How-to
~ 10 мин читать
2 комментарии
37902 просмотры
оценить
04 августа 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Banner Block_Ru_Stripo

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

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

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

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

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

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

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

Uploading-Images

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

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

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

Stripo-Adding-Text-to-the-Banner.

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

Building-Banner-with-Stripo_Applying-Banner-Font-to-Copy

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

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

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

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

Stripo_Uploading-Additional-Images

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

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

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

Sticky-Zones-Stripo-Editor

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

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

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

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

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

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

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

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

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

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

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

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

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

The-Most-Commonly-Used-Type-of-Banner

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

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

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

Banner-with-two-images

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

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

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

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

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

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

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

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

Stripo-Banner-without-Frame

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

Stripo-Banner-with-a-Frame

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

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

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

Banner-with-Image-Over-It

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

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

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

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

Collage-Banner_Brighton

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

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

3-Column-Structure

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

Stripo-Editing-Images_Ru

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

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

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

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

Banner with Snowflake Banner Image

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

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

Banner without Additional Image

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

Banner with Additional Transparent Image

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

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

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

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

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

Best-Newsletter-Design-Ideas

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

Важно: 

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

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

Video-Banners

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

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

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

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

Building-AMP-carousel-with-Stripo_Simple-Carousel

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

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

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

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

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

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

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

В завершение

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

Vishnu Goyal 1 месяц назад

Thanks Rolenko for these great ideas on image-based banners. I'd love to know your thoughts on simple text-based banners and experiment with the same in my own emails. I know banner with images is a norm but I am looking forward to create just text-based emailers [writing-focused] and I think text-only banners will help.

Анна Кузнецова прокомментировал Vishnu Goyal 1 месяц назад

Hello, Vishnu Goyal. Thank you for your question. Could you clarify what exactly you mean? Conversion, or ways to build those banners? Or are they easy/appropriate to use? Thank you... As for the way to build those banners, there are lots of tools on the web. As for their efficiency and conversion, we can't really say anything. Because, in order to provide you with accurate data on this subject, we'd need to run an A/B test a few times. But we prefer HTML and AMP HTML emails for our campaigns. So, we did not run those tests. Also, we did not find much info on this subject. But we wish you the best of luck and hope you'll find an answer to your question.

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Mothers-Day-Best-Practices-Featured-Image
2 дня назад · 10 мин читать
Email-маркетинг ко Дню матери: полное руководство

Если у вас есть сомнения по поводу того, как создать эффективную рассылку на День матери, то просто придерживайтесь универсального правила — делайте ее от всей души. Потому что суть этого праздника — настоящая искренняя любовь. А чтобы сделать инструкцию более детальной, мы подготовили для вас десять email-маркетинговых идей и советов по email-дизайну, которые вы можете использовать при создании рассылки. И да, в этой статье вы найдете несколько отличных готовых шаблонов, похожих на пример ниже. Они сократят время разработки праздничного письма:...

Дизайн Маркетинг Шаблоны
Earth Day Email Examples_Cover Image
6 дней назад · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
Будьте всегда в курсе последних новостей в области email-маркетинга!