Home > Скарбниця знань > Email розсилки > Створення email повідомлення > Створіть власний шаблон повідомлення

Створіть власний шаблон повідомлення

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

Основні переваги цього конструктора:

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


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

Отже, для початку переходимо в меню "Шаблони повідомлень" -> "Додати шаблон".

 

У сервісі є кілька варіантів створення email повідомлень.

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


Вибір структури шаблону

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

 

У прикладі ми зупинимося на одноколоночному шаблоні.

Перед вами – Конструктор Шаблонів.

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

 

Конструктор повідомлень включає 4 групи елементів:

 

           1. Текстові елементи

 

Блок з елементом “Текст”

Виберіть зліва елемент "Текст" і перетягніть його в шаблон.

 

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

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


Доступні параметри для редагування тексту:

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

Додавання змінних також відбувається через текстовий редактор - меню "Змінні" із випадаючим списком.

Важливо! Якщо ви хочете додати текст в редактор копіпастом (скопіювати-вставити), то рекомендується копіювати текст з простого текстового файлу (.txt). В іншому випадку, в редактор можуть "підтягнутися" стилі з вашого Word файлу, що не завжди є добрим

 

Окремі параметри є і для редагування блоку: колір фон і відступ від країв (рівноцінний відступ тексту від країв блоку: зверху, знизу, зліва і справа).

Змінимо розмір і стиль шрифту, додамо фоновий колір для блоку і встановимо відступ від країв 20px.

Результат буде наступним:

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

 

Блок с елементом “Прехедер”

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

Обираємо потрібний елемент в конструкторі і перетягуємо до шаблону.

Від початку, блок "Прехедер" складається з двох елементів в двох колонках:

  • колонка 1 – безпосередньо прехедер
  • колонка 2 – веб-версія повідомлення

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

Редактирование прехедера (Колонка 1)

 

Редагування прехедеру (Колонка 1)

Посилання на веб-версію листа додається через меню "Змінні".

 

Блок з елементом “Футер”

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

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

 

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

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

 

Блок з елементом “Посилання відписки”

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

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

 

Важливо! Щоб використовувати особисте посилання відписки в листі, його потрібно заздалегідь створити (меню "Налаштування -> Посилання відписки").

Якщо ви не створювали посилання відписки, тоді в шаблон додасться стандартне посилання відписки “Відмовитися від розсилки”.

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

  • колір (блоку та тексту)
  • шрифт (стиль і розмір)
  • розміщення тексту (вирівнювання: ліворуч, праворуч, по центру)
  • відступ тексту від країв блоку

 

           2. Зображения

 

Блок з елементом “Зображення”

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

 

Зображення можна додати двома способами: завантажити з комп'ютера або вибрати з галереї (серед тих картинок, які ви раніше завантажували в email сервіс).

 

Після завантаження (або вибору з галереї), зображення з'являється в шаблоні.

 

Параметри кожного зображення можуть бути змінені:

1) Підпис картинки

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

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

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



2) Розмір зображення

Кожне зображення, додане в шаблон листа від початку має розмір 100%.

Ви можете зменшувати його від 100% до 10%, вибираючи необхідне зі списку.



3) Вирівнювання

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



4) Відступ від краю

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

 

5) Встановити колір фону

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



6) Рамка

Бажаєте, щоб зображення обрамлялися рамкою? Відмітьте у випадаючому списку "Рамка → Так", а потім вкажіть колір і ширину рамки.

Спостерігати за змінами зображення можна в шаблоні праворуч в режимі реального часу.



7) Зробити посиланням

Щоб зробити зображення гіперпосиланням, виберіть "Зробити посиланням → Так".

З двох варіантів посилань виберіть потрібний: посилання на сторінку або на email адресу.

Важливо! Завжди вказуйте повне посилання на сторінку, починаючи з http://.

 

Блок з елементом “Зображення та текст”

Виглядає цей блок таким чином:

 

Можливості для редагування тексту в цьому блоці збігаються з можливостями для редагування елементу "Текст".

Для редагування зображення дивіться можливості елементу "Зображення".

 

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

  • Щоб текст виявився зліва від картинки, потрібно в елементі "Зображення" вказати параметр "Вирівнювання - Зліва".
  • Відступ від краю, який ви задаєте для зображення, - це відстань між картинкою і краєм елемента і між картинкою і текстом (у разі обтікання картинки текстом).
  • Відступ від краю, який ви задаєте для блоку, підсумовується з відступом від краю, який вказаний для зображення.
  • Важливо! У цій версії конструктора не можна додати до зображення посилання на сторінку в елементі "Зображення і текст".

 

Блок з елементом “Група зображень”

Елемент "Група зображень" дозволяє додати в шаблон кілька картинок.

 

Особливості цього елементу:

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

 

 

           3. Інші елементи

 

Блок з елементом “Кнопка”

Вибираємо потрібний елемент праворуч в конструкторі і перетягуємо його в шаблон.

Блок з кнопкою складається з 2 елементів: сама кнопка і текст кнопки.

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

 

Тепер повернемося до параметрів кнопки і її зовнішнього вигляду.

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

 

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

Тому звертайте увагу і на параметри тексту.

 

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

 

І отримуємо барвисту, яскраву і помітну кнопку.

 

Блок з елементом “Розподільник”

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

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

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

 

А якщо встановити єдиний колір лінії і блоку - то можна отримати єдиний роздільник, шириною в блок.

 

Блок з елементом “Відео”

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

 

 

          4. Соціальні посилання

 

Конструктор повідомлень включає два типи елементів в цій групі:

  1. Соціальні мережі
  2. Розшарити

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

Редактор елементів "Соціальні мережі" складається з двох вкладок: соціальні мережі і налаштування.

Вкладка “Соціальні мережі”

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

Вкладка “Налаштування”

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