Як створити лист у Stripo. Мануал від А до Я

Коли ви вперше відкриваєте Stripo, то можете почуватися трохи розгубленим і не знати, з чого почати. Адже цей важливий лист потрібно підготувати й надіслати найближчим часом, бо термін дедлайн незабаром настане. Тож саме час разом з нами ознайомитися з основними функціями Stripo, де ми розповімо, як створити власний лист від А до Я.

Як перейти до створення листа

Існує три способи створення власного шаблону листа в Stripo:

1. Виберіть порожній шаблон, щоб мати повну свободу при створенні власної структури листа на основі базових блоків і модулів (детальніше про блоки та модулі — далі).
2. Виберіть базові шаблони, щоб закласти фундамент і отримати загальне уявлення про те, як може виглядати майбутній шаблон листа.
3. Ознайомтеся з нашими 1650 готовими шаблонами листів, виберіть той, що вам сподобався, і відредагуйте його.

Вибрати один із цих варіантів можна, просто клікнувши на потрібний пункт на екрані «Листи».

Вибір опції «Empty Template»

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

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

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

Вибір опції «Basic Templates»

Після кліку на цю опцію ви перейдете на відповідний екран, де зможете вибрати один з базових варіантів шаблонів, зокрема «Empty Template» та «Master Template», а також різні компонування шаблонів із категорій, що широко використовуються в email-маркетингу («Promo», «Trigger», «Info» тощо). Після кліку на будь-який шаблон відкриється редактор, де можна почати роботу над вибраним шаблоном.

Опція HTML-шаблону

Ми виокремили цей варіант, оскільки він призначений для тих, хто добре розбирається в технологіях і вміє верстати листи. Головна особливість цього варіанту полягає в тому, що після кліку на нього автоматично відкриється редактор коду.

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

Вибір із 1650+ готових шаблонів

Якщо лист потрібно підготувати «на вчора» а на розробку концепції немає часу, завжди можна скористатися нашою величезною бібліотекою готових шаблонів, створених штатною командою дизайнерів. Тут є шаблони для будь-якої нагоди, індустрії або з будь-яким функціоналом, необхідним для досягнення поставленої мети в контексті email-маркетингу. До ваших послуг як безплатні, так і преміум-шаблони: достатньо клікнути на один з них, щоб перейти до редактора та внести необхідні зміни.

1. Загальні стилі

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

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

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

• «Загальні стилі та налаштування» — це головний центр налаштувань, який впливає на такі аспекти дизайну, як фон, вирівнювання, напрямок тексту справа наліво тощо;
• «Стилі смуг» дають змогу налаштувати загальні параметри, які застосовуватимуться до всіх смуг (заголовків, смуг контенту, футерів тощо), що створюються для шаблону, наприклад, сімейство шрифтів, інтервали, розміри шрифтів та багато іншого;
• «Стилі заголовків» мають ті самі параметри, що й «Стилі смуг», з тією лише різницею, що вони застосовуються лише до заголовків, дозволяючи урізноманітнити їхній вигляд у загальному дизайні листа (за потреби);
• «Стилі кнопок» містять загальні параметри, які застосовуватимуться до всіх кнопок шаблону, зокрема кольори кнопок, відступи, розміри кнопок, шрифти та багато іншого.

• Загальні стилі та налаштування

У цьому розділі можна налаштувати основні правила стилю, які застосовуватимуться до всього листа, і це перше, що слід налаштувати під час створення листа. Насамперед потрібно вибрати колір фону (або фонове зображення) для всього листа. 

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

Також можна налаштувати такі додаткові параметри, як підкреслення посилань, зробити дизайн адаптивним (текст автоматично підлаштовуватиметься під розмір екрану і відображатиметься у вигляді однієї колонки на невеликих екранах), застосувати до всього контенту правила RTL, а також налаштувати списки за допомогою опції «Користувацькі стилі списків».

І не забудьте про загальні зовнішні та внутрішні відступи, які також потрібно налаштувати. Важливим моментом є «Стилі за замовчуванням», які визначають, чи потрібні вам наші CSS-стилі за замовчуванням, чи краще використовувати власні CSS-стилі, щоб мати повну свободу в оформленні.

Фон вмісту листа — це фон, який застосовується до всієї області листа. При відображенні на десктопних пристроях він охоплює всі області повідомлення, а на мобільних пристроях приховується (червоний фон на прикладі нижче). Крім того, якщо кольори не дозволяють втілити задуманий дизайн, можна використовувати зображення в якості фону.

За замовчуванням ширина листа становить 600 пікселів. Наразі це найпоширеніший розмір.

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

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

• Налаштування стилів для смуг

Клікніть на «Стилі смуг», щоб відкрити спеціальне підменю для редагування загальних стилів смуг.

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

• Налаштування заголовків

Клікніть на «Стилі заголовків», щоб відкрити це невелике меню, в якому можна налаштувати всі необхідні загальні параметри для заголовків. Це меню дещо простіше, ніж попереднє, і всі налаштування застосовуються до всіх створюваних заголовків.

• Налаштування кнопок

І наостанок, «Стилі кнопок». Клікніть на цей розділ, щоб відкрити його та налаштувати потрібні стилі для всіх кнопок, які додаються та створюються для шаблону листа.

2. Створення хедера

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

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

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

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

• Як додати логотип у лист в Stripo

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

Після кліку відкриється меню «Галерея зображень», де потрібно додати власне зображення або вибрати одне зі стокових / готових зображень, створених нашими дизайнерами, з різних категорій («Сезонні», «Декоративні», «Фотосток» тощо).

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

Якщо ви хочете встановити фон для смуги, на якій розташовані логотип і меню, переконайтеся, що використовується URL-адреса зображення логотипу у форматі PNG із прозорим фоном.

Навіщо додавати посилання на логотип? Чимало користувачів клікають на нього, щоб швидше перейти на сайт.

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

• Як додати меню в лист у Stripo

Для додавання меню в хедер просто перетягніть блок «Меню» у контейнер, розташований безпосередньо поруч із логотипом.

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

Для початку виберіть тип меню: воно може складатися лише з текстових посилань, лише з іконок (перетворених на посилання) або з обох цих елементів. Крім того, вкажіть бажану кількість пунктів меню, збільшивши чи зменшивши їхню чисельність у полі «Кількість пунктів меню».

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

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

3. Робота з текстом

Наступний пункт у нашому списку — текст. Додавати текст у листи в Stripo дуже просто.

• Як додати текст в лист у Stripo

Якщо у вас є будь-яка структура з контейнерами, можна легко додати текст, просто навівши курсор на них і клікнувши на кнопку «Text» або додавши всередину блок «Текст».

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

Ви вже задали стилі в розділі «Загальні стилі» як для колонок, так і для заголовків, тому ці стилі будуть автоматично застосовуватися. Якщо ж необхідно створити окремий стиль для тексту, можна вказати стилі абзаців, загальні стилі тексту (жирний, курсив, підкреслений тощо), а також налаштувати вирівнювання та відступи для будь-якого створеного тут тексту.

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

• Як додавати посилання в текст у Stripo

Для додавання посилань у текст виділіть потрібні слова (або весь текст), клікніть на кнопку «Посилання» та вставте посилання у відповідне поле.

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

Ми рекомендуємо вмикати функцію перенесення слів у листах, якщо в них немає кнопок із гіперпосиланнями або якщо деякі слова занадто довгі. Наприклад, якщо лист написано німецькою мовою, краще увімкнути цю функцію. Це допоможе уникнути горизонтального скролінгу на мобільних пристроях. Щоб увімкнути цю функцію, просто активiзуйте цю кнопку. Зауважте, що ця функція не працює з текстом китайською, корейською та японською мовами.

• Додавання іншого контенту в текстовий блок

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

У кожного блоку «Текст» є спеціальні кнопки в розділі «Вставка»; кожна з них відкриває невелике підменю, в якому можна вставити потрібний контент.

• Напрямок тексту справа наліво

Якщо ви створюєте листи для закордонної аудиторії мовами, в яких текст пишеться справа наліво, надзвичайно важливо відповідно адаптувати текст листа. У нас є спеціальна функція для тексту, що йде справа наліво, про яку ми згадували раніше. Перейдіть до розділу «Загальні стилі» та увімкніть опцію «Напрямок тексту справа наліво».

Після цього весь текст буде адаптовано відповідно до правил RTL.

Детальніше про цю функцію читайте в нашій спеціальній статті.

• Переклади

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

Клікніть на цю кнопку, щоб відкрити меню перекладу.

Виберіть мову, на яку потрібно перекласти лист.

Після цього клікніть на кнопку «Перекласти».

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

4. Персоналізація контенту листа

Листи з персоналізованим текстом — чудовий спосіб вирізнитися з-поміж конкурентів і наблизити бренд до аудиторії.

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

Конструктор шаблонів листів Stripo дозволяє додавати merge-теги в будь-який текст шаблону листа.

• Як додати merge-теги в лист у Stripo

Щоб додати mergе-тег, клікніть на текстовий блок, після чого в розділі «Вставка» відкриється спадний список для додавання mergе-тегів.

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

Після вибору merge-тегу (у нашому прикладі це тег «First Name») він з’явиться у текстовому блоці, де можна додати допоміжний текст, щоб доповнити тег відповідним персоналізованим повідомленням.

Ваш ESP замінить цей параметр на ім'я кожного одержувача. Якщо ім'я (або будь-який інший параметр) не вказано, то ESP залишить це поле порожнім.

Дізнайтеся більше про merge-теги у статті нашого Help center.

5. Додавання зображень

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

• Як додати зображення в лист у Stripo

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

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

1. Перетягування або завантаження зображення

Тут можна просто перетягнути зображення, яке ви плануєте використати у своїй кампанії, або завантажити його зі свого комп’ютера, клікнувши на область перетягування.

2. Вставка зовнішньої URL-адреси

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

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

3. Використовуйте зображення зі своєї галереї

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

Зображення тут відсортовані за датою: від найновіших до найстаріших. Якщо список зображень занадто довгий, можна здійснити пошук за назвою.

Щоб використати зображення в наявному шаблоні HTML-листа, потрібно клікнути на вибране зображення, після чого воно автоматично з’явиться в листі.

4. Використання фотостоків та нашої бази зображень

Усі доступні в Stripo зображення є абсолютно безплатними, тому ви можете вибирати ті, що вам сподобалися, і використовувати їх у своїх проєктах. Крім того, у вас є широкий вибір стокових фоток. Щоб переглянути нашу бібліотеку та ознайомитися з зображеннями, просто виберіть потрібне меню.

5. Створення зображень за допомогою GenAI

Також можна згенерувати унікальне зображення для банера, клікнувши на опцію «AI-зображення». Відкриється спеціальне меню, в якому можна ввести запит, щоб скерувати креативність GenAI у потрібне русло, налаштувати різні параметри, як-от модель AI, стиль і розміри, а потім згенерувати потрібне зображення.

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

У попередньому розділі ми показали, як завантажувати зображення та зберігати їх.

Але як їх відредагувати в Stripo?

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

• Як редагувати зображення в Stripo

Після завантаження зображення клікніть на нього, а потім у налаштуваннях блоку «Зображення» — на кнопку «Редагувати».

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

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

7. Створення банерів

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

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

• Як створити банер для листа в Stripo

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

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

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

І не забудьте про опцію «Стилі», де можна налаштувати ротацію банера, колір фону або застосувати фільтр.

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

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

Після кліку на кнопку «Зображення» відкриється те саме меню для додавання зображень.

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

8. Rollover-ефект зображення

Rollover-ефект зображень допомагає розважити та зацікавити клієнтів. Крім того, він дозволяє зекономити цінне місце в листах, оскільки інформацію про товар можна приховати за його фото. Ще можна влаштувати невеличку гру для одержувачів, запропонувавши їм «знайти» купон тощо. Існує багато причин, з яких корисно додавати rollover-ефект у свої листи.

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

• Як створити rollover-ефект зображення в Stripo

Створити rollover-зображення дуже просто. Для початку додайте зображення у потрібну частину листа та клікніть на нього, щоб відкрити налаштування. Там буде пункт «Ефект Rollover».

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

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

Важлива примітка: ця функція підтримується лише в Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, Outlook для Mac та Apple Mail у macOS (лише в десктопній версії). Крім того, зображення повинні мати однаковий розмір із точністю до пікселя.

9. Вставка відео у лист

У Stripo є два способи додавання відео в шаблон листа:

1. Додавання відео за допомогою нашого спеціального блоку «Відео».
2. Вставка відео за допомогою коду.

(Джерело: лист від Charity: Water)

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

• Спосіб 1. Додавання відео за допомогою блоку «Відео»

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

Спочатку перетягніть наш блок «Відео» у будь-яку структуру та клікніть на нього.

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

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

Мініатюру завжди можна змінити за допомогою елемента «Власне зображення», який відкриває звичний інтерфейс для додавання зображень. Крім того, за допомогою елемента «Кнопка відтворення» можна налаштувати стиль кнопки відтворення чи взагалі приховати її. Не забудьте також налаштувати розмір блоку та вибрати, чи буде його мініатюра адаптивною (адаптивне зображення автоматично підлаштовує свій розмір залежно від розміру екрана, на якому воно відображається).

• Спосіб 2. Вбудовування відео

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

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

Ми рекомендуємо дотримуватися такої черговості:

1. Вставте цей код у шаблон листа.
2. Змініть код, вставивши свої URL-посилання.

Як вбудувати відео в Stripo

Тут ми скористаємося блоком «HTML», створеним для зручної роботи з кодом листів. Перетягніть цей блок у будь-яке місце шаблону.

Клікніть на нього, і відкриється наш вбудований редактор коду, який покаже, що ховається «під капотом» шаблону листа.

Тепер скопіюйте цей код для вбудовування відео:

<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">



<!-- fallback -->



<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select">

<img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>

</video>

Вставте його сюди (тобто замініть цей текст плейсхолдера) і клікніть «Застосувати код»:

Після застосування відобразиться базова структура вбудованого відеоплеєра з прикладом відео.

Залишилося лише замінити посилання на свої, щоб відео відтворювалося. Усі посилання, які потрібно замінити, знаходяться тут:

1. Перше посилання — це мініатюра зображення. Звісно, деякі пристрої можуть створювати мініатюру на основі відео у форматі MP4, але ця мініатюра не відображатиметься на iPhone X та пристроях із дисплеями Retina. Вставте це посилання після атрибута "Poster".
2. Наступні два посилання ведуть до наших відеофайлів у форматах .MP4 та .WebM. Посилання на YouTube чи Vimeo тут не працюватимуть. Замініть посилання, розташовані після атрибута "source src", на власні.
3. Два інші посилання, розташовані після «fallback», — це посилання на відео на YouTube та на його мініатюру. Це наш запасний варіант для тих поштових сервісів, які не підтримують вбудовані відео. Завантажте відео на YouTube чи Vimeo та додайте друге зображення, яке використовуватиметься в якості мініатюри. Замініть посилання, вказані в атрибутах "href" та "src", на свої.

​10. Додавання кнопок CTA

Ця кнопка, власне, є гарно оформленим URL-посиланням. Вона має бути добре помітною, а текст на ній — зрозумілим і лаконічним.

Раніше ви налаштовували стилі для всіх кнопок у розділі «Загальні стилі», але якщо ви хочете зробити нову кнопку унікальною, ось що для цього потрібно зробити.

• Як створити кнопку CTA в Stripo

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

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

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

Далі слід налаштувати вирівнювання кнопки CTA, її висоту (для кожної кнопки в листі можна визначити точну висоту), додати іконку та вирішити, чи слід приховувати цю кнопку на різних пристроях.

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

Щоб змінити дизайн кнопки CTA, клікніть на розділ «Стилі», щоб відкрити нове меню налаштувань, у якому можна налаштувати всі параметри стилю. Тут можна змінити кольори кнопок, шрифти (розмір, колір, стилі тексту всередині кнопки), підігнати їх під розмір усього контейнера, додати колір чи зображення фону, різні межі та багато іншого.

• Опція hover для кнопки

Якщо ви хочете застосувати hover-ефект до кнопок, перейдіть до розділу «Загальні налаштування» та увімкніть функцію «Стилі кнопки при наведенні». Після цього стиль усіх кнопок змінюватиметься при наведенні курсора миші. У цьому розділі можна налаштувати параметри hover-ефекту, зокрема кольори кнопок, шрифти і межі.

Ось як можуть виглядати hover-кнопки.

11.Створення модулів контенту з товарами

Що ж, цей розділ досить складний, оскільки він складається з цілої низки блоків та елементів.

(Джерело: лист від M&M's)

Зазвичай такі картки товарів містять уривок опису товару, короткий опис, ціну та кнопку CTA.

Деякі бренди, наприклад M&M’s, додають невеликий вступ перед демонстрацією продукції, а інші — промоматеріали про товари безпосередньо під банером чи відео; вибір залишається виключно за вами.

Щоб створити аналогічну картку товару, почніть зі структури з двох колонок, додайте блок «Зображення» в будь-яку з колонок і внесіть необхідні зміни.

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

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

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

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

Якщо ви хочете створити ще один чи два аналогічні модулі, наведіть курсор на створену картку товару та клікніть на кнопку «Дублювати».

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

12. Створення таймерів зворотного відліку для листів

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

(Джерело: лист від Malooka)

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

• Як створити й додати таймер зворотного відліку в лист у Stripo

Щоб створити власний таймер, перетягніть спеціальний блок «Таймер» у будь-який контейнер і клікніть на нього.

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

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

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

Параметри «Показати дні» та «Цифрові мітки» дають змогу налаштувати відображення днів на таймері, а також загальних позначок, таких як «Години», «Хвилини» та «Секунди» (якщо вимкнути ці параметри, час відображатиметься лише у вигляді цифр).

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

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

13. Додавання розділювача

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

• Як додати розділювач в лист у Stripo

Додати розділювач у лист дуже просто. Достатньо перетягнути структуру з одним стовпцем у шаблон HTML-листа, а потім вставити блок «Розділювач» усередину цієї структури.

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

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

Тут можна налаштувати точні відступи, додати анкорне посилання (за потреби) та вибрати, чи відображати / приховувати розділювач у різних версіях листа.

14. Вставка іконок соцмереж

Іконки соцмереж, або іконки соціальних медіа, можна розставити де завгодно: у меню, у футері чи посередині листа — там, де вам зручно.

• Як додати іконки соцмереж у Stripo

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

За замовчуванням буде відображатися одна іконка соціальної мережі. Щоб додати інші, клікніть на кнопку «+» і виберіть потрібну зі спадного списку (іконки додаються по одній, тому потрібно буде повторити цю операцію кілька разів, щоб додати всі необхідні піктограми).

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

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

І не забудьте про додаткові налаштування, які застосовуються до всього блоку «Соцмережі», як-от розмір іконок, відстань між ними, назви, колір фону та багато іншого. Ці параметри дозволяють точно налаштувати деталі блоку «Соцмережі» відповідно до загального дизайну та вимог до розміру елементів.

У налаштуваннях проєкту ви також можете заздалегідь визначити, які іконки соцмереж будуть відображатися в блоці «Соцмережі» після його додавання. У особистому кабінеті перейдіть до розділу «Налаштування», потім до «Робочий простір», далі до «Проєкти та групи» і виберіть потрібний проєкт.

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

Виберіть з великого набору іконок соцмереж і налаштуйте блок «Соцмережі» відповідно до своїх потреб.

15. Створення футера листа

У футері листа зазвичай вказується контактна інформація, як-от адреса сайту, мета звернення до одержувачів, посилання на акаунти в соціальних мережах, приховані за іконками, посилання для відписки та ім'я особи, відповідальної за розсилку. Останній елемент не є обов'язковим, однак усі елементи, що йдуть перед ним, є обов'язковими.

• Як створити футер для листа в Stripo

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

16. Колір і зображення фону

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

У цьому прикладі ми застосуємо колір фону до структури.

• Як визначити колір фону для структури

Для початку клікніть на будь-який елемент структури та перейдіть до налаштувань розділу «Стилі» (важливо, щоб ви клікнули саме на структуру, оскільки після кліку на контейнер відкриються налаштування контейнера, а зараз це не те, що нам потрібно).

Клікніть на опцію «Колір фону», щоб відкрити палітру та вибрати потрібний колір фону для структури.

Якщо у вас є точний номер кольору, його можна ввести в це поле.

Щоб визначити колір фону всього листа, перейдіть до налаштувань «Загальні стилі та налаштування» і змініть значення параметра «Колір фону листа».

• Як визначити фонове зображення для всього листа

Фонове зображення відображатиметься лише на десктопах. На мобільних пристроях воно не відображатиметься. У розділі «Глобальні стилі та налаштування» клікніть на опцію «Фонове зображення». Відкриється знайоме меню для додавання зображень. Виберіть картинку з фотостоку або завантажте його зі свого пристрою, щоб зробити його фоновим зображенням для листа.

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

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

17. Написання теми листа та прехедера

Щоб додати тему листа та прехедер, перейдіть до «Налаштування листа» та заповніть ці два відповідні поля.

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

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

Якщо у вас немає часу на самостійне створення тем листів, завжди можна скористатися можливостями GenAI та клікнути на кнопку «Покращити з AI». Це дозволить написати пояснювальний запит, задіяти креативність AI та за лічені секунди згенерувати ідеальну тему листа або прехедер.

18. Адаптація тексту для мобільних пристроїв

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

Щоб перейти в цей режим і створити мобільну версію листа, клікніть на цю кнопку.

Після кліку ці налаштування стилю (а також багато іншого для кожного з елементів листа).

Перетворяться на такі:

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

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

І не забудьте про опцію «Інверсія контейнерів», яка змінює розташування контейнерів на мобільних пристроях (спочатку до цієї структури потрібно застосувати адаптивну структуру, а вже потім можна використовувати інверсію контейнерів).

Ось як це виглядає.

19. Прев'ю та тестування листів

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

• Як попередньо переглянути лист у Stripo

Завершивши роботу над дизайном шаблону, клікніть на кнопку «Прев'ю» над шаблоном.

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

Також можна переглядати лист у світлому і темному режимах, клікаючи на ці кнопки.

• Як надіслати тестовий лист у Stripo

Ще один спосіб перевірити лист — просто надіслати його собі на пошту, щоб подивитися, як він виглядатиме в реальних умовах у поштовиках. Клікніть на кнопку «Перевірити», щоб відкрити це маленьке вікно.

Введіть електронні адреси для тестування у відповідне поле і клікніть на кнопку «Надіслати тест». Після цього ви отримаєте тестовий лист, який зможете перевірити.

• Як протестувати лист у всіх популярних системах

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

Завдяки нашій інтеграції з Email on Acid тепер можна попередньо переглядати свої листи в популярних комбінаціях поштових клієнтів і пристроїв одразу в Stripo.

У тому ж меню тестування перейдіть до розділу «Поштові клієнти» та клікніть на кнопку «Перевірити».

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

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

20. Тестування доступності листа

Не забувайте про тестування доступності, оскільки серед ваших користувачів, найімовірніше, будуть люди з вадами зору, тому дизайн має бути готовий до цього. У меню «Тестування листа» перейдіть до розділу «Доступність» і клікніть «Перевірити».

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

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

• Як перевірити відповідність листа вимогам антиспам-політики 

Було б дуже прикро пройти весь процес розробки дизайну, а в результаті опинитися в папці «Спам» після надсилання листа. Щоб уникнути такої ситуації, можна перевірити лист на відповідність антиспам-вимогам. 

Клікніть на розділ «Спам», а потім на кнопку «Почати перевірку».

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

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

21. Оптимізація тексту під темну тему

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

У Stripo можна емулювати як світлу, так і темну тему за допомогою опції «Умови відображення». Клікніть тут, щоб ознайомитися з опцією «Емуляція теми». За замовчуванням кожен лист створюється у світлій темі.

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

22. Застосування умов відображення

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

Детальніше про умови відображення читайте у статті нашого Help Center.

23. Використання інструментів для спільної роботи

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

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

24. Додавання інтерактивного контенту 

Щоб зробити лист ще більш унікальним, у нього можна додати інтерактивний контент за допомогою наших спеціальних блоків. Наприклад, додайте блок «Карусель», якщо хочете створити карусель з декількох зображень.

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

Хочете дізнатися думку своєї аудиторії? Додайте наш блок «Форма», який дозволить одержувачам вводити свої відповіді, щоб можна було переглянути відповіді на кожен лист.

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

Важлива примітка: майте на увазі, що не всі поштовики підтримують інтерактивний контент. Наприклад, якщо ви надсилаєте листи в Outlook, він (поки що) не підтримує інтерактивний контент.

Якщо ви хочете підвищити рівень залученості одержувачів, можете зробити листи ще більш інтерактивними за допомогою нашого генератора інтерактивних модулів. У ньому є набір інтерактивних елементів, зокрема колесо Фортуни, вікторини, анкети NPS та інші, з яких можна вибрати відповідний. І що найважливіше — для створення цих інтерактивних модулів не потрібно бути технічно підкованим маркетологом. Все створюється за допомогою інтуїтивно зрозумілого інтерфейсу, і створений інтерактивний модуль можна легко зберегти та скачати для подальшого використання в листах.

25. Збереження елементів листа в якості модулів

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

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

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

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

Ми рекомендуємо зберегти та повторно використовувати такі елементи: хедери, футери, контактну інформацію та контейнери зі smart-елементами. Перші залишаться без змін; для других потрібно буде вставити нове посилання.

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

26. Експорт листа до ESP

Коли лист буде повністю готовий (тобто протестований і доопрацьований), його можна легко надіслати до ESP. Stripo інтегрована з 90+ ESP, а також із поштовиками, як-от Gmail та Outlook, застосунками та багатьма іншими сервісами.

Це означає, що всього одним кліком можна надіслати свої листи до будь-якого з цих сервісів. Якщо цих варіантів недостатньо, можна скачати листи у форматі HTML / AMPHTML, у вигляді PDF-файлу чи зображення.

• Як експортувати лист зі Stripo

Клікніть на кнопку «Експорт» над шаблоном.

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

Клікніть на будь-який варіант ESP, щоб відкрити налаштування перед експортом, введіть необхідну інформацію — і все готово.

Те саме стосується експорту в застосунки та у вигляді файлів (просто виберіть відповідні пункти меню).

Поради та функції для значного скорочення часу на створення листів у Stripo

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

• Кнопки «Скасувати» і «Повторити»

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

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

• Історія змін

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

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

Після кліку на цю «магічну» кнопку з’явиться список усіх версій листа, дати та імена тих, хто вносив зміни.

• Дії «Дублювати» і «Перемістити»

Це дуже зручний і швидкий спосіб використовувати подібні елементи в листах.

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

Потім клікніть на кнопку «Перемістити» і перетягніть скопійований елемент у потрібне місце шаблону. І все.

• Збереження та повторне використання наявних шаблонів

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

• Створення базового листа за допомогою AI Assistant

Якщо вам потрібно швидко створити базову структуру листа, скористайтеся нашим AI Assistant. Достатньо ввести описовий запит, у якому слід описати, про що йтиметься у листі та які елементи мають увійти до нього, а потім клікнути на кнопку «Згенерувати».

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

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

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