Работа с блоком "Баннер"

Как создать баннер для рассылки, когда под рукой нет Photoshop, а в команде - дизайнера? Легко! Вы можете создать баннер прямо в письме, не используя сторонние графические редакторы. Давайте разберем на примере email рассылки для туристической компании, как это сделать

Работа с блоком "Баннер"

Создание баннера для емейл-рассылки

Для начала нам нужно создать структуру и выбрать блок ”Баннер” на вкладке “Контент”:

Блок "Баннер" в адаптивном редакторе

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

Подготовьте фон

Основа любого баннера - картинка. Для нашего примера подберем заманчивое изображение моря. Вы можете использовать встроенный фотобанк и искать картинку по ключевому слову:

Выбор картинки для баннера

А можете подобрать подходящее изображение в сети и загрузить его по ссылке на картинку или просто перетянув его в указанное место:

Добавление картинки из внешних источников

Будьте внимательны - допускается изображение размером не больше 2 Мб, для быстрой загрузки в письме и корректного отображения на всех устройствах.

Пример баннера

После загрузки изображения есть возможность показать его частично или полностью, с помощью форм-фактора:

Показать баннер частично или полностью

Эта функция определяет внешний вид будущего баннера, который может быть вертикальным, квадратным и горизонтальным:

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

К изображению можно применить любой из фильтров на выбор:

Фильтры для баннера

Обязательно прописывайте ссылку на сайт или акцию, которую рекламирует баннер в email-рассылке, чтобы сделать его кликабельным. Также внесите альтернативный-текст в соответствующее поле - он отобразится, если картинка не покажется в письме.

Ссылка и альт-текст для баннера

На баннер можно поставить одно дополнительное изображение, например ваше лого:

Дополнительное изображение

Изображение можно разместить в любой части баннера в произвольном порядке или придерживаясь симметрии. Зажав Shift на клавиатуре, изображение можно перемещать по обозначенным сеткам:

Перемещение дополнительного изображения

Не забудьте включить соблюдение пропорций, если будете масштабировать второе изображение:

Соотношение сторон

Вы можете разместить второе изображение в любой части баннера:

Второе изображение для баннера

Содержимое баннера

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

Пример баннера с текстом

Если нужно создать баннер, как в примере - будьте готовы к тому, что придётся его порезать на части, чтобы отдельно были активными соответствующие ссылки "Парни" и "Девушки". Но давайте, рассмотрим более простые примеры, когда в картинку зашита всего одна ссылка на общую категорию.

В редакторе eSputnik есть возможность добавлять текст прямо на изображение:

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

Текстовый контейнер можно перемещать по всей площади баннера:

Перемещение текстового контейнера

Подберите шрифт

Вы можете использовать 1-2 шрифта на одном баннере, чтобы сделать акцент и подчеркнуть выгоду вашего предложения. В системе шрифты разделены на несколько групп:

  • стандартные   
  • нестандартные
  •  шрифты баннера

Использование шрифтов в баннере

Стандартные и нестандартные шрифты отображаются как для латиницы, так и для кириллицы. Шрифты баннера могут быть отображены только для букв латинского алфавита.

Перечень шрифтов для баннера 1Перечень шрифтов для баннера 2Перечень шрифтов для баннера 3

Важно:

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

Баннер как цельное изображение

Примеры использования баннера в рассылках

Давайте на примерах рассмотрим, как можно с помощью баннера оживить письмо.

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

1. Иллюстрация к статье

Баннер как иллюстрация к статье

Такой баннер состоит из трех элементов: картинки, дополнительного изображения и текста

Настройки картинки для баннера

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

Пример использования дополнительного изображения

И сам блок с текстом:

Выделение текстового блока в баннере

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

2. Баннер как шапка в письме

Баннер как шапка в письме

Баннер может выполнять функцию хедера в письме. Разместите логотип на подходящем фоне, добавьте краткое описание или слоган компании - и хедер готов.

3. Продающий баннер

Такой баннер должен содержать в себе суть вашего предложения и призыв к действию

Пример продающего баннера

Он состоит из трех элементов:

  • Базовой картинки

Базовая картинка продающего баннера

  • и двух текстовых блоков

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

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

Подведем итог

  • С помощью нашего редактора вы сможете создавать баннер для рассылки, не прибегая к помощи графического редактора. 
  • Все необходимые элементы встроены в редактор. 
  • Вы можете редактировать любые слои изображения и применять эффекты в блоке «Баннер».
Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email