How-To. Як створити листа до Чорної п'ятниці

Напередодні Чорної п'ятниці кожна папка “Вхідні” електронної пошти переповнюється десятками листів із рекламними акціями та привабливими пропозиціями щодо знижок. Багато з них так і залишаються непрочитаними, тому маркетологи щороку змагаються в оригінальності, вигадують нові підходи й пишуть унікальні теми листів, щоб зачепити й зацікавити підписника. Ми вже розповідали, як написати листа до Black friday, і підготували для вас понад 100 надихаючих тем; у цій же статті ми розповімо, як у редакторі eSputnik створити привабливого листа й досягти wow-ефекту в разі,якщо підписник уже відкрив емейл.

Як оформити email-розсилку до Black Friday

Для прикладу візьмемо лист від Designmodo — сервісу, який займається створенням фреймворків і пропонує багато корисних інструментів для дизайнерів і веб-розробників. Додамо деякі власні ідеї і в результаті отримаємо ефектний лист до Чорної п'ятниці:

#000000 Friday

Саме таку назву мав би славнозвісний день розпродажів відповідно до кольорової моделі RGB. Утім ми виберемо для фону нашого листа два відтінки чорного, щоб досягти контрастності. Під час оформлення листа до Чорної п'ятниці ми також будемо використовувати варіації кольорів, які застосовуються на сайті Designmodo для кожного сервісу, і додамо близький до них за кольоровим колом яскраво-рожевий.

Таким чином ми отримаємо ефектну кольорову гамму, яка відповідає одразу кільком вимогам:

• зберігає містику Чорної п'ятниці завдяки властивому цьому дню фону;

• має багато спільного з оформленням сайту;

• привертає увагу завдяки контрастним кольорам, які добре сполучаються між собою;

• йде в ногу з трендом футуризму, неону й асоціюється з сучасними технологіями — саме тим, що пропонується в листі.

Для всіх елементів листа ми будемо використовувати шрифт Arial, роблячи візуальні акценти шляхом зміни кольору (#ffffff, # f833ac, # f60bc0, #dddddd), кегля (від 10 до 60 рх), використання жирного та закресленого написання.

Перейдемо до створення розсилки, присвяченої Чорній п'ятниці. У розділі "Повідомлення" натисніть кнопку "Створити Email", виберіть у вкладці "Базові" порожній шаблон і видаліть із нього всі блоки.

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

Отже, ми визначили настрій усього листа й одразу зможемо оцінити його загальний вигляд при додаванні нових елементів.

Хедер

Шапка нашого листа складається з трьох елементів: лого, посилання на веб-версію листа і СТА, яка закликає перейти до купівлі. Для створення такої шапки відкриваємо в розділі "Контент" меню "Структури", вибираємо шаблон із трьома контейнерами й перетягуємо його в лист:

Щоб створити контраст, виберемо більш насичений, ніж колір фону листа, відтінок чорного. Натисніть полосу та виставте відповідні параметри в меню, яке з’явиться ліворуч у вкладці "Зовнішній вигляд" → "Колір фону контенту".

У такий самий спосіб треба буде налаштувати колір фону контенту і для наступних полос, аби це застосовувалося до кожної структурі.

У меню налаштувань "Структури" виставимо розміри контейнерів і задамо значення відступів між ними:

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

Логотип

Додати зображення для логотипу можна з комп'ютера, за допомогою посилання або вибрати картинку, завантажену заздалегідь:

Виберемо файл із розширенням .png і прозорим фоном, щоб не перекривати загальний фон листа. Змінюємо розмір зображення безпосередньо в редакторі — вибираємо значення 130 і встановлюємо вирівнювання по центру:

 

Вимикаємо опції "Розтягнути по ширині" та "Адаптивність", а також встановлюємо значення 10 для верхнього відступу:

Посилання на веб-версію листа

Налаштувати зовнішній вигляд тексту можна також у меню ліворуч:

• розмір — 14рх;

• вирівнювання — по центру;

• основний колір шрифту — білий;

• колір посилання — яскраво-рожевий;

• жирне накреслення;

• міжрядковий інтервал — третій пункт;

• відступи: зверху — 10, решта — 0.

Щоб зробити частину тексту посиланням, виділіть її курсором і натисніть на панелі інструментів значок "Зробити посиланням".

У меню, яке з'явиться ліворуч, виберіть тип "Перегляд у браузері" і вставте URL сторінки: https://esputnik.com/viewInBrowser.

Кнопка

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

Для цього знову переходимо до меню ліворуч, де також вказуємо посилання, на яке веде СТА, і налаштовуємо інші параметри кнопки:

• розмір шрифту — 14px;

• колір кнопки — #f833ac;

• колір кнопки при наведенні — #f60bc0;

• колір тексту — #ffffff;

• колір фону — transparent;

• закруглення — 5;

• вирівнювання — по центру;

• спільна межа — 0;

• внутрішні відступи: праворуч і ліворуч — 20, зверху та знизу — 10;

• зовнішні відступи — 0.

Вкажіть URL сторінки, на яку перейде підписник, клікнувши кнопку:

У підсумку отримаємо привабливе симетричне розміщення всіх елементів шапки:

Роздільник

Заради кращого сприйняття відділимо основну частину листа від хедера роздільником. Виберемо відповідний готовий блок у вкладці "Контент" і налаштуємо його зовнішній вигляд:

• колір блоку — за замовчуванням #110b0b;

• колір лінії — #353334;

• ширина — 100;

• вирівнювання — по центру;

• відступи: ліворуч і праворуч — 10, знизу — 20, зверху — 0, щоб не додавати до хедера зайвої відстані;

• також активуємо адаптивність, щоб роздільник міг підлаштуватися до ширини екрану мобільного пристрою.

Банер

Використовуючи привабливий банер на початку листа, ви одразу привертаєте увагу підписника. Та ми не лише додамо яскраву картинку, але й створимо ефект справжньої неонової вивіски, привабливо мерехтливої ​​в темряві. У редакторі eSputnik передбачено можливість завантажувати gif-анімацію, яку ми й використаємо в ролі нашого банера.

Аналогічно завантаженню картинки для логотипу додаємо gif-зображення. Розмір нашої гифки — 480x280px, тож для підлаштування зображення до ширини листа достатньо лише натиснути в редакторі кнопку "Розтягнути по ширині". Вмикаємо опцію адаптивності й видаляємо всі відступи. Додайте посилання на сторінку, на яку буде вести банер: хороший банер є одним із найбільш клікабельних елементів листа.

У результаті отримуємо ефектний банер, що мерехтить яскравими кольорами:

Текст

Додамо основний меседж за допомогою блоку "Текст". Перетягуємо потрібний блок у лист і вставляємо наш промо-текст.

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

Це налаштування встановлює вирівнювання для всього блоку. Щоб змінити вирівнювання для окремого абзацу або частини тексту, слід скористатися кнопкою на панелі інструментів для редагування тексту.

На цій самій панелі налаштовуємо зовнішній вигляд тексту:

• розмір шрифту для заголовка — 40px;

• розмір основного шрифту — 16px;

• колір основного тексту — білий, #ffffff;

• колір важливих слів — #f833ac.

Якщо у випадаючому віконці з палітрою немає кольору, який вас цікавить, натисніть "Інші кольори" й виберіть потрібне значення.

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

Щоб зацікавлений підписник міг одразу скористатися пропозицією, розмістимо під текстом кнопку Call-To-Action. Заради контрастності листа варіюватимемо кольори і цього разу зробимо її білого кольору, а колір тексту буде змінюватися при наведенні з #f833ac на #f60bc0.

Шрифт вибираємо більший — 18px, а закруглення залишаємо таке саме, як у попередньої СТА — 5.

Межа у кнопки відсутня, для неї вибираємо значення 0, так само як і для зовнішніх відступів блоку. Для внутрішніх виберемо однакове значення з усіх боків – 15.

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

Наші картки товару мають бути такого вигляду: ліворуч — зображення, праворуч — текст, і під ним кнопка СТА. Щоб створити таку структуру, перейдемо до готових модулів і виберемо подібний варіант:

Цей модуль, окрім зображення, контейнерів для тексту та для кнопки, має два роздільники. Вони необхідні, щоб регулювати за висотою праву частину структури відповідно до розміру картинки. При цьому можна не використовувати зайві відступи в контейнерах, оскільки в мобільній версії вони можуть виглядати не дуже привабливо. Верхній роздільник видаляємо й залишаємо той, який знаходиться між текстом і кнопкою. Нижче ми детальніше розглянемо, як працювати з роздільником у такій структурі.

Відредагуємо зовнішній вигляд структури. Перейдемо до меню редактора ліворуч і видалимо відступ між контейнерами, а власне для контейнерів задамо розмір 280.

У контейнер ліворуч завантажуємо зображення і вибираємо опцію "Розтягнути по ширині" — таким чином картинка адаптується до розміру блоку.

Праворуч матимемо одне під одним три контейнери для тексту, роздільник і кнопку. У першому контейнері прописуємо назву продукту і налаштовуємо зовнішній вигляд:

• колір шрифту — #ffffff;

• розмір шрифту: для заголовка — 20px, основний текст — 16px;

• колір фону — #353334;

• вирівнювання — по лівому краю;

• відступи — 10 з кожного боку.

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

Для опису старої ціни задамо інші значення за допомогою панелі редагування тексту:

• кегль — 18 px;

• колір — #dddddd;

• вирівнювання — по центру;

• закреслений шрифт.

Щоб оформити СТА, слід скопіювати кнопку з хедера, вставити її в потрібний блок і трохи змінити. Для цього виділіть контейнер, наведіть курсор на трикрапку, що з'явиться праворуч, і використовуйте кнопки "Дублювати" і "Перемістити".

Далі редагуємо такі параметри:

• розмір шрифту — 18px;

• внутрішні відступи — по 20 з кожного боку;

• зовнішні відступи: ліворуч і праворуч — 0, зверху — 10, знизу — 15.

Коли блоки з кнопкою і текстом будуть готові, повернемося до налаштувань роздільника: він допоможе нам зробити праву й ліву частини структури однаковими за висотою. Для цього увімкнемо опцію "Динамічний роздільник" у меню ліворуч, що дозволить змінювати розмір вручну безпосередньо в блоці. У нашому випадку встановлюємо розмір 43рх, а також активуємо приховування елемента на мобільних пристроях:

Ми отримали готову картку із пропозицією придбати продукт за привабливою ціною.

Легко, немов Ctrl+C, Ctrl+V

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

У результаті отримаємо три модулі з промоакціями для головних сервісів Designmodo.

Далі знову йде блок із текстом, у якому ми повідомляємо підписникам, що акційна пропозиція поширюється також на інші продукти компанії, нагадуємо їм промокод і знову акцентуємо увагу на розмірі вигоди. Кнопка СТА закликає ознайомитися з деталями докладніше.

Для створення цих двох елементів листа просто продублюємо створену вище структуру з текстом і кнопкою, перетягнемо її до потрібної частини листа і змінимо текст.

І знову про найголовніше

Для тих, хто доскролив листа до кінця і раптом забув, про що читав :), нагадаємо основне: чарівне слово промокоду і розмір знижки. А щоб підписник скоріше дозрів до швидкого прийняття рішення, установимо таймер зі зворотним відліком, який немовби нагадуватиме: "Поспішай, інакше магія скоро мине і можливість скористатися вигідною пропозицією буде упущено".

Серед багатьох готових модулів у eSputnik вже є банер, схожий на той, який ми задумали.

Вставляємо модуль у лист, прибираємо зайвий контейнер з кнопкою — замість нього під таймером будуть розміщені два блоки "Текст". Перший будемо використовувати для уточнення деталей акційної пропозиції, а в другому розмістимо яскравий текст із розміром знижки. Над таймером також будуть два блоки з текстом: один для заклику до дії, інший для промокоду. Перейдемо до оформлення однієї з найефектніших частин листа.

Оскільки ми використовували готовий модуль, він уже має свій фоновий колір, тому ми змінюємо колір структури і контейнера:

У блоці із закликом "Use this Coupon Code" використовуємо ті самі параметри, що й для заголовків у попередніх блоках із текстом:

• кегль — 40 px;

• колір — #ffffff;

• вирівнювання — по центру.

Також виставимо значення відступів для контейнера:

Для тексту промокоду "BLACK" у наступному блоці виставляємо такі значення:

• кегль — 60px;

• колір — #f833ac;

• вирівнювання — по центру;

• жирний шрифт;

• розміри відступів:

Тепер ми можемо скопіювати цей блок і перетягнути його до нижньої частини структури, замінивши текст на "60% Off".

Як встановити таймер у листі? У нашому блозі описані різноманітні способи, але ми виберемо доволі простий шлях — сервіс Sendtric.

Цей сервіс — безкоштовний, він не потребує реєстрації, не накладає водяні знаки. Тут ви можете вказати колір фону й цифр таймера, а також мову й часовий пояс. Отже, виберіть потрібні параметри, встановіть дату закінчення акційної пропозиції та натисніть кнопку Generate.

У віконці у вас з'явиться HTML-код, з якого треба скопіювати частину, що містить посилання, — саме її ми і вставимо в лист. Для цього в нашому модулі замінюємо блок із циферблатом на блок "Картинка":

У меню вибору зображення застосуйте пункт "Посилання на зовнішній ресурс" і вставте скопійовану частину коду.

У налаштуваннях для зображення виставляємо вирівнювання по центру і розмір 400:

Як підсумок отримаємо в листі таймер, який в режимі реального часу показуватиме час до закінчення акції:

Залишилося додати невеликий уточнюючий текст щодо умов акції: "*Ця пропозиція є дійсною протягом обмеженого часу. Вона не може об’єднуватися з іншими пропозиціями. Доступна тільки для першого вибраного періоду":

• кегль — 12px;

• колір — #ffffff;

• вирівнювання — по центру;

• значення відступів:

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

Футер

У футері нашого листа розмістимо такі елементи:

• лого компанії;

• невеличкий дружній текст;

• посилання на веб-версію листа;

• посилання на відписку;

• посилання, за яким можна змінити свої вподобання щодо розсилки;

• посилання на соціальні мережі.

Для створення футера виберемо структуру з трьома контейнерами. У першому розміщуємо блоки "Картинка" і "Текст":

 

Додаємо логотип до блоку з картинкою, а в блоці "Текст" вставляємо підпис: "Цей лист з любов’ю створений спеціально для вас". Параметри шрифту будуть аналогічні використовуваним у хедері:

• колір шрифту — #ffffff;

• розмір — 14рх;

• міжрядковий інтервал — четвертий пункт;

• вирівнювання — по лівому краю;

• відступ зверху — 10, з інших боків — 0.

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

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

• колір шрифту — #f833ac,

• розмір — 14рх;

• міжрядковий інтервал — четвертий пункт;

• вирівнювання — по лівому краю;

• жирне накреслення;

• відступ з усіх боків — 0.

Не забудьте для кожного з цих пунктів проставити значення URL, на які вони вестимуть.

В останньому контейнері розмістимо кнопки соцмереж, використовуючи блок із відповідною назвою:

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

Щоб додати нову соцмережу, натисніть кнопку "+" та у випадаючому меню виберіть необхідну іконку; щоб видалити непотрібну, натисніть значок кошика поруч із назвою:

У нас є шість посилань на соцмережі, тож ми розмістимо в контейнері два блоки "Соцмережі "з трьома іконками в кожному. Вибравши потрібні іконки, візуально оцінюємо їхнє розміщення і встановлюємо відступи:

• відступи між іконками — 20;

• вирівнювання — по правому краю;

• відступ знизу для верхнього блоку — 10;

• відступ зверху для нижнього блоку — 10.

Привабливий лист до Black Friday готовий. Як референс ми взяли email-розсилку до Чорної п'ятниці від Designmodo

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

Ось так легко й швидко можна створювати яскраві вражаючі листи за допомогою інструментів редактора eSputnik. Використовуйте власну уяву, креативні ідеї та ефективні механіки, щоб у Чорну п'ятницю ваш лист був найяскравішим з усіх.