Добавление фона в письмо

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

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

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

Благодаря адаптивному редактору 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. Обращайте внимание, чтобы текст на фоне картинок или заливки фона был читабельный, поэтому не забывайте делать его контрастным.