У цій статті ми розповімо про всі тонкощі створення банерів для листів. Ви дізнаєтеся про типи банерів для листів, ідеальні їх розміри та про те, як прикрасити email-дизайн за допомогою банерів у Stripo.
Банери — це чудовий інструмент, який допоможе зробити листи більш систематизованими, привернути увагу одержувачів до важливих елементів повідомлення і вирізнитися з-поміж великої кількості листів у пошті читачів. Однак неправильний розмір банера може зламати структуру контенту і звести нанівець усі ваші зусилля.
У цій статті ви дізнаєтеся більше про ідеальну ширину та висоту зображення банера, а також про те, що потрібно враховувати під час його створення для email-маркетингових кампаній. Ми також дамо кілька корисних порад, як створити привабливий банер у Stripo за кілька хвилин.
Що таке банер у листі?
Це високоякісне зображення, розташоване у верхній частині листа, щоб підкреслити його основну мету і тон. На банерних зображеннях можуть бути назва бренду, логотип компанії, заклик до дії, пропозиція і фото продуктів. На банер можна додати короткі і зрозумілі тексти, наприклад «Знижка 15% на вибрані товари» або «Флеш-розпродаж на вихідних», щоб максимально чітко донести ідею листа.
(Джерело: шаблон Stripo)
Важливість розміру банера в листі
Зображення банера передає унікальну ціннісну пропозицію (UVP, unique value proposition) і компоненти, пов'язані з брендом, як-от логотип, CTA, корпоративна кольорова гама і графіка. Ці функції відрізняють вас від сотень промолистів, які завалюють пошту одержувачів, і мотивують підписників відкривати і читати саме ваші повідомлення.
Невідповідний розмір банера в листі може зіпсувати всю структуру контенту. Занадто широкий банер змусить поштовий клієнт увімкнути функцію горизонтального скролінгу, а занадто маленький банер змусить одержувачів мружити очі, щоб розгледіти контент.
Ідеальні розміри шаблону листа
Найбільш поширений розмір банера для листа становить 600-700 пікселів за шириною для десктопів, що забезпечує правильне відображення на всіх пристроях. Водночас висота банера часто становить 350-500 пікселів.
Дотримуючись розмірів банерів для листів, які ми навели нижче, ви зможете створювати візуально привабливий і адаптивний дизайн для екранів ПК і мобільних пристроїв, уникаючи помилок під час вибору розміру банера.
У розсилці можна використовувати різні типи банерів, щоб досягти різних цілей. Зараз ми обговоримо ідеальний розмір для адаптивних банерів, хедерів і футерів у тілі листа.
Розмір банера для хедера листа
Яскраве і примітне зображення в хедері мотивує читачів продовжувати скролінг. У хедері можна додати логотип компанії, короткий текст із поясненням основної мети листа і CTA. Ми рекомендуємо обмежити розмір банера в листі шириною 600-700 пікселів і висотою 90-200 пікселів для комп'ютерів.
На мобільних пристроях під час створення банерів для листів слід використовувати сучасні email-редактори, які підтримують адаптивні зображення. Адаптивний підхід дозволяє зображенню автоматично змінювати свій розмір залежно від розміру екрану, на якому воно відображається. Адаптивні зображення позбавлять вас від головного болю, оскільки ви не можете точно знати, на якому мобільному пристрої буде відкрито лист, тому головна мета — забезпечити однаковий досвід перегляду листів, і адаптивні зображення — чудовий інструмент для цієї задачі.
В інших випадках можна слідувати наведеній вище пораді Романа.
Ось приклад заголовка листа розміром 650 пікселів (ширина) і 200 пікселів (висота):
Розмір банера для тіла листа
Банер, який запам'ятовується в тексті листа, може передати основну ідею повідомлення, не перевантажуючи читачів довгими абзацами тексту. Тут можна розкрити більше деталей про вашу пропозицію і пояснити, які проблеми клієнт може вирішити, скориставшись нею.
Для екранів ПК ми рекомендуємо створювати банер шириною 650-700 пікселів і висотою 350-500 пікселів. На мобільних пристроях ситуація аналогічна. Враховуйте популярні розміри екранів, як ми згадували раніше, або використовуйте сучасні редактори листів з функціями, що дозволяють створювати динамічні зображення, які автоматично підлаштовуються під розмір екрану.
(Джерело: шаблон Stripo)
Розмір банера для футера листа
Доданий у нижній частині розсилки футер може містити контактні дані вашої організації для будь-яких запитів, посилання на акаунти в соцмережах та опцію «Відписатися». Ці дані допоможуть уникнути потрапляння в папку «Спам» і гарантують, що лист надійде на пошту адресатів.
Ширина футера листа повинна становити 650-700 пікселів, а висота — до 150 пікселів для екранів ПК. Для мобільних пристроїв рекомендуємо дотримуватися наших порад щодо використання заздалегідь визначених розмірів зображень, які відповідають найпопулярнішим розмірам екранів, або створювати листи в редакторах, що підтримують адаптивні зображення, щоб спростити собі життя як email-маркетологу. Подивіться наш приклад футера листа (ширина 700 пікселів, висота 150 пікселів):
(Джерело: шаблон Stripo)
Розмір банера для підпису листа
Підписи також часто додаються у нижній частині листів і можуть бути створені за допомогою банерів. Розміри банера для підпису практично ті самі, що і для звичайного футера, тому для десктопної версії листа можна задати ширину від 650 до 700 пікселів і висоту до 150 пікселів.
(Джерело: шаблон Stripo)
Щодо мобільних пристроїв, використовуйте заздалегідь визначені розміри зображень або адаптивний підхід до зображень, якщо email-редактор підтримує аналогічні функції, які дозволяють створювати частини листів з динамічними зображеннями.
Що потрібно враховувати під час створення банера для листа
Тепер, коли ви знаєте все про ідеальні розміри для різних типів банерів у листах, давайте розглянемо ще кілька важливих моментів, які слід враховувати в процесі дизайну, щоб зробити банери привабливими:
Розмір кнопки
Кнопки на банерах у листах повинні бути досить помітними, тому дуже важливо, щоб вони не зливалися з фоновим зображенням та іншими елементами повідомлення.
(Джерело: шаблон Stripo)
Текст на зображенні банера
Типовий банер листа складається з зображення і накладеного на нього тексту. Тут дуже важливо правильно підібрати шрифти і поєднання кольорів, щоб текст був читабельним і яскравим. Наприклад, текст, набраний коричневим шрифтом на чорному зображенні, важко розгледіти. Те саме стосується світлих кольорів: білий текст на світло-сірому фоні — погана ідея.
Ми рекомендуємо поекспериментувати зі шрифтами, кольорами, розмірами та розташуванням тексту, щоб він був помітним і читабельним. На зображеннях нижче видно, що банер з нечитабельним шрифтом і сірим текстом на коричневому фоновому зображенні виглядає неестетично, а перший варіант з більш читабельним шрифтом і контрастним кольором набагато легше помітити.
Розмір зображення
Також дуже важливо забезпечити високу швидкість завантаження. Що менше часу потрібно для завантаження листа, то краще. Обов'язково стискайте зображення банерів перед додаванням їх у листи, щоб не збільшувати розмір файлу банера.
Працюючи на платформі Stripo, ви можете автоматично стискати всі додані зображення. Просто увімкніть функцію «Стиснення зображень» і виберіть потрібний відсоток стиснення в налаштуваннях робочого простору.
Оптимізація пристроїв
Банери в листах зі святковими зображеннями вимагають оптимізації для різних пристроїв, щоб гарантувати доступність і ефективність шаблону на всіх гаджетах. У святковий сезон, коли люди поспішають, вони здебільшого використовують мобільні пристрої чи планшети. І тут дуже важливо переконатися, що шаблон оптимізовано разом з усіма кнопками CTA та ілюстраціями.
Брендинг
Створивши святковий банер для листа з брендованими зображеннями, можна підвищити впізнаваність бренду і залучити нових клієнтів, що дуже важливо для бізнесу. Переконайтеся, що святковий банер виглядає гармонійно з іншими матеріалами бренду; додайте брендований шаблон і налаштуйте дизайн банера відповідно до візуальної ідентичності бренду. Завдяки цьому святкові email-кампанії будуть легко впізнавані. Логотип, типографіка і палітра кольорів допомагають споживачам і компаніям зміцнювати довіру і лояльність, що призводить до підвищення залученості, зростання продажів і ROI.
Створення посилань
Переконайтеся, що зображення святкового банера містить посилання на потрібний лендинг! Додати посилання до будь-якого зображення дуже просто. Наприклад, посилання на сторінку продукту може бути чудовим вибором, якщо ви просуваєте конкретний товар. Одержувачі клікають і взаємодіють із контентом безпосередньо. Завдяки цьому підвищується CTR і конверсія безпосередньо в цьому ж святковому банері.
Створення банера в Stripo
У нашому редакторі можна почати створювати банери для листів за лічені хвилини. Ми підібрали кілька порад, які спростять цей процес:
Підготовка банера
Для початку потрібно додати банер у шаблон листа. У нас є спеціальний блок «Банер», який потрібно перетягнути в шаблон.
Після цього клікніть на доданий банер, щоб відкрити це меню. Перш ніж налаштовувати розміри та інші параметри, потрібно прикріпити зображення банера для листа. Є кілька варіантів: можна просто завантажити зображення зі свого пристрою або використати стокові картинки, а можна згенерувати унікальну ілюстрацію за допомогою нашої функції AI-зображення.
У нашому прикладі вибрано опцію «Фотосток». Все, що потрібно зробити, — це клікнути на потрібну картинку (якщо ви одразу не бачите відповідних зображень для своїх дизайнерських ідей, введіть пошуковий запит у відповідне поле), і вона автоматично прикріпиться до банера.
Після цього можна перейти до налаштування параметрів банера листа.
Зміна ширини та висоти для десктопу
Щоб вибрати правильний розмір банера для листа, перейдіть на вкладку «Налаштування». У розділі «Розмір» можна вибрати потрібні параметри.
Для налаштування правильного розміру банера використовуються кілька кнопок (зліва направо):
- підганяє зображення під розмір контейнера;
- відновлює фактичний розмір зображення;
- режим налаштування ширини;
- режим налаштування висоти;
- кнопки налаштування розміру (працюють окремо для режимів налаштування ширини та висоти).
Просто вкажіть потрібні розміри за допомогою цих кнопок, і все готово.
Також можна визначити форму обрізки у відповідному розділі, вибравши один із попередньо встановлених варіантів орієнтації (вертикальний чи горизонтальний)
Зміна ширини та висоти для мобільних екранів
Щоб банер листа правильно відображався на екранах мобільних пристроїв, клікніть на опцію «Мобільний перегляд», щоб відкрити налаштування мобільної версії в Stripo.
За замовчуванням у нас увімкнена опція «Адаптивність зображення», тому в більшості випадків нічого робити не потрібно, оскільки ця опція гарантує, що зображення банера автоматично підлаштується під розміри екрану.
Цю опцію можна вимкнути, але ми не рекомендуємо цього робити, оскільки після вимкнення зображення банера залишатиметься статичним незалежно від роздільної здатності екрану, на якому воно відображається. Це може призвести до поганого відображення зображень і контенту на банері.
Зміна форми обрізки аналогічна діям у версії для десктопів.
Додавання зображень і посилань
Для додавання кнопки на банер у нас є опція, яка дозволяє розташувати ще одне зображення на банері. Можна комбінувати відповідне фонове зображення з іншим, що дозволяє створювати унікальний дизайн для листів чи акцентувати увагу на банері.
Для цього клікніть на опцію «Зображення» в налаштуваннях блоку «Банер».
Ви побачите те саме меню для додавання зображення, що і раніше для всього банера. Просто виберіть потрібний варіант для додавання зображення, щоб продовжити.
Після додавання зображення з'явиться в центрі банера, а ви побачите маленьке меню з опціями для налаштування прозорості зображення, його повороту, відображення в потрібному напрямку і застосування візуальних фільтрів.
Для зміни розміру цього додаткового зображення необхідно перетягнути кути рамки, і зображення змінить свій розмір. Також можна перетягувати зображення в межах контурів банера, клікнувши на нього і перетягнувши, і навіть обертати його власноруч, торкаючись точки над рамкою.
Ваше зображення з CTA привертає увагу. Тепер потрібно зробити банер клікабельним. Для цього достатньо вставити посилання у відповідне поле, і після додавання посилання весь банер перетвориться на одну велику кнопку CTA, яка спрямує одержувача на потрібну сторінку.
Додавання тексту і його налаштування
Якщо вам потрібно більше можливостей для оформлення банера, можна додати на нього текст. Клікніть на опцію «Текст» над банером.
Текстовий вузол автоматично з'явиться в центрі банера, і ви побачите вкладку з різними варіантами тексту.
Щоб ввести текст, просто двічі клікніть на текстовому вузлі, виберіть текст за замовчуванням і введіть новий.
Що стосується налаштувань, то їх тут є цілий набір. Можна власноруч змінити положення, розмір і поворот, перетягуючи кути рамки вузла «Текст» або перетягуючи весь вузол, як ви робили з зображенням.
Щодо самого тексту можна:
- вибрати шрифт тексту, його розмір і колір;
- вибрати вирівнювання тексту;
- налаштувати стилі, як-от жирний, курсив, підкреслення або закреслення;
- змінити регістр букв на верхній або нижній;
- налаштувати прозорість, поворот і відобразити текст потрібним чином.
Ось як виглядає наш текстовий вузол після застосування більшості опцій. Легко адаптуйте текст під свої потреби в email-дизайні.
На завершення
Правильний розмір банера в листі дозволить зберегти структуру повідомлення і привернути увагу підписників до його основних елементів. Тепер, коли ви знаєте, які ширина і висота банера в листі є ідеальними, і розумієте, як створити його за допомогою Stripo, у вас є все необхідне, щоб зробити майбутню кампанію успішною!