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

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

 

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

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

 

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

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

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

 

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

 

 

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

 

 

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

 

 

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

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

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

 

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

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

 

 

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

 

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

 

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

 

 

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

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

 

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

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

 

 

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

 

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

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

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

 

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

 

 

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

 

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

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

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

 

 

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

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

 

 

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

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

 

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

 

 

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

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

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

 

 

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

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

 

 

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

 

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

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

• С помощью нашего редактора вы сможете создавать баннер для рассылки, не прибегая к помощи графического редактора. 
• Все необходимые элементы встроены в редактор. 
• Вы можете редактировать любые слои изображения и применять эффекты в блоке «Баннер».