Демо-редактор Увійти →
Дизайн Структура Шаблон
~ 10 хв читати
52179 перегляди
оцінити
04 серпня 2019

Різновиди банерів: як створити банер у Stripo Email Builder за лічені хвилини

Stripo / Blog / Різновиди банерів: як створити банер у Stripo Email Builder за лічені хвилини

Важко уявити сучасну промо-розсилку без банера. Ви бачили тисячі листів — і з хорошими банерами, і з поганими.

Як відомо, банер — це найперший елемент, який бачать наші одержувачі. Тож він має бути помітним, привабливим і емоційним.

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

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

Як зазвичай виглядає процес створення банера? Спочатку нам треба знайти відповідне зображення або зробити фото, потім відредагувати його у Photoshop, написати текст на банері, після чого експортувати усе це до конструктора шаблонів, яким ми користуємось, і перевірити, чи все підходить під дизайн листа. Якщо щось пішло не так і ми хочемо зробити зміни, навіть мінімальні — поставити кому або зменшити розмір шрифту — доводиться повертатися у Photoshop і редагувати банер, а потім знову імпортувати його до шаблону. Так, безпосередній доступ до Photoshop — це досить корисно, але все одно такий процес складний, трудомісткий і пов’язаний з багатьма незручностями.

Тоді як Stripo дозволяє менш ніж за 10 хвилин зробити з нуля складний багатошаровий банер безпосередньо в редакторі.

Якщо ви виберете для майбутніх кампаній будь-який із наших готових шаблонів, то Stripo розділить банер на шари. Ви можете редагувати та оптимізувати кожен шар окремо, не виходячи з конструктора. Це заощадить для вас багато годин часу. Вбудований фоторедактор, можливість розміщення тексту над зображенням, безліч декоративних шрифтів, багата кольорова палітра і банк з тисячами доступних зображень — всі ці опції призначені для полегшення вашої роботи.

Коли ви створюєте банер, вам потрібне чітке уявлення, як він має виглядати й чого саме ви хочете.

Давайте подивимось на деякі найпопулярніші типи банерів, щоб зрозуміти, як легко реалізувати ваші ідеї за допомогою Stripo.

Як створити банер у Stripo

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

Перетягування блоку банера в лист

Перший етап — перетягнути блок банера у ваш шаблон.

Блоки-БанерВи можете помістити його в будь-яке місце шаблона. Але типова позиція банера — одразу після заголовку (лого) вашого листа.

Завантаження зображень

У Stripo є чотири способи додавання зображень у лист:

  1. перетягнути зображення безпосередньо в потрібне місце — для цього просто перемістіть зображення в цю область або клікніть на неї, щоб завантажити зображення з вашого комп'ютера;
  2. додати зовнішнє посилання — вставте посилання на зображення, яке закінчується на .jpg, .png, .gif;
  3. скористатися картинками з нашого банку — натисніть іконку «банк» і виберіть зображення, яке вам сподобалося, із тисяч доступних у нас безкоштовних зображень;
  4. скористатися будь-якою з ваших попередніх кампаній — клікніть значок «email» і виберіть будь-яке зображення, яке ви використовували раніше.

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

Додавання тексту поверх зображень

На панелі налаштувань є іконка «текст». Вона знаходиться безпосередньо над HTML-шаблоном, з яким ви працюєте.

  • клікніть на неї для активації. Помістіть текстову область у будь-яке місце на зображенні банера;

 Написать текст на банере

  • попрацюйте з дизайном тексту — виділіть потрібну частину і налаштуйте тип шрифту, розмір, колір та ін.;

 шрифту для текста на банері

Важливо зазначити:

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

Завантаження додаткових зображень

Після завантаження основного зображення увімкніть опцію «Додаткове зображення» на панелі налаштувань. Зробивши це, завантажуйте зображення будь-яким зі способів з розділу «Завантаження зображень».

 Додаткове зображення

Важливо зазначити:

Щоб додати до банера будь-яке додаткове зображення з однаковими відступами як мінімум з трьох сторін, вам знадобиться наша опція «Липка зона».

Редактор липких зон Stripo

Примітка: вам треба просто вставити додаткове зображення, і система порекомендує, куди помістити лого. Утримуйте кнопку Shift під час перетягування цього зображення на банері. Щойно ви виберете місце для зображення, його буде виділено суцільною лінією. Просто продовжуйте утримувати Shift — функція «Липка зона» вирівняє зображення за трьома сторонами. Тож ваш лист матиме більш акуратний вигляд.

Основні типи банерів:

1. Банер з одним зображенням і вашою пропозицією.

2. Банер з двома зображеннями.

3. Банер у рамці.

4. Банер з кнопкою CTA.

5. Банер з фотоколажами.

6. Банер з прозорими додатковими зображеннями.

7. GIF-анімований банер.

8. Банер з відео.

9. Банер з AMP-каруселлю.

1. Банер з одним зображенням і вашою пропозицією

Це найпопулярніший різновид банерів для промо-розсилок.

Найбільш часто використовуваний тип банера

Він використовується для оголошень про розпродаж або реклами одного товару. Це залежить від ваших потреб.

Бренди часто додають до таких банерів таймери зворотного відліку.

2. Банер з двома зображеннями

Банер із двома зображеннями

Яскраві зображення ускладнюють правильний вибір кольору шрифту для тексту над банером. У такій ситуації доречно використовувати додаткове порожнє зображення — цього буде цілком достатньо. У нашому прикладі M&M's закрили половину банера додатковою картинкою і написали поверх неї свій рекламний текст.

3. Банер у рамці

Рамки використовуються, щоб розділити два зображення всередині банера або зробити акцент на заклику до дії.

Можна використовувати нашу рамку або завантажити свою. Будь-який фоторедактор пропонує широкий вибір рамок.

Додаючи рамки, ви робите розсилки ще більше унікальними.

Зверніть увагу, що при завантаженні зображення, створеного у сторонньому інструменті, ви не зможете вносити до нього зміни у нашому (і в будь-якому іншому) конструкторі шаблонів.

Рамки завантажуються так само як і додаткові зображення.

Будь ласка, оцініть ці два банери: перший без рамки, другий — з чорною рамкою.

Банер-без-рамки

(банер без рамки)

Банер з рамкою

(банер з рамкою)

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

4. Банер із кнопкою CTA

Банер із зображенням-над-ним

Навряд чи ви знайдете лист від Forbes, у якому не було б кнопки заклику до дії поверх банера.

Але чи дійсно Forbes додають справжню кнопку? Ні. Вони завантажують зображення кнопки як додаткове — і прикріплюють до банера посилання.

Жодної магії, все дуже просто! Але все одно листи від Forbes мають класний вигляд.

5. Банер з фотоколажами

Колаж-банер_Brighton

Тут доведеться трохи попрацювати.

Цей банер складається з трьох структур (рядків) із трьома колонками в кожній.

Оформлення-Блоки-Структури

Просто додайте їх до шаблона, перетягніть блок «Зображення» у кожний контейнер і завантажте зображення в кожну колонку/контейнер окремо. Відредагуйте зображення у нашому вбудованому фоторедакторі, щоб повернути їх.

 Редагувати зображенняА замість середнього зображення в другому рядку вставте свій текст. Готово :)

6. Банер з прозорими додатковими зображеннями

Дизайн будь-якої розсилки — це політ фантазії. Ви можете використовувати що завгодно. А ми ще порекомендуємо сезонні зображення. Це додасть розсилці дух свята.

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

Сніжинка

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

Подивіться на ці два приклади та порівняйте їх:

без додаткових зображень

(без додаткових зображень, але з пропозицією поверх зображення банера)

Із додатковим зображенням

(із додатковими зображеннями і пропозицією)

Прочитати речення у першому прикладі практично неможливо — текст накладається на товари, які рекламує компанія.

Але невеличка деталь у другому прикладі, а саме прозорий шар, полегшує читання. Як «бонус» ви при цьому бачите товари.

7. GIF-анімований банер

GIF-анімовані банери — це окрема складна тема, і ми вже обговорювали, чому їх варто використовувати в розсилках.

GIF-анімації допоможуть привернути увагу до вашої вигідної пропозиції та показати більше товарів на одному екрані.

Важливо зазначити:

Щоб створити анімований банер, вам буде треба перетягнути до шаблону основний блок «Зображення». Потім завантажте GIF-файли так само, як ви завантажуєте зображення. Але поверх них неможливо написати текст.

8. Банер з відео

Відео-банери

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

Відео, розміщене на першому скроллі екрану, виконує функцію банера.

Використовуйте їх для своїх кампаній, якщо це потрібно. У статті «Як додати відео до електронного листа» ми показуємо, як вбудувати відео за допомогою Stripo.

9. Банер з AMP-каруселлю

Спробувати Stripo

Цей тип банера по суті є компіляцією з 3-16 банерів, розміщених на одному екрані. А необхідність натискати кнопку прокрутки слайдів допоможе краще залучати цільову аудиторію і взаємодіяти з нею.

Технологія AMP — нове слово в email-маркетингу. Бренди зараз щойно починають з нею знайомитися, але цього року на всіх конференціях, присвячених email-розсилкам і цифровому маркетингу, активно обговорюється AMP for Emails. Це означає, що AMP дуже скоро отримає широкого визнання.

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

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

І всі ваші підписники, які користуються Gmail і Mail.ru (а скоро і користувачі Outlook і Yahoo), побачать ці банери.

Тестуйте листи

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

На завершення

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

Vishnu Goyal 9 місяців тому

Thanks Rolenko for these great ideas on image-based banners. I'd love to know your thoughts on simple text-based banners and experiment with the same in my own emails. I know banner with images is a norm but I am looking forward to create just text-based emailers [writing-focused] and I think text-only banners will help.

Ганна Кузнєцова прокоментував Vishnu Goyal 9 місяців тому

Hello, Vishnu Goyal. Thank you for your question. Could you clarify what exactly you mean? Conversion, or ways to build those banners? Or are they easy/appropriate to use? Thank you... As for the way to build those banners, there are lots of tools on the web. As for their efficiency and conversion, we can't really say anything. Because, in order to provide you with accurate data on this subject, we'd need to run an A/B test a few times. But we prefer HTML and AMP HTML emails for our campaigns. So, we did not run those tests. Also, we did not find much info on this subject. But we wish you the best of luck and hope you'll find an answer to your question.

Вас також може зацікавити

Попередні статті Наступні статті
10 листопада · 8 хв читати
Як створити email-шаблон для Outlook за допомогою Stripo

За допомогою Stripo, що дозволяє експортувати листи до Outlook Apps (в macOS і Windows) та веб-версії Outlook, відправка витончених HTML листів через ваш улюблений email-клієнт тепер стала ще простіша! Додаткові інструменти не потрібні. У цій статті ми покажемо, як експортувати HTML-шаблони до Outlook лише двома кліками. Приєднатися до Stripo Вступ Донедавна було дуже складно, якщо не сказати неможливо, здійснити HTML-розсилку через Outlook, щоб повідомлення при цьому відображалися коректно. Але Stripo знайшли вихід. Тепер ви маєте можливість створювати HTML-шаблони для Outlook...

Маркетинг Шаблон How-to
13 жовтня · 14 хв читати
Запрошення на вебінари: приклади листів і найкращі практики

Чи знаєте ви, що середня відвідуваність вебінару становить 40% від усіх зареєстрованих учасників включно з тими, хто дивиться відео у записі? Хоча деяким компаніям вдається досягти показника 60%. У цій статті ми поділимося найбільш вдалими прикладами листів-запрошень на вебінари, а також найкращими практиками, що допоможуть вам залучити максимальну кількість відвідувачів. Використовуйте повністю адаптивні професійні шаблони запрошень на вебінари, щоб зробити email-кампанії більш ефективними. Використати Найкращі практики листів-запрошень на вебінари Виходячи з результатів наших досліджень та особистого досвіду, я хотіла б...

Дизайн Маркетинг Структура Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу