Як додати фон у редакторі

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

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

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

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

  1. Усього листа

  2. Смуги

  3. Структури

  4. Контейнера

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

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

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

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

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

Колір фону листа

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

Приклад листа з фоном

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

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

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

Фонове зображення

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

Вибір зображення у редакторі

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

Налаштування розташування зображення

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

Вибір іншого зображення

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

Редагування зображення у редакторі

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

Лист з фоновим зображенням

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

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

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

Відображення листа на мобільному

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

Відображення листа на десктопі

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

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

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

Смуга у редакторі

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

Налаштування кольору фону смуги

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

Приклад смуги з кольоровим фоном у листі

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

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

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

Смуга у листі

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

Фонове зображення для смуги

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

Редагування зображення у редакторі

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

Редактор зображень

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

Налаштування фонового зображення

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

Вибір іншого зображення

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

Вибір зображення

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

Смуга з фоновим зображенням

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

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

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

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

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

Оформлення промокоду

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

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

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

Структура з кольоровим фоном

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

  • Структура: #b6d7a8

  • Контейнер: #ffffff

  • Кнопка: #659c35

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

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

Вибір структури

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

Зображення у фоні

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

Вибір зображення

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

Налаштування зображення

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

Редагування зображення

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

Структура з фоновим зображенням

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

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

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

  1. У картках товарів;

  2. На банерах;

  3. Під промокодом.

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

Промокод у текстовому блоці

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

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

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

Оформлення тексту

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

Налаштування тексту

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

Налаштування відступів

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

Контейнер з текстом

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

Налаштування контейнера

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

Контейнери з кольоровим фоном

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

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

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

Вибір зображення

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

Налаштування відображення фону

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

Редагування зображення

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

Контейнери з фоновим зображенням

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

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

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email