Cервис предлагает 4 способа создать email шаблон

  1. Выбрать готовый шаблон
  2. Создать шаблон с помощью блочного редактора
  3. Работа в упрощенном редакторе (рекомендуем использовать HTML-редактор только пользователям, которые разбираются в HTML-коде)
  4. Импорт шаблона из файла, по ссылке и с помощью вставки кода.

Работая в сервисе email рассылок SendPulse, вы можете легко и быстро создавать письма, используя блочный конструктор писем.

Основные преимущества этого конструктора:

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

Первым шагом мы предлагаем вам ознакомиться с элементами, которые можно использовать для создания письма.
Итак, для начала переходим в меню Шаблоны сообщений — Добавить шаблон

Добавить шаблон письма

В данном случае речь идет о конструкторе шаблонов, по-этому его и выберем.
Выбор структуры шаблона

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

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

В примере мы остановимся на шаблоне со структурой "Новости".

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

На панели слева доступны элементы, которые можно добавлять в письмо, на панели справа – варианты редактирования выбранного элемента. По центру — изначальный шаблон, который вы и будете править, добавляя и редактируя элементы.

Рекомендуем при создании нового шаблона продвигаться от общего к частному — сначала добавлять блоки и элементы тела письма (фон), после чего уже переходить к добавлению и редактированию более мелких элементов, которые будут перекрывать фон.
Таким образом сначала вы создадите структуру письма, после чего в отдельные блоки уже можно вставлять элементы из левой панели (текст/картинка/кнопка и тд).
Для каждого елемента шаблона (картинка, текст, видео и тд) лучше создать отдельный блок структуры.

Дизайн всего письма настраивается в разделе "Тело Письма" — тут можно задать единый цвет ссылок, единый цвет и тип шрифта, расстояние между строками, ширину письма и его фон, контур.

Тело письма

Конструктор писем включает такие группы элементов:

1. Текстовые элементы

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

Выберите слева элемент “Текст” и перетащите его в шаблон.

Блок с элементом текст

В итоге вы получаете в центре — визуальное отображение текста в блоке и параметры для оформления текста справа.

Все правки производятся в редакторе. В шаблоне можно в режиме реального времени видеть, как изменяется текст после правок. Доступные параметры для редактирования текста:

  • цвет текста
  • шрифт
  • высота строки
  • цвет фона
  • внутренний отступ
  • высота блока
  • контур

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

*Заметьте, что при увеличении внутреннего отступа в элементе шаблона, соответственно увеличится и тело всего письма.

Работа с текстом 

Добавление переменных происходит внутри текстового блока – меню “Переменные” с выпадающим списком предустановленных переменных.

Если вы хотите использовать переменные, которые доступны для конкретной адресной книги, то редактируйте шаблон при создании новой рассылки в меню Рассылки-Создать рассылку. Так к рассылке и к шаблону будет привязана определенная адресная книга с ее переменными.

Адресная книга и переменные рассылки

 

Добавить переменные

Важно! Если вы хотите добавить текст в редактор копипастом (скопировать-вставить), то рекомендуется копировать текст из простого текстового файла (.txt).

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

Скопируйте текст из файла word, вставьте текст в файл txt и снова скопируйте текст уже из текстового файла перед тем, как вставить его в редактор шаблона.

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

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

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

Кликните по стрелочке справа от выбора переменных чтобы открыть выпадающее меню, где спрятаны некоторые опции редактирования текстового блока:

Редактирование текстового блока

Добавьте текст

Изменим размер и стиль шрифта, добавим фоновый цвет для блока, контур и установим отступ от всех краев 50px. Результат будет вот такой:

Редактируем размер и стиль шрифта, фоновый цвет, контур и отступы

Этот текстовый блок, как и любой блок в шаблоне, можно скопировать,

Скопировать текстовый блок

удалить

Удалить текстовый блок

или перемеcтить в другое место шаблона.

*Сохранить блок шаблона можно так:

Кликните по нужному блоку и в нижней его части выберите Сохранить блок

Сохранить блок шаблона

Придумайте название для этого блока и нажмите Сохранить

Укажите название блока

Выбрать блок из сохраненных можно в меню Добавить структуру-Сохраненные в конструкторе шаблона

Сохраненные блоки

Структура с элементом “Прехедер”

Прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы.

Выбираем нужный элемент в конструкторе (находится в "Добавить структуру - Примеры"), перетаскиваем в шаблон и размещаем над всеми элементами сверху.

Прехедер

По умолчанию блок “Прехедер” состоит из двух элементов в двух колонках:

  • непосредственно прехедер
  • веб-версия письма — также ссылку на веб-версию письма можно добавить через меню “Переменные” кликнув на прехедерДобавить веб-версию

Чтобы начать редактировать элемент, просто кликните на нем левой кнопкой мыши 

Структура с элементом “Футер”.

Футер – это то, чем заканчивается письмо – блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.

Добавьте футер в шаблон, измените текст и установите параметры блока.

Добавьте футер

Вы можете выбрать внешний вид футера: будет ли он сплошным или разделенный на две колонки.
Как и в любом другом блоке, в футере вы можете изменить текст, добавить данные своей компании и задать фоновый цвет блока вцелом.

Редактируйте элементы футера

Обратите внимание на переменную {{ec_es_email_sender_company}} в футере — в нее из настроек аккаунта подставляется название компании отправителя из меню Настройки аккаунта-Юр. лица-Компания

Настройки аккаунта

Блок с элементом “Ссылка отписки”.

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

Элемент “Отказаться от рассылки” находится в выпадающем меню "Переменные".
Вставить ссылку отписки можно в любой блок письма.

Ссылка отписки

Важно! Чтобы использовать свою ссылку отписки в письме, её нужно заранее создать в меню “Рассылки-Настройки сервиса-Страницы отписки”.

Создать страницу отписки

Подробнее о кастомизации отписки узнайте из этой статьи.

Если вы не создавали ссылку отписки, тогда в шаблон добавится стандартная ссылка отписки “Отказаться от рассылки”. Что касается параметров редактирования, в этом блоке вы можете изменить:

  • цвет (блока и текста)
  • шрифт (стиль, размер и начертание)
  • положение текста (выравнивание: слева, справа, по центру)
  • отступ текста от краёв блока
  • высоту строки

2. Изображения

Блок с элементом “Картинка”.

В левом меню выберите блок “Картинка” и перетащите его с помощью мыши в шаблон письма.

КартинкаИзображение можно добавить двумя способами: загрузить с компьютера или выбрать из картинок, которые вы ранее загружали в email сервис.

Добавить изображение

Изображения, ранее загруженные в email-сервис, хранятся в Менеджере Изображений, который находится в меню Рассылки-Шаблоны сообщений

Менеджер изображений

После загрузки (или выбора в галерее), изображение появится в шаблоне.

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

Подпись картинки (Альтернативный текст)

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

Если подписи к картинке нет, отобразится название файла — непонятное для получателя и подозрительное для спам-фильтров.

Поэтому мы рекомендуем для каждой картинки указывать понятную подпись.

Альтернативный текст

Ширина изображения

Каждое изображение, добавленное в шаблон письма, изначально имеет размер 100%.
Можно уменьшать его, изменять размер от 100% до 10%.

Выравнивание

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

Отступ от края

Значение этого параметра – равномерный отступ изображения от краев блока: сверху, снизу, справа и слева.

Задать цвет фона

Этот параметр задает фоновый цвет для блока, в котором находится изображение.

Контур

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

Ссылка

Используйте эту опцию чтобы добавить в картинку гиперссылку.
Также можно вместо гиперссылки указать якорь, контактный номер телефона или имейл-адрес.

Якорь используется для того, чтобы кликнув по нему, клиент переходил в закрепленную якорем текстовую часть письма.
Как это можно сделать:
Переместите курсор в место, куда будет установлен якорь, убедитесь, что нижняя часть текстового меню развернута и кликните по значку якоря (в указанном курсором месте появится маленький значок якоря)

Добавить якорь

Теперь укажите имя для якоря (используйте латиницу) — для идентификации якоря на следующем шаге

Укажите имя для якоря

Теперь перейдите к картинке, клик по которой перенесет читателя к месту якоря и укажите Добавить ссылку-Якорь

Добавить ссылку-якорь к картинке

Теперь выберите нужный якорь из выпадающего списка

Выберите якорь
 
Если прикрепить номера телефона, то, кликнув по этому изображению в полученном письме, запустится телефонное приложение, установленное в системе получателя по умолчанию, и пойдет вызов на указанный номер.

Если выбрать вставку "Email", то появится окно для автозаполнения темы письма 

Выбрать email

Когда получатель кликнет по такому изображению, запустится его почтовое приложение и откроется окно с новым письмом с уже заполненными полями адреса получателя и с темой, указанными вами в конструкторе шаблона:

Запуск почтового приложения

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

Учтите, что изменение ширины картинки тянет за собой связанное изменение высоты, по-этому, лучше менять размеры изображения ДО того, как вставлять ее в редактор шаблона.

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

Выбираем нужный элемент в левой панели конструктора и перетаскиваем его в шаблон.

КнопкаБлок с кнопкой состоит из самой кнопки и текста кнопки.

Для начала укажем самое важное – ссылку на страницу, куда должна вести кнопка, и текст, который получатель будет видеть на кнопке. 
Теперь вернемся к параметрам кнопки и к ее внешнему виду.

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

Яркий призыв к действию, оформленный в красивом стиле — дополнительный шанс, что получатель заметит кнопку и захочет её нажать, перейти на ваш сайт.

Поэтому обращайте внимание и на параметры текста.

Кроме того, как и с картинкой, клик получателя по кнопке может запускать вызов по указанному вами номеру телефона или отправку письма (при этом можно указать тему такого письма для ее автозаполнения в почтовом приложении получателя).

Клик по кнопке

Редактирование параметров блока заключается в выборе фонового цвета и указания отступа внутренних элементов от края блока.

Блок с элементом “Разделитель”

Этот элемент следует использовать в случае, когда нужно визуально отделить в шаблоне два блока друг от друга.

Разделить блоки можно отступом или линией.

Если выбрать отступ, то ему можно задать цвет, и тогда блоки с элементами будут разделены цветным блоком:

Отступ

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

Разделитель-линия

Блок с элементом “Видео”

Чтобы добавить видео, перетащите соответствующий блок в шаблон и укажите youtube ссылку на ролик в формате https://youtu.be/GcaZtTDT65w

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

Видео

Вы можете менять расположение и размер предпросмотра, устанавливать фон, отступы внутри блока.

Блок "Соцсети"

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

Соцсети

Обратите внимание на выбор типов ссылок:

Типы ссылок соцсетей

Follow-ссылка: требует указать адрес страницы или ID профиля, на которые сможет подписаться получатель письма после перехода по ссылке.

Шаринг письма: кликнув по ссылке получатель распостранит веб-версию письма.

Шаринг ссылки: требует указания url страницы, которую получатель письма распостронит в своей ленте новостей после клика.

Оплата

Элемент Оплата используется для предоставления опции оплаты в письме

Выберите этот элемент в левой панели конструктора и кликните по нему.
Появятся две опции оплаты: Яндекс.Касса и QIWI

Оплата

При вставке этих вариантов оплаты, нужно указать сумму и некоторые данные товара 

Информация об оплате

Информация об оплате

и перейти в меню Настройки Сервиса для подключения этих методов оплаты к вашему акаунту

Настройки сервиса

Оцените, насколько полезна статья "Сделайте собственный шаблон письма"

User Rating: 4 / 5 (17)

Другие полезные страницы

Популярное в нашем блоге

Начните пользоваться сервисом SendPulse прямо сегодня