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

Вы много работаете над содержимым письма, но все-равно постоянно хотите что-то улучшить и добавить для вау-эффекта?

Читаете электронные письма хотя бы нескольких известных брендов с потрясающими изображениями, от которых просто захватывает дух?

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

Фон письма - как изюминка вашей рассылки. Этот элемент может присутствовать в области:

1. Всего письма

2. Полосы

3. Структуры

4. Контейнера

Давайте рассмотрим как в несколько простых шагов создать фон с помощью адаптивного редактора eSputnik.

Фон письма. Как оформить в редакторе eSputnik?

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

Способ №1 - Цвет подложки

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

В результате емейл может быть любого оттенка и для любого случая:

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

Способ №2 - Фоновая картинка

Во вкладке “Оформление”, разделе “Общие” выберите опцию “Картинка в фоне”:

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

Выберите нужное расположение элемента:

Замените на любую другую картинку, сравните варианты и выберите лучший:

Редактируйте изображение в самом письме:

Получите рассылку, которая не оставит равнодушными ваших подписчиков:

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

Фон полосы в емейл-рассылке

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

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

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

Способ №1 - Заливка цветом

Выделите полосу:

Укажите цвет:

Получите результат:

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

Способ №2 - Картинка как подложка

Выделите полосу:

Используйте картинку для фона полосы:

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

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

Задавайте расположение фоновому изображению:

Замените другим изображением со своего компьютера, из общедоступных источников или из “Банка картинок”. Нажмите на кнопку "Заменить"

Выберите необходимый раздел с картинками

Любуйтесь результатом:

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

Фон структуры или отдельного элемента?

Структура - это элемент полосы, который содержит в себе несколько контейнеров с любым содержимым.

Способ №1 - цвет

Выделите структуру:

Задайте один цвет:

Элемент будет выглядеть так:

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

• Структура: #004e99

• Контейнер: #ffffff

• Кнопка: #ec0000

Способ №2 - картинка

Выделите структуру:

Выберите опцию “Картинка в фоне”:

Загрузите изображение со своего компьютера, по ссылке на внешний ресурс или выберите в “Банке картинок”:

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

Редактируйте картинку, не выходя из письма:

Получите нужный результат:

Если вы хотите сделать такую структуру ещё более красочной - загляните в следующий пункт.

Фон контейнера. Как оформить в редакторе eSputnik?

Чаще всего актуально использовать:

1. В карточках товаров;

2. На баннерах;

3. Под промокодом.

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

Способ №1 - цвет

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

В контейнере напишите нужный текст:

Выберите цвет текста:

Зафиксируйте отступы:

Выделите контейнер с текстом:

Выберите цвет фона, закругление и обводку контейнера:

Полученный результат в шаблоне вашей рассылки:

Можно сделать кликабельными эти элементы, добавив под текст ссылку.

Способ №2 - картинка

Загрузите картинку для фона контейнера:

Укажите расположение:

Редактируйте изображение, не выходя из письма:

Получайте невероятный результат, который будет только у вашей компании:

Создавайте уникальные письма, которые помогут заинтересовать и поддерживать коммуникацию с вашей целевой аудиторией.

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