21 удачный пример использования фоновых картинок

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

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

Фон может быть:

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

Мы подобрали 21 удачный пример использования фоновых картинок для того, чтобы понять, как лучше всего подойти к оформлению письма и не переборщить с яркими акцентами. Приступим!

Фон письма

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

Единый цвет фона

Postman позиционирует себя как компания, которая стремительно идет в будущее и дает возможность компаниям делать то же самое. Это приветственное письмо оформлено в брендовых цветах, с использованием одного общего цвета для всего письма.

Обратите внимание не только на фон, а на расположение блоков в письме. Вторая структура сделана с прозрачными отступами справа и слева в 10px. За счёт такой вёрстки шаблон смотрится более аккуратно.  

Единый цвет фона контента

Заливка находится уже внутри письма, под всеми контентными блоками.

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

Изображение в фоне

Картинка на заднем фоне - возможность преподнести запоминающийся материал.

Вы можете: создать фон с корпоративными элементами (логотипом и прочей символикой) в нейтральных оттенках, а также подобрать совершенно противоположное - в зависимости от инфоповода.

Например, компания EFREMOV по случаю выхода коллекции украшений HONEY подобрала тематический фон с пчелами.

Зачем? Чтобы вызвать правильные ассоциации. Такой подход может понравится женской аудитории, а также родителям, которым покупают ювелирные украшения по случаю знаменательных дат своим детям. Берем на заметку!

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

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

 

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

Фон полосы

Фон полосы служит не просто для “вау-эффекта” при открытии, но и для акцентирования внимания на главных вещах. Чаще всего делается заливка только одной полосы для комфортного восприятия.

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

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

Строка меню

Можно использовать фон одной полосы письма в качестве дополнительного акцента на одном или нескольких элементах писем. Например,

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

Баннер

Пример, когда баннер разрезан на три части и находится в трёх разных полосах.

С помощью синей заливки, подобранной в тон блоку с текстом, акцент находится именно на фразе “The Action Starts now”. Для остального содержимого письма используется обычный черный фон.

Футер

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

Например:

  1. На социальных сетях;

  2. Категориях сайта, если нет строки меню в шаблоне;

  3. Подписи менеджера, который подготовил материал;

  4. Адресе на карте и многом другом.

Важно: не забудьте о ссылке на отписку - она всегда должна быть контрастной и заметной.

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

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

Логотип

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

Футер

Пример футера, который привлекает внимание, так как всё письмо просто на белом фоне. В блоке “Футер” включены: логотип, каталог сайта, услуги, адрес и отписка.

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

Компания Harry Winston специализируется на ювелирных изделиях, поэтому большинство рассылок приходят с идеями подарков и инфоповодов для них. Данный блок получился красивым и полезным. Помимо фона структур - это 3 полноценные кнопки, ведущие на сайт. Такое стилистическое решение хорошо тем, что и на компьютере, и на смартфоне при перестройке блоков письмо будет выглядеть без изменений.

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

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

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

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

Баннер

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

Меню

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

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

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

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

Это применяется не так часто в вёрстке email-рассылок, но зато как эффектно. Берем на вооружение - этот беспроигрышный вариант запомниться надолго!

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

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

В карточках товаров

“Как расположить товары?” - главный вопрос перед каждой рассылкой. Если уж на баннер можно найти идеи в интернете, то на карточках товаров сразу появляется проблема: в примерах ракурсы одни, а у вас другие. Все вместе не становится в общую композицию. Как быть? Добавив к стандартным фото тематическое фоновое изображение, можно получить яркий акцент в e-mail.

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

На баннерах

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

Загрузите картинку фоном структуры, добавьте контейнер с текстом и нужной кнопкой - баннер готов!

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

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

Под промокодом

Давать статичный промокод в email-рассылке - стандартная практика, но часто им так и не пользуются люди. Причиной тому является неудобство: нужно сначала перейти на сайт, заказать товар, перейти из корзины в письмо, запомнить промокод и написать, вернувшись обратно в корзину. Слишком много действий? Да.

Почему бы не дать возможность человеку просто скопировать заветное слово и не вставить на этапе завершения покупки? Загрузите баннер фоном в структуру, создайте в ней контейнер, напишите промокод и залейте цветом, который будет выделяться. Все очень просто :)

В тексте

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

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

Бонус

Мы не могли пройти мимо этих примеров и не упомянуть их.

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

В этой рассылке есть всё: фон письма, фон структуры, фон контейнера и все разных оттенков, но как удачно получился эксперимент у компании:

Совет: не стоит бояться экспромта и сумасшедших идей в рассылках email-писем. Пробуйте и смотрите на обратную связь от вашей целевой аудитории. Только вы знаете ее лучше всего.

Пример 2: ярко vs наляписто

Этот пример для кого-то покажется признаком хорошего вкуса у сотрудников компании, а кому-то будет слишком пестрым и странным. Разберем детально:

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

Вывод

Мы проанализировали все возможные варианты использования фона в письмах.

Главный вывод, который можно сделать: при создании шаблона для рассылки, красоту можно сделать самостоятельно, без знания html-верстки и обращения к дизайнеру:

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

Подробнее о том, как же создать фон в редакторе eSputnik смотрите в инструкции.

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