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

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

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

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

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

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

  2. Полосы

  3. Структуры

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

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

 

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

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

 

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

  • Кнопка: #ec0000

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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