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

Существует несколько способов сделать письмо интереснее и привлекательнее, один из них – расставить акценты, добавив фоновое изображение. Сделать это можно с помощью двух методов: залить цветом область или добавить картинку.

Цветной фон подчеркнет уникальность рассылки. Задать цвет можно для:

  1. Всего письма.
  2. Полосы.
  3. Структуры.
  4. Контейнера.

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

Разберем эту функцию на примере анонса вебинара от компании eSputnik, так как в этом письме использованы практически все методы добавления фона.

Пример письма от компании eSputnik

Общие настройки цвета

В меню слева у вас есть возможность задать цвет каждой области: фона, полосы, структуры и контейнера соответственно. Там вы указываете код цвета (в формате #хххх) или подбираете подходящий из всплывающей палитры:

Палитра для выбора цвета

Как задать фон всего письма

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

Раздел “Оформление” вкладку “Общие настройки”

В нашем случае указан серый фон –  #f6f6f6.

В том же разделе “Оформление” во вкладке “Общие настройки” есть чекбокс “Картинка в фоне”. Если его переключить, открываются дополнительные настройки:

Дополнительные настройки картинки в фоне

Далее вы можете загрузить заранее подготовленное изображение с компьютера, добавить ссылку из общедоступных источников или выбрать изображение из банка. Обратите внимание, что картинки должны быть в формате PNG, JPG, GIF и не более 3 Мб или 4000 × 4000 рх.

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

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

  1. Заменить изображение

  2. Редактировать выбранное изображение (добавить фильтр, изменить размер, обрезать и т. п.)

  3. Дублировать картинку по высоте и ширине. Лучше брать бесшовные (стыкуемые) картинки, чтобы подложка выглядела цельной

  4. Разместить изображение по центру письма

  5. Задать положение изображению по оси X и Y.

Обращаем ваше внимание: некоторые почтовые клиенты (Windows 10 Mail, Android 4.4, приложение Gmail для iOS и Android с аккаунтами не Gmail) не поддерживают фоновые изображения. Мы рекомендуем выбирать цвет, похожий на изображение, в качестве запасного варианта.

После настройки всех параметров получаем письмо на подложке с изображением

.Письмо на подложке с изображением

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

Отображение на мобильном устройстве

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

Фон полосы

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

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

Если кликнуть по полосе, всплывают настройки редактирования (меню слева) появляется дополнительное поле – цвет фона хедера/контента/футера.

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

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

Фон полосы

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

В нашем письме задан синий фон полосы – #2b64cd  и добавлена заранее подготовленная картинка с прозрачным фоном:

Пример каринки в фоне

Получается письмо с оригинально выделенной полосой:

Фон полосы

Фон структуры

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

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

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

В приглашении на вебинар структуре второго блока письма задан синий цвет. Так мы разграничили информацию.

Фон структуры

В подложку структуры также можно добавлять картинку и совмещать ее с заливкой фона.

Фон контейнера

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

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

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

Блок с информацией о предыдущих выпусках:

Фон контейнеров

Тут три контейнера закрашены в синий цвет и добавлены три разные картинки на прозрачном фоне.

Важные моменты при добавлении фона в письме

  1. Рекомендуем добавлять такой фоновый цвет или картинку, которые будут ассоциироваться с вашим брендом или гармонировать с содержимым писем.
  2. Всегда проверяйте, как ваша рассылка будет смотреться на экране мобильного телефона, так как многие люди не проверяют почту с компьютера, а письмо должно достойно выглядеть и без фоновой заливки.
  3. Обращайте внимание, чтобы текст на фоне картинок или заливки фона был читабельный, поэтому не забывайте делать его контрастным.
Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email