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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6) Контур

Хотите, чтобы изображение обрамлялось рамкой? Отметьте в выпадающем списке “Рамка → Да”, а затем укажите цвет и ширину рамки. Наблюдать за изменениями изображения можно в шаблоне справа в режиме реального времени.

7) Сделать ссылкой

Чтобы сделать изображение гиперссылкой, выберите “Сделать ссылкой → Да”. Из четырех вариантов ссылок выберите нужный: ссылка на страницу, email адрес, телефон или якорь

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

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

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

Блок с кнопкой состоит из нескольких элементов: сама кнопка и текст кнопки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

User Rating: 4 / 5 (16)

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

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

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