Додавання фону до листа

Ви багато працюєте з контентом листа, але все одно завжди хочете щось іще поліпшити і додати заради вау-ефекту?

Читаєте електронні листи від принаймні кількох відомих брендів із неймовірними зображеннями, від яких просто перехоплює подих?

Додайте фонове зображення, безпосередньо пов’язане із вашим брендом або контентом емейла, та підвищіть свої шанси на кращі показники конверсії.

Фон листа — це немовби родзинка вашої розсилки. Цей елемент може бути присутнім в області:

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

Давайте розглянемо, як у кілька простих кроків створити фон за допомогою адаптивного редактора eSputnik.

Фон листа. Як оформити в редакторі eSputnik?

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

Спосіб №1 — Колір підкладки

Перш ніж розпочати створення листа, слід встановити ключові параметри зовнішнього вигляду у вкладці "Оформлення", розділ "Загальні налаштування", де і вказати потрібний колір:

У результаті емейл може мати будь-який відтінок і бути придатним для будь-якої ситуації:

Вибирайте контрастні кольори. На десктопі вони вигідно підкреслять контент і виділять лист.

Спосіб №2 — Фонова картинка

У вкладці "Оформлення", розділ "Загальні налаштування" виберіть опцію "Фонове зображення":

Перетягніть зображення з вашого комп'ютера у позначену область, додайте посилання із загальнодоступних джерел або використовуйте "Банк зображень":

Виберіть потрібне розміщення елемента:

Замініть будь-якою іншою картинкою, порівняйте варіанти і виберіть кращий:

Редагуйте зображення в самому листі:

І у вас вийде розсилка, яка не залишить байдужими ваших підписників:

Слід пам'ятати, що на мобільних пристроях через розмір екрану підкладку не видно. Тож плануйте лист так, щоб він і без підкладки мав гарний вигляд.

Фон смуги в емейл-розсилці

Смуга —  це орієнтований переважно на десктопний перегляд листа елемент, який допомагає виділитися фірмовим стилем, підлаштуватися під настрій та інфопривід. Мобільні клієнти не відображають його повністю,

зате на комп'ютері лист виглядатиме привабливіше.

Смуга містить структури та контейнери. Про роботу з цими елементами ми поговоримо далі, а поки що розглянемо на прикладі хедера листа, як можна зробити його контрастнішим.

Спосіб №1 — Заливка кольором

Виділіть смугу:

Вкажіть колір:

Отримайте результат:

У листі ви можете використовувати контрастні смуги в необмеженій кількості, але в межах розумного.

Спосіб №2 — Картинка як підкладка

Виділіть смугу:

Застосуйте зображення для фону смуги:

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

У фоторедакторі доступні базові функції, які допоможуть підготувати картинку до використання:

Задайте розміщення фонового зображення:

Замініть іншим зображенням зі свого комп'ютера, із загальнодоступних джерел або з "Банку зображень". Натисніть кнопку "Замінити"

Виберіть потрібний розділ з картинками

Насолоджуйтеся результатом:

Як альтернативний варіант — задавайте для смуги колір бекграунду на той випадок, якщо картинка раптом не відобразиться і логотип виглядатиме білим на білому.

Фон структури або окремого елемента?

Структура — це елемент смуги, який містить кілька контейнерів з будь-яким контентом.

Спосіб №1 — Колір

Виділіть структуру:

Задайте один колір:

Елемент матиме такий вигляд:

Щоб досягти такого результату, треба вибрати контрастну заливку для контейнера. Наприклад, для цього блоку ми використовували такі кольори:

• Структура: #b6d7a8
• Контейнер: #ffffff
• Кнопка: #659c35

Спосіб №2 — Картинка

Виділіть структуру:

Виберіть опцію "Зображення у фоні":

Завантажте зображення зі свого комп'ютера, за посиланням на зовнішній ресурс або виберіть у "Банку зображень:

Задавайте потрібне розміщення елемента:

Редагуйте картинку, не виходячи з листа:

Отримайте потрібний результат:

Якщо ви хочете зробити таку структуру ще більш яскравою — зазирніть у наступний пункт.

Фон контейнера. Як оформити в редакторі eSputnik?

Використання найчастіше є актуальним:

1. У картках товарів;
2. На банерах;
3. Під промокодом.

По-перше, так простіше працювати з картинками — не треба відкривати фотошоп; по-друге, текстову інформацію підписник зможе скопіювати. У випадку з промокодом — це безпрограшний варіант, адже наша мета — зручність для користувача, якому не доведеться запам'ятовувати код і вводити його вручну.

Спосіб №1 — Колір

Давайте розглянемо на прикладі, у якому нам потрібно створити текстові блоки з різним фоном.

У контейнері напишіть потрібний текст:

Виберіть колір тексту:

Зафіксуйте відступи:

Виділіть контейнер з текстом:

Виберіть колір фону, заокруглення та обведення контейнера:

Отриманий результат у шаблоні вашої розсилки:

Можна зробити ці елементи клікабельними, додавши до тексту посилання.

Спосіб №2 — Картинка

Завантажте картинку для фону контейнера:

Вкажіть розміщення:

Редагуйте зображення, не виходячи з листа:

Отримуйте неймовірний результат, який буде тільки у вашої компанії:

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

У нашому редакторі ви можете створити лист будь-якого рівня складності без знання html і графічних редакторів. Спробуйте просто зараз.