Работая в сервисе email рассылок SendPulse, вы можете легко и быстро создавать письма, используя блочный конструктор писем.
Основные преимущества этого конструктора:
- вы добавляете нужный блок или элемент, просто перетащив в шаблон письма с помощью мыши
- вы легко редактируете каждый элемент, изменяя цвет, стиль, размер и другие переметры
- вам не нужно обладать специализированными знаниями, уметь работать с html-кодом и т.п.
Первым шагом мы предлагаем вам ознакомиться с элементами, которые можно использовать для создания письма. Итак, для начала переходим в меню Шаблоны сообщений -> Добавить новый шаблон.
В сервисе есть несколько вариантов создания email сообщений. В данном случае мы говорим про конструктор писем, который и выбираем для создание письма.
Выбор структуры шаблона
Представьте себе мысленно письмо, которое хотите отправить получателям – и выбирайте нужную структуру шаблона.
В примере мы остановимся на шаблоне со структурой "Новости".
Перед вами конструктор писем. Cлева – доступные элементы, которые можно добавлять в письмо, справа – варианты редактирования выбранного элемента. По центру - начальный шаблон, который вы и будете править, добавляя и редактируя элементы.
Конструктор писем включает 4 группы элементов:
1. Текстовые элементы
Блок с элементом “Текст”. Выберите слева элемент “Текст” и перетащите его в шаблон.
В итоге вы получаете в центре - визуальное отображение текста в блоке и параметры для редактирования/оформления текста справа.
Все правки производятся в редакторе. В шаблоне вы можете в режиме реального времени видеть, как изменяется текст в зависимости от ваших правок. Доступные параметры для редактирования текста:
- цвет текста
- цвет фона
- размер и стиль шрифта
- начертание и выравнивание
- высота строки
- внутренний отступ
- контур
- + в визуальном редакторе текста вы можете добавить гиперссылку, вставить таблицу, маркированный список.
Добавление переменных происходит внутри текстового блока – меню “Переменные” с выпадающим списком.
Важно! Если вы хотите добавить текст в редактор копипастом (скопировать-вставить), то рекомендуется копировать текст из простого текстового файлика (.txt). В противном случае в редактор могут “подтянуться” стили из вашего Word файла, что не всегда хорошо.
Отдельные параметры есть и для редактирования блока: цвет фон и отступ от краев (равноценный отступ текста от краев блока: сверху, снизу, слева и справа).
Изменим размер и стиль шрифта, добавим фоновый цвет для блока, контур и установим отступ от всех краев 50px. Результат будет вот такой:
Этот текстовый блок, как и любой блок в шаблоне, может быть скопирован, удален или перемещен в другое место.
Структура с элементом “Прехедер”
Напомним, что прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы. Выбираем нужный элемент в конструкторе (находится в "Добавить структуру - Примеры"), перетаскиваем в шаблон и размещаем над всеми элементами сверху.
По-умолчанию, блок “Прехедер” состоит из двух элементов в двух колонках:
- непосредственно прехедер
- веб-версия письмаю (также ссылку на веб-версию письма можно добавить через меню “Переменные”)
Чтобы начать редактировать элемент, просто кликните на нем левой кнопкой мыши
Структура с элементом “Футер”
Футер – это то, чем заканчивается ваше письмо – блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.
Вы добавляете элемент в шаблон, изменяете текст на свой и устанавливаете параметры блока.
Вы можете выбрать внешний вид футера: будет ли он сплошным или разделенный на две колонки. Как и в любом другом блоке, в футере вы можете изменить текст, добавить данные своей компании и задать фоновый цвет блока в целом.
Блок с элементом “Ссылка отписки”
Элемент “Отписаться” находится в блоке с переменными. Выбираем ссылку отписки, которая должна отображаться для пользователей в письме.
Важно! Чтобы использовать личную ссылку отписки в письме, её нужно заранее создать (меню “Настройки -> Ссылки отписки”).
Если вы не создавали ссылку отписки, тогда в шаблон добавится стандартная ссылка отписки “Отказаться от рассылки”. Что касается параметров редактирования, в этом блоке вы можете изменить:
- цвет (блока и текста)
- шрифт (стиль, размер и начертание)
- положение текста (выравнивание: слева, справа, по центру)
- отступ текста от краёв блока
- высоту строки
2. Изображения
Блок с элементом “Картинка”
В левом меню выберите блок “Картинка” и перетащите с помощью мыши его в шаблон письма.
Изображение можно добавить двумя способами: загрузить с компьютера или выбрать в галерее (среди тех картинок, которые вы ранее загружали в email сервис).
После загрузки (или выбора в галерее), изображение появляется в шаблоне.
Параметры каждого изображения могут быть изменены:
1) Подпись картинки (Альтернативный текст)
Бывают случаи, когда почтовый клиент не отображает картинки в вашем письме рассылки. Тогда на месте изображения и будет показана указанная вами подпись картинки.
Если подписи к картинке нет, отобразится название файла – непонятное для получателя и подозрительное для спам-фильтров.
Поэтому мы рекомендуем вам для каждой картинки указывать понятную подпись.
2) Ширина изображения
Каждое изображение, добавленное в шаблон письма, изначально имеет размер 100%. Вы вправе уменьшать его, изменять размер, от 100% до 10%.
3) Выравнивание
Под выравниванием подразумевается положение картинки относительно краев блока, в котором она находится. Картинку можно выровнять по левому краю. по правому краю и по центру.
4) Отступ от края
Значение этого параметра – равномерный отступ изображения от краев блока: сверху, снизу, справа и слева.
5) Задать цвет фона
Обратите внимание, что этот параметр задает фоновый цвет для блока, в котором находится изображение.
6) Контур
Хотите, чтобы изображение обрамлялось рамкой? Отметьте в выпадающем списке “Рамка → Да”, а затем укажите цвет и ширину рамки. Наблюдать за изменениями изображения можно в шаблоне справа в режиме реального времени.
7) Сделать ссылкой
Чтобы сделать изображение гиперссылкой, выберите “Сделать ссылкой → Да”. Из четырех вариантов ссылок выберите нужный: ссылка на страницу, email адрес, телефон или якорь
Важно! Всегда указывайте полную ссылку на страницу, начиная с http://.
Блок с элементом “Кнопка”
Выбираем нужный элемент справа в конструкторе и перетаскиваем его в шаблон.
Блок с кнопкой состоит из нескольких элементов: сама кнопка и текст кнопки.
Для начала укажем самое важное – ссылку на страницу, куда должна вести кнопка, и текст, который получатель будет видеть на кнопке. Теперь вернемся к параметрам кнопки и ее внешнему виду.
Вы можете выбрать стиль кнопки, который вам нравится, изменить ее ширину, высоту, цвет, выравнивание относительно краев блока.
Яркий призыв к действию, оформленный в красивом стиле – дополнительный шанс, что получатель заметит кнопку и захочет её нажать, перейти на ваш сайт.
Поэтому обращайте внимание и на параметры текста.
Редактирование параметров блока заключается в выборе фонового цвета и указания отступа внутренних элементов от края блока.
Блок с элементом “Разделитель”
Этот элемент следует использовать в случае, когда нужно визуально отделить в шаблоне два блока друг от друга.
Конструктор писем предлагает использовать в качестве разделителя – линию, стиль которой можно выбрать из выпадающего списка.
Кроме того, что вы можете изменять ширину линии-разделителя, ее стиль и цвет, вы также можете контролировать ширину блока и его цвет фона.
А если выбрать единый цвет линии и блока – то можно получить единый разделитель, шириной в блок.
Блок с элементом “Видео”
Вам нужно добавить видео? Перетяните соответствующий блок в ваш шаблон и укажите ссылку – в шаблоне автоматически отобразится скриншот, при клике на который пользователь попадет на страницу просмотра видео.
Блок "Соц.сети"
Перетягиваете соответствующий блок в необходимое место и приступайте к его редактированию. вы можете выбрать внешний вид иконок, добавить или удалить иконки, задать ссылки и т.п. Все редактирование производиться в правой части экрана.