Дизайн Шаблон How-to
~ 30 хв читати
4019 перегляди
оцінити
20 квітня

Чому Stripo є потужною платформою для створення шаблонів, або що ви могли не знати про наші можливості

Stripo / Blog / Чому Stripo є потужною платформою для створення шаблонів, або що ви могли не знати про наші можливості

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

У цій публікації ми розповімо про функції Stripo, що суттєво оптимізують створення листів.

Ми спробували розділити їх на групи відповідно до завдань, які вони виконують:    

  1. Автоматизація створення шаблонів.  
  2. Дизайн листів
  3. Інтерактивний та динамічний контент.
  4. Новий рівень адаптивного дизайну.
  5. Інструменти командної співпраці.
  6. ESP-інтеграції.
  7. Зручність роботи.

Група 1. Автоматизація створення шаблонів

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

1. Синхронізовані модулі

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

Ми у Stripo постійно створюємо нові листи для наших кампаній — лише для тригерних розсилок у нас 57 шаблонів. І цілком випадково в усіх шаблонах трапилася помилка: ми написали «Terms of Us» (тобто «Наші умови», причому якоюсь скособоченою англійською) замість «Terms of UsE» («Умови використання»). Нас охопив жах від перспективи редагувати усі 57 шаблонів, похмуро співаючи «Ой летіли дикі гуси...» при цьому. Але з опцією «Синхронізовані модулі» ми відредагували лише один шаблон — і всі інші 56 успадкували ці оновлення. Файно :)

Ми зекономили кілька годин роботи.

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

Спробуйте Stripo

2. Smart-елементи: можливість миттєво створювати багато карток товарів

Ми дуже пишаємося цією корисною функцією, котра дійсно заощаджує час email-маркетологам.

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

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

Приєднатися до Stripo

3. Можливість створити модуль «Слідкуйте за нами у соцмережах» одним кліком

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

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

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

Blog/%D1%81%D0%BE%D1%86-%D1%81%D0%B5%D1%82%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C

Детальну інструкцію ви знайдете тут.

Приєднатися до Stripo

4. Модулі контенту

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

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

Building-Emails-by-Using-Only-ModulesДеякі компанії, що користуються Stripo, створюють у такий спосіб цілі розсилки — вони просто замінюють банери та оновлюють пропозиції. Ось і все.

Приєднатися до Stripo

Група 2. Дизайн листів

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

5. Можливість додавати кастомні шрифти

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

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

Зверніть увагу: вам слід перевірити сумісність шрифтів з кількома поштовиками, перш ніж надсилати листи отримувачам.

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

Завантажити свій шрифт

6. Фоторедактор

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

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

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

1 change image ua

По завершенні редагування не забудьте натиснути кнопку «Зберегти».

2 save image ua

7. Генератор банерів

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

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

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

Приєднатися до Stripo

8. Можливість кастомізації ширини листів

Як відомо, 600 пікселів — найпопулярніший розмір електронного листа. Але сьогодні все більше брендів експериментують з шириною шаблону. Дехто виставляє 640 пікселів, інші 700, а особливо витончені мосьє — навіть 800 пікселів.

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

3 general setting ua

Приєднатися до Stripo

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

9. Кнопка VML

Якщо ви не новачок у сфері email-маркетингу, то вам, скоріше за все, вже знайомі певні проблеми з відображенням листів в Outlook.

У кнопок є неприємна властивість втрачати свій стиль, якщо вони написані не на VML.

Stripo_Outlook-Rendering-Issues_Buttons1

Ось така халепа, малята...

Щоб знову ж таки позбавити вас від страждань із кодом та заощадити ваш час, ми додали кнопку «Підтримка Outlook».

4 outlook support uaУвімкнувши її, ви можете бути впевнені — Outlook відобразить ваші кнопки CTA саме так, як було задумано.

VML-based-Button

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

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

І Stripo пропонує п'ять способів це зробити:    

  • отримати спільне посилання, за яким відображаються AMP та HTML-версії ваших листів. Вони є загальнодоступними, і ви можете розшарити їх для клієнтів та колег;
  • завантажити листа у форматі PDF, щоб поділитися з колегами для затвердження. Це надає їм можливість побачити загальну картину і залишати коментарі безпосередньо у ваших листах. Ви можете обирати орієнтацію сторінки;

  • попередній перегляд листів — як у мобільних, так і в десктопних версіях, а також у форматах AMP та HTML;
  • надіслати тестові листи — ви можете відправляти їх, щоб побачити відображення у різних поштовиках та навіть перевірити їхню роботу (зокрема усі посилання, кнопки та інтерактивні елементи);
  • запустити скріншот-тест — так, це робиться безпосередньо у Stripo. Ми із задоволенням повідомляємо, що наша інтеграція з Email on Acid дозволяє клієнтам Stripo здійснювати скріншот-тести листів безпосередньо в нашому редакторі. Це збереже ваш час.

Приєднатися до Stripo

11. Можливість обирати кількість колонок в рядку

Рядок листа зазвичай містить від 2 до 4 колонок. Але іноді нам потрібно до 8 колонок в рядку.

Як це зробити:

  • клікніть по потрібній структурі у вашому шаблоні;

Choosing-The-Necessary-Structures

  • натисніть значок «Плюс», щоб додати нову колонку/колонки;  

5 structures add ua

  • і вирівняйте ширину цих колонок.

6 equalize ua

Спробуйте Stripo

12. Генератор промо анотацій для Gmail

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

Працює тільки на мобільних девайсах.

Gmail-Promo-Tab-Email-Example

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

У статті в нашому блозі ви знайдете деталі щодо створення промо анотацій Gmail за допомогою Stripo.

Читайте в нашому блозі

13. Кнопки Скасувати/Повторити

Це дуже важлива опція. Проте в деяких редакторах її досі немає.

Працюючи в Stripo з листом, ви завжди можете скасувати попередню дію, натиснувши кнопку «Відмінити». А також повторити дію, яку щойно скасували :)

7 cancel action ua

14. Автозбереження

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

Є редактори, що зберігають шаблон кожні 20 секунд. Інші роблять це один раз на хвилину.

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

Наш редактор повідомляє про кожне автозбереження:

Autosave-Option

15. Можливість налаштування кастомних шаблонів для Stripo

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

Ми присвятили цій серйозній темі дві статті нашого блогу:

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

Група 3. Інтерактивний та динамічний контент

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

16. Ефект ролловера зображень

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

Stripo-Rollover-Back-of-a-Blouse

Створити його в Stripo дуже легко:

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

8 rollover effect ua

Спробувати Stripo

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

17. CSS-анімована кнопка

Ви завжди хотіли виділити кнопки CTA при наведенні курсору, тобто щоб вони змінювали колір, коли курсор знаходиться над кнопкою?

Stripo-Rollover-SoccerЦе можна зробити! Причому навички верстки не знадобляться. Просто попрацюйте з інтерфейсом Stripo.

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

18. Блок таймера зворотного відліку

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

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

Таймери є повністю веб-безпечними, тобто вони працюють в усіх поштовиках.

Інструкцію з налаштування таймерів для листів ви знайдете у нашому блозі в статті «Як додати таймер зворотного відліку в email».

Створити таймер

19. Карусель зображень

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

Ми пропонуємо два методи створення цих корисних каруселей:

а) використати будь-який з наших HTML-шаблонів, що вже містить карусель зображень, створену з використанням коду CSS.

Image-Carousel_Screen

Скористатися цим шаблоном

Просто замініть дефолтний контент на власний. Вам не знадобляться жодні навички кодування;

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

Example-of-AMP-CarouselЯк відомо, для AMP-листів потрібен резервний варіант. Але не переймайтеся, ми надаємо користувачам можливість створити його без навичок програмування, використовуючи лише наш розширений інтерфейс.

Додаткову інформацію про резервні варіанти ви знайдете у статті в нашому блозі.

20. Акордеон

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

AMP-Accordion_Digest

Використати цей шаблон

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

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

Як бачимо, ви можете додавати фото, кнопки, описи тощо.

Інакше кажучи, в AMP-акордеон можна додати контент будь-якого типу. Навіть картки товарів.

Спробувати Stripo

21. Готові AMP-шаблони

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

Teaser-Email-Template

Спробувати цей шаблон

У нас ви знайдете шаблони з такими елементами:

Використовуйте на власний розсуд будь-який шаблон з нашої колекції.

Ознайомитися з шаблонами

22. Mock-сервер

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

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

У статті в нашому блозі ми розповідаємо, як тестувати вбудовані форми листів за допомогою нашого Mock-сервера.

Leaving-Feedback-in-EmailМи створюємо фейковий end-point в нашому Mock-сервері, перевіряємо його роботу в тестових листах, — і лише після цього даємо розробникам завдання створити реальний end-point на нашому сервері.

Приєднатися до Stripo

23. Валідатор коду AMP HTML

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

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

Validating-CodegifНа щастя, в AMP-шаблонах, що пропонує Stripo, помилок немає :)

Обирайте будь-який :)

Ознайомитися з AMP-шаблонами

24. Можливість працювати з кодом HTML 

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

  • Робота з кодом усього листа або кодування з нуля

    9 code editor uaОпцію призначено для HTML-кодерів та всесвітньо відомих дизайнерів.

Щоб відкрити редактор HTML-коду всього листа, просто клікніть іконку «Редактор коду» над шаблоном.

Opening-the-CSS-Code-EditorРедактор HTML-коду з'явиться у нижній частині сторінки. Якщо вам треба попрацювати над кодом CSS, просто натисніть кнопку «CSS», як показано нижче.

  • Робота з кодом окремого елемента листа     

Опцію призначено для HTML-кодерів та email-маркетологів.

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

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

Working-on-Code-for-Email-Elements

  •   HTML-блок для вбудовування кастомних елементів

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

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

Stripo-Embedding-HTML-Video

Це важливо:

Які б зміни ви не робили в коді листа, ви одразу побачите всі ці зміни.

Спробувати Stripo

25. Можливість додавати в листи анкорні посилання 

Анкорні посилання призначені для навігації користувачів всередині листа.

Anchor-Links

(Джерело: розсилка від Mercedes-Benz)

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

Приєднатися до Stripo

Група 4. Новий рівень адаптивного дизайну

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

26. Можливість увімкнути або вимкнути відображення елементів на мобільних

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

image19-1-768x399Раніше вам доводилося заморочуватися з кодом листа, щоб додати обидві версії та забезпечити відображення потрібних елементів на відповідних девайсах.

У Stripo ви просто використовуєте відповідні елементи управління — жодні навички HTML при цьому не потрібні.

10 hide element on mobile ua

11 hide element on desktop ua

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

27. Інверсія елементів листа на мобільних

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

Responsive-Email-Design_Normal-Order

(Десктопні девайси)

Wrong-Order-for-Mobile-Devices-Due-to-Disabled-Container-Inversion

(Мобільні девайси з вимкненою інверсією)

Inversion-ON

(Мобільні девайси з увімкненою інверсією)

Щоб активувати цю опцію, просто перемкніть кнопку «Інверсія контейнерів»:

12 container inversion ua

Подробиці ви знайдете у відповідній статті в нашому блозі.

Спробувати опцію

28. Робота з мобільною версією email-дизайну 

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

13 adaptivity settings uaЯк ми бачимо, в Stripo можна зробити мобільну версію листа, що повністю відрізняється від десктопної: ви налаштовуєте розміри шрифту для кнопок, контенту, всіх заголовків, котрі збираєтеся використовувати, і навіть для меню та футера. Також налаштовується ширина кнопки — для мобільної версії зробіть кнопки у повну ширину екрану. Таким чином ви гарантуєте читабельність тексту листа і клікабельність кнопок CTA — набагато легше натискати кнопку, якщо вона широка :)

Спробувати Stripo

29. Можливість вимкнути адаптивний дизайн

Цю опцію ми додали до редактора на прохання деяких наших користувачів.

Усі листи, що ви створюєте у Stripo, за замовчуванням є повністю адаптивними.

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

14 adaptivity in email setting ua

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

Приєднатися до Stripo

Група 5. Інструменти командної співпраці

Зазвичай над розсилками працюють кілька людей — верстальники, дизайнери, копірайтери, email-маркетологи.

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

30. Ролі користувачів та рівні доступу

Це дуже важлива опція для тих, хто працює в команді.

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

Stripo дозволяє вам призначати різні ролі з різними рівнями доступу для користувачів усіх ваших проєктів.

Що треба зробити, щоб запросити користувачів та призначити ролі:

  • увійдіть до свого проєкту й перейдіть до вкладки «Користувачі»;
  • після чого увійдіть у вкладку «Описання ролей»;

15 my organization roles ua

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

16 role description ua

Запросити користувачів

31. Brand Guidelines

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

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

Desig-Style-Recommendations-Divided-into-SectionsBrand Guidelines, які ви створюєте з нами, також міститимуть лого вашого бренду і навіть модулі контенту для використання у кампаніях — ви можете копіювати їхній HTML-код або HTML із вбудованим кодом CSS.

Getting-Codes-of-ModulesВи можете створювати окремі Brand Guidelines для кожного проєкту.

Спробувати Stripo

32. Історія змін

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

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

17 history of changesПри натисканні на цю кнопки ви перейдете до режиму «Історія змін».

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

18 restore history ua

Приєднатися до Stripo

33. Можливість організувати контент у папках

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

image_2020_05_31T20_46_41_575Z

Для кожного вашого проєкту можна створювати окремі папки.

Приєднатися до Stripo

Група 6. ESP-інтеграції

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

Та чи знаєте ви, що можна ще...?

34. Інтеграція з понад 40 ESP

(Просто дружнє нагадування, як експортувати листи до будь-якого ESP…)

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

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

19 export uaПотім оберіть свій сервіс, введіть облікові дані — і вуаля! Лист вже у вашому ESP.

Повний перелік ESP та інструкції ви знайдете на нашій «сторінці інтеграцій».

Приєднатися до Stripo

35. Можливість заміни листів у вашому ESP

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

20 export to your ESP uaТобто ви вирішуєте, експортувати лист як новий або замінити ним вже наявний лист з таким самим ім'ям, який ви раніше експортували до ESP.

Спробувати Stripo

36. Теги персоналізації

Ці теги — невід'ємна частина персоналізації. Stripo дозволяє додавати їх під час створення розсилки.

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

21 personalization ua

Це важливо:

Список тегів персоналізації залежить від конкретного ESP.

За замовчуванням ми надаємо вам теги для п'яти ESP.

Але якщо вашого ESP немає в переліку, ви можете:

  • вимкнути їх у налаштуваннях проєкту;
  • увімкнути опцію «Кастомні теги персоналізації»;
  • ввести назву потрібного тега персоналізації та вказати його значення.

    22 merge tags ua

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

Спробувати Stripo

37. Інтеграція із Zapier

Ми вже говорили про інтеграцію з популярними ESP. Проте ми вирішили приділити увагу інтеграції із Zapier окремо, оскільки a) Zapier — це не ESP; б) це допоможе вам поєднати ваш ESP зі Stripo, якщо ESP відсутній у переліку наших інтеграцій; в) ви можете розцінити цей метод доставляння листів зі Stripo до вашого ESP як найбезпечніший. 

Інструкцію ви знайдете у статті «Як інтегрувати ваш ESP зі Stripo за допомогою Zapier» у нашому блозі. 

Export-to-Zapier_The-Export-DashboardЗверніть увагу, що за допомогою Zapier ви можете підключити до Stripo будь-яку кількість ESP.

Приєднатися до Stripo

38. Можливість експорту листів до Gmail та Outlook

Іноді буває потрібно відправити HTML-листа з вашого особистого облікового запису Gmail або Outlook. Саме тому ми інтегрувалися з цими поштовиками.

В публікаціях у нашому блозі ми розповідаємо, як експортувати листи до Outlook та Gmail, а також як оптимізувати листи для цих поштовиків.

39. Можливість введення параметрів UTM

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

Stripo дозволяє їх легко налаштувати.

23 utm ua

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

Це важливо:

Параметри UTM, які ви встановлюєте у Stripo, матимуть пріоритет над параметрами розсилки, встановленими вашим ESP.

40. Можливість додавати заголовок у Stripo

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

Тому ми рекомендуємо зробити це у Stripo ще до експорту до вашого провайдера.

Adding-Subject-Line-and-Preheader-to-Emails_StripoВи можете навіть додати емодзі.

Спробувати Stripo

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

41. Додавання пробілів для кнопок

Для чого це потрібно?

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

Subject-Line-and-PreheaderАле якщо ви бажаєте, щоб ваші користувачі бачили в області попереднього перегляду лише заголовок, вам треба буде попрацювати з кодом листа, щоб заповнити область прехедера додатковими пробілами. 

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

24 fill empty uaЯ застосувала обрані мною пробіли для одного з листів. І ось як тепер виглядає його область попереднього перегляду:

Hidden-Preheader_Whitespaces

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

Приєднатися до Stripo

42. Налаштування умов відображення і додавання динамічного контенту для персоналізації

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

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

Як це зазвичай робиться?

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

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

У Stripo ми вирішили спростити цей процес.

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

Як налаштувати умови у Stripo

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

Я звернулася до свого ESP eSputnik, і вони надали мені потрібний код, що складається з трьох частин — той що відкриває, закриває та фрагментів коду для конкретних модулів. Після цього слід зробити таке:

  • перетягнути необхідну кількість структур до смуги/рядка;
  • заповнити ці структури своїм контентом;
  • натиснути значок «Смуга», щоб відкрити налаштування для всієї смуги/рядка;

25 stripe content

  • перейти до вкладки «Умови»;
  • натиснути кнопку «Застосувати умови відображення»;

image_2020_05_31T20_50_02_577Z

  • відкрити редактор коду (див. параграф 24);
  • ввести початкову частину коду одразу після рядка, що починається з <td class="esd-stripe"...>;

Entering-First-Part-of-Code

  • у цьому ж вікні ввести закриваючу частину вашого загального коду безпосередньо над останнім закриваючим тегом </td>;

Entering-the-Closing-Part-of-Your-Code

  • після чого натиснути значок «Структура», щоб відкрити налаштування для конкретної структури;

image_2020_05_31T20_50_53_031Z

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

image_2020_05_31T20_53_08_158Z

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

image_2020_05_31T20_54_10_287Z

Це важливо:

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

Я впоралася з налаштуванням цих умов менше ніж за 10 хвилин.

Приєднатися до Stripo

Група 7. Зручність роботи

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

43. Можливість вибору розташування бокової панелі

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

У Stripo ви можете обрати розташування бокової панелі.

26 settings panel

Choosing-Location-for-the-Side-Bar

Порядок Drag-n-Drop блоків залишається незмінним.

44. Підтримка 8 мов

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

Щоб обрати потрібну мову, вам слід:

  • клікнути на іконку з вашим ім'ям у правій верхній частині екрану;
  • перейти у свій профіль;

27 languages panel ua

  • обрати бажану мову в розділі «Профіль» у новому вікні.

28 languages panel choose ua

Обрати мову

45. Плагін/White Label рішення

Просто дружнє нагадування:

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

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

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

Подробиці у нашому блозі

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

Якщо ви бажаєте, щоб ми додали нові функції, котрі ви вважаєте корисними та потрібними, надсилайте нам свої пропозиції.

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

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

Донедавна було дуже складно, майже неможливо створити HTML емейл-розсилку через Outlook, щоб повідомлення відображалися коректно. Stripo знайшов вихід. Але навіщо ж вам відправляти повідомлення через Outlook, якщо ви можете зробити розсилку за допомогою GetResponse, eSputnik або будь-якого іншого сервісу. Чому ми вирішили додати прямий експорт в Outlook Більшість користувачів питалися, як експортувати повідомлення у цей поштовик. Наші розробники розпочали працювати над проектом. І ось вже ми готові до релізу цієї опції. Згідно зі статистикою Litmus, на цю мить 7% користувачів мережі віддають перевагу...

Маркетинг Шаблон How-to
15 травня · 14 хв читати
Дизайн підпису в емейлах: 10 кращих прикладів 2019 року

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

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