Как добавить фон в редакторе
Вы много работаете над содержимым письма, но все-равно постоянно хотите что-то улучшить и добавить для вау-эффекта?
Читаете электронные письма хотя бы нескольких известных брендов с потрясающими изображениями, от которых просто захватывает дух?
Добавьте фоновое изображение, которое имеет тесную связь с вашим брендом или содержимым емейла и увеличьте свои шансы на лучшие показатели конверсии.
Фон письма - как изюминка вашей рассылки. Этот элемент может присутствовать в области:
-
Всего письма
-
Полосы
-
Структуры
-
Контейнера
Давайте рассмотрим как в несколько простых шагов создать фон с помощью адаптивного редактора eSputnik.
Фон письма. Как оформить в редакторе eSputnik?
Чаще всего для дизайна писем используются цвета из брендбука, чтобы при первом взгляде письмо было узнаваемым и в одном корпоративном стиле. Сделать планируемое письмо контрастным вы можете с помощью фона.
Способ №1 - Цвет подложки
Перед началом создания письма необходимо задать ключевые параметры внешнего вида во вкладке “Оформление”, разделе “Общие”, где и указать нужный цвет:
В результате емейл может быть любого оттенка и для любого случая:
Выбирайте контрастные цвета. На десктопе они выгодно подчеркнут содержимое и выделят письмо.
Способ №2 - Фоновая картинка
Во вкладке “Оформление”, разделе “Общие” выберите опцию “Картинка в фоне”:
Перетащите изображение из вашего компьютера в обозначенную область, добавите ссылку из общедоступных источников или используйте “Банк картинок”:
Выберите нужное расположение элемента:
Замените на любую другую картинку, сравните варианты и выберите лучший:
Редактируйте изображение в самом письме:
Получите рассылку, которая не оставит равнодушными ваших подписчиков:
Следует помнить, что на мобильных устройствах за счет размера экрана подложка не видна. Рассчитывайте письмо так, чтобы оно и без подложки выглядело хорошо.
Фон полосы в емейл-рассылке
Полоса - элемент больше ориентированный на десктопный просмотр письма, который помогает выделиться фирменным стилем, подстроиться под настроение и инфоповод. Мобильные клиенты не отображают его полностью,
зато на компьютере письмо, будет выглядеть более привлекательно.
Полоса содержит в себе структуры и контейнеры. О работе с этими элементами мы поговорим дальше, а пока рассмотрим на примере хедера письма как можно его сделать контрастнее.
Способ №1 - Заливка цветом
Выделите полосу:
Укажите цвет:
Получите результат:
В письме вы можете использовать контрастные полосы в неограниченном количестве, но в пределах разумного.
Способ №2 - Картинка как подложка
Выделите полосу:
Используйте картинку для фона полосы:
Редактируйте ее: измените размер, обрежьте, добавьте эффект или надпись, не выходя из письма.
В фоторедакторе доступны базовые функции, которые помогут подготовить картинку для использования:
Задавайте расположение фоновому изображению:
Замените другим изображением со своего компьютера, из общедоступных источников или из “Банка картинок”. Нажмите на кнопку "Заменить"
Выберите необходимый раздел с картинками
Любуйтесь результатом:
Как альтернативу - задавайте полосе цвет бекграунда, на случай если картинка вдруг не отобразится и логотип окажется белый на белом.
Фон структуры или отдельного элемента?
Структура - это элемент полосы, который содержит в себе несколько контейнеров с любым содержимым.
Способ №1 - цвет
Выделите структуру:
Задайте один цвет:
Элемент будет выглядеть так:
Чтобы достичь такого результата, нужно выбрать контрастную заливку для контейнера. Например, для этого блока мы использовали такие цвета:
-
Структура: #004e99
-
Контейнер: #ffffff
-
Кнопка: #ec0000
Способ №2 - картинка
Выделите структуру:
Выберите опцию “Картинка в фоне”:
Загрузите изображение со своего компьютера, по ссылке на внешний ресурс или выберите в “Банке картинок”:
Задавайте нужное расположение элемента:
Редактируйте картинку, не выходя из письма:
Получите нужный результат:
Если вы хотите сделать такую структуру ещё более красочной - загляните в следующий пункт.
Фон контейнера. Как оформить в редакторе eSputnik?
Чаще всего актуально использовать:
-
В карточках товаров;
-
На баннерах;
-
Под промокодом.
Во-первых, так работать с картинками проще - не нужно открывать фотошоп; во-вторых, текстовую информацию подписчик сможет скопировать. В случае с промокодом - это беспроигрышный вариант, ведь наша цель - удобство для пользователя и ему не придётся запоминать код и вводить его вручную.
Способ №1 - цвет
Давайте рассмотрим на примере, когда нам нужно создать текстовые блоки с разным фоном.
В контейнере напишите нужный текст:
Выберите цвет текста:
Зафиксируйте отступы:
Выделите контейнер с текстом:
Выберите цвет фона, закругление и обводку контейнера:
Полученный результат в шаблоне вашей рассылки:
Можно сделать кликабельными эти элементы, добавив под текст ссылку.
Способ №2 - картинка
Загрузите картинку для фона контейнера:
Укажите расположение:
Редактируйте изображение, не выходя из письма:
Получайте невероятный результат, который будет только у вашей компании:
Создавайте уникальные письма, которые помогут заинтересовать и поддерживать коммуникацию с вашей целевой аудиторией.
В нашем редакторе вы можете создать письмо любой сложности без знания html и графических редакторов. Попробуйте прямо сейчас.