Как использовать фон в email рассылке: 21 пример для вдохновения

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

email designМы подобрали лучшие примеры писем, где удачно оформлен

  • фон всего емейла,
  • фон полосы,
  • фон структуры,
  • фон контейнера.

Фон емейла

Бэкграунд письма как правило окрашивают в нейтральные оттенки серого, а заливку тела шаблона делают белой. Но иногда стоит отходить от правил. Потому что по-настоящему красивые шаблоны для писем, обращают на себя внимание как рас своей неординарностью.

Общий цвет бэкграунда

Postman — это программное обеспечение для создания API, то есть их позиционирование связано с высокими технологиями. Чтобы передать эту идею, Postman традиционно использует образы, связанные с космосом. 

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

unnamed

Стоит обратить внимание и на расположение блоков в этом емейле. У второй структуры справа и слева есть отступы в 10 px. Благодаря этому шаблон немного похож на бумажную открытку.  


Общий цвет шаблона

В этом примере заливку сделали уже внутри емейла, под блоками с контентом.

unnamed (3)С помощью такой заливки можно легко оживить обычную промо-рассылку.

Для этого в конструкторе шаблонов нужно выбрать цвет заливки и применить ее ко всему письму.

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


Фоновые изображения в подложке

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

Так, ювелирный магазин EFREMOV к выходу коллекции HONEY декорировал подложку пчелами.

unnamed (4)

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


Фоновые изображения для контента

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

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


Premium_Hand-Drawn Fonts


Фон полосы

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

Структура с несколькими блоками

Лаконичный емейл в фирменном стиле Litmus.

unnamed (5)

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

  • логотип,
  • заголовок,
  • текст,
  • баннер.

Строка меню

Net-A-Porter с помощью фона делает акцент на меню, которое ведет читателя на соответствующие разделы сайта.

unnamed (1)

 

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


Баннер

В этом примере от Virtus баннер разделили на три полосы.

unnamed (6)

Синяя заливка среднего акцентирует внимание на слогане «The Action Starts Now» и отлично контрастирует с цветом шрифта.


Футер

Футер тоже можно выделить цветом, если в нем находится важная информация.

unnamed (14)

Это могут быть:

  • соцсети,
  • разделы сайта,
  • подпись отправителя,
  • адреса, телефоны,
  • ссылка на отписку.

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

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

Логотип

Логотип — это главный идентификатор бренда, поэтому многие компании выделяют структуру с ним ярким фирменным цветом, как это делает HubSpot.

unnamed (7)


 Футер

Классический контраст черного и белого в примере от Chanel привлекает внимание к футеру.

unnamed (8)


 Изображение в структуре

Harry Winston торгуют ювелирными изделиями, поэтому в их рассылках часто предлагают идеи для подарков, приуроченных к разным инфоповодам. Здесь это, конечно, свадьба. С помощью фона  трех кнопок читатель сразу понимает тему письма.

unnamed (15)

Единственный минус этого емейла — недостаточно контрастный шрифт.


Текстура в карточке товара

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

unnamed (9)


 Баннер

На этом примере видно, как получить баннер, просто залив структуру.

unnamed (10)Чтобы получился такой баннер, нужно выбрать структуру, написать текст и добавить кнопку. Заливаете структуру нужным цветом — и готово. Так, например, работает редактор шаблонов в eSputnik.


Меню

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

menu

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


Фигурные элементы в структуре

Здесь мы видим, как выгодно подчеркивается структура емейла благодаря фону и яркому заголовку. А фигурный элемент придает письму экзотичности.

buble element

Фигурные элементы применяются в верстке email-писем довольно редко, но срабатывают почти всегда.


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

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

Карточки товаров

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

unnamed


Баннеры

Чтобы сделать баннер с помощью фона контейнера, нужно:

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

Готово!

unnamed (12)

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


Промокоды

Если промокод в письме нельзя скопировать, им могут так и не воспользоваться — слишком не юзерфрендли.

unnamed (13)Чтобы получатель мог просто скопипастить код, нужно:

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

Вот и всё :)


Текст

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

text email

Особенно стоит обратить внимание на этот вариант тем, кто часто рассылает лонгриды и хочет разнообразить их.


Бонус

Сложно было пройти мимо этих примеров и не поделиться с вами)

Пример 1: Все и сразу

unnamed (2)

В этом письме использованы все мыслимые фоны: email, контейнеров, структуры… При этом:

  • Фон товаров и контейнеров гармонично сочетаются друг с другом;
  • Светло-серый фон отлично оттеняет меню, лого и футер.

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


Пример 2: Емейл-фейерверк

unnamed (3)На первый взгляд, в этом  письме все слишком ярко и наляписто. Но приглядимся внимательней:

  • Крупные элементы ярких цветов на фоне всего письма цепляют взгляд и заставляют проскролить письмо до конца;
  • Фон контента в пастельных тонах оттеняет яркость общего фона;
  • Шрифт хорошо контрастирует с фоном контента;
  • Акцент сделан на основной идее.

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


Вместо заключения

К сожалению, фон емейла и его полос отображается только на десктопе, в мобильной версии поддерживается не более 600 пикселей контента.

Прокомментируйте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>