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

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

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

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

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

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

  2. Полосы

  3. Структуры

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

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

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

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

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

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

Цвет фона письма

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

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

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

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

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

Картинка в фоне

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

Поиск картинок в редакторе

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

Местонахождение элементов

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

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

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

Редактирование картинок

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

Фоновая картинка в письме

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

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

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

Отображение письма на мобильном

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

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

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

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

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

Настройка полосы в редакторе

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

Настройка цвета фона полосы

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

Предпросмотр письма

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

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

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

Настройка полосы

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

Фоновая картинка в письме

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

Редактирование картинок в письме

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

Редактирование картинок

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

Настройки фоновых изображений

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

Подстановка картинок

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

Банк картинок

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

Просмотр готового письма

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

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

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

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

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

Оформление промокода

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

Настройка цвета

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

Оформление промокода

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

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

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

  • Кнопка: #ec0000

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

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

Настройки структуры

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

Каринка в фоне

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

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

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

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

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

Редактирование картинки

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

Добавление фона структуры

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

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

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

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

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

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

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

Пример письма

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

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

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

Оформление текста

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

Настройки текста

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

Настройка отступов

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

Контейнеры с текстом

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

Настройки контейнера

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

Просмотр письма

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

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

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

Картинка для контейнера

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

Настройки блока

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

Редактирование картинки

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

Настройки письма

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

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

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email