Приветствуем! В этой статье мы рассмотрим, как собрать шаблон письма на примере конструктора Cheapsender. Все, что от вас потребуется – следовать пошаговой инструкции, по завершении которой вы научитесь создавать собственные уникальные шаблоны.
Особенности конструктора Cheapsender
Мы предлагаем инструмент, позволяющий:
- всего в несколько кликов добавлять необходимый блок – это может быть кнопка, текст, меню, изображение, заголовок, HTML-код, разделитель или столбцы;
- разделять контент на несколько блоков, благодаря чему можно гибко работать с содержимым письма;
- легко редактировать каждый элемент, изменяя цвет, стиль, размер и другие параметры;
- детально настраивать мобильную версию – вы можете задать иной фоновый цвет, изменить отступы, настроить типографику и прочие параметры;
- без знаний программирования, основ дизайна и типографики создать эффективное письмо, которое будет приносить новые продажи.
О том, как происходит работа в конструкторе, разберемся в инструкции ниже.
Создаем шаблон письма
Для вашего удобства мы сделали пошаговую инструкцию, в ходе которой мы небольшими шагами дойдем от регистрации до полноценного письма, готового к рассылке.
Шаг 1: Проходим регистрацию
Чтобы воспользоваться нашим сервисом, не нужно оплачивать тарифный план и привязывать карту. Каждый пользователь может зарегистрироваться, бесплатно отправить до 100 писем и получить полный набор функционала без ограничений.
Давайте пройдем небольшую регистрацию:
- Открываем главную страницу Cheapsender и нажимаем «Попробовать бесплатно».
- Заполняем форму и нажимаем «Зарегистрироваться».
- После этого необходимо открыть почту, которая была указана при регистрации, и подтвердить активацию аккаунта.
- В результате мы получаем доступ к аккаунту, где будет происходить вся последующая работа.
Шаг 2: Создаем пустой шаблон
Теперь, когда аккаунт зарегистрирован, мы можем переходить к созданию уникального шаблона. Первым делом добавим пустой шаблон, который будем постепенно наполнять контентом.
Для этого выполняем следующее:
- Переходим во вкладку «Шаблоны» и выбираем «Создать шаблон».
- На отобразившейся странице выбираем «Создать шаблон в конструкторе». Также вы можете создать шаблон с помощью HTML-редактора, но для этого вам потребуются знания в верстке либо готовый шаблон, состоящий из кода.
- Таким образом мы попадаем в окно редактирования шаблона, где изначально нам представлен пустой холст. Далее мы будем наполнять его контентом.
Обратите внимание на нижнюю заметку, где сказано, что ссылку для отписки добавлять не нужно – она автоматически будет отображаться в оплаченной рассылке. Это говорит нам о том, что можно сконцентрироваться лишь на дизайне и контенте – важные элементы уже будут добавлены в письмо.
Шаг 3: Добавляем контент
Для примера мы создадим рассылку, которая будет приветствовать новых подписчиков. Структура ее следующая: шапка с логотипом, разделитель, блок с приветствием, ссылки на социальные сети. Вам необязательно делать то же самое, инструкция построена таким образом, что вы сможете сразу конструировать собственное письмо.
Давайте приступим:
- Первым делом добавим один столбец, в котором будет содержаться логотип. Для этого кликаем по контентной области и в блоке «Столбцы» выбираем первый элемент. Обратите внимание, что предоставляются различные вариации столбцов – это может быть полезно, когда нужно распределить несколько элементов в одной строке.
- Теперь давайте добавим в столбец изображение – логотип компании, от которой будет приходить рассылка. Для этого выбираем «Добавить контент» и из правой части переносим элемент «Изображение».
- Следующим шагом в добавленный элемент загружаем изображение – для этого в правой части отведено специальное поле.
- Чтобы уменьшить размер изображения, необходимо убрать галочку с пункта «Автоматическая ширина». После этого можно будет регулировать размер элемента с помощью ползунка.
- В этом же разделе мы можем добавить альтернативный текст, который будет полезен для SEO, прикрепить к изображению URL-ссылку для перехода на другую страницу и сделать многое другое. Это останется вам на самостоятельное изучение – сложного ничего нет, а текстовое описание поможет вам быстро со всем разобраться.
- Также давайте добавим разделитель, который будет отделять шапку письма от основного контента – для этого в правой части выбираем соответствующий элемент и переносим его на контентную область.
- Теперь добавим текстовый блок, в котором мы будем приветствовать нового подписчика. Для этого из правой части переносим элемент «Столбцы» – в дальнейшем мы в него вставим текст.
- Осталось добавить элемент «Текст».
- Добавляем необходимый текст и переходим к его редактированию. Давайте сделаем его по центру, увеличим высоту строки, а также изменим размер. Для увеличения шрифта необходимо дважды кликнуть по тексту – после этого отобразится меню сверху, где доступны различные настройки.
- Аналогичным образом добавляем заголовок «Мы в социальных сетях» и ниже вставляем блок с 3 колонками, в которых содержатся изображения с социальными сетями. Несколько пояснений: шрифт жирный делается в том же меню, где уменьшается/увеличивается его размер, а иконки были предварительно загружены с сервиса Flaticon.
- Чтобы сделать иконки кликабельными, достаточно поочередно их выбрать и прописать ссылку в блоке «Действие».
На этом разработка шаблона еще не заканчивается – далее мы проработаем мобильную версию. Вы же можете продолжить делать компьютерную версию – например, можно добавить блок с контактами либо дописать дополнительную информацию для новых подписчиков, познакомить с командой и рассказать, чем будет полезна рассылка.
Читайте также
Шаг 4: Настраиваем мобильную версию
Конструктор для смартфонов позволит вам быть спокойными, что у пользователей не возникнет проблем при открытии письма в мобильном приложении. Но даже без этих настроек ваше письмо будет автоматически адаптировано. Настройки нужны для того, чтобы внести корректировки, например, когда нужно изменить отступы или увеличить шрифт.
Итак, чтобы открыть мобильную версию, выполняем следующее:
- Выбираем любой созданный блок и в правой части нажимаем «Мобильный телефон».
- В результате окно редактирования применяет форму мобильного устройства. Давайте немного увеличим логотип, изменим размер текста и уменьшим иконки социальных сетей. Для этого поочередно применяем уже известным нам действия – выбираем элемент и меняем настройки в правой части экрана.
Также при необходимости вы можете скрыть элементы в мобильной или десктопной версии. Например, для смартфонов можно отобразить разделение, а для ПК – скрыть.
Шаг 5: Завершаем создание шаблона
После того как работа с шаблоном будет завершена, его нужно опубликовать, но перед этим рекомендуем проверить, как все выглядит в реальности. Для этого можно воспользоваться режимом эмуляции. Чтобы его запустить – нажимаем в верхней части на иконку монитора или телефона. Первая демонстрирует шаблон на ПК, вторая – на смартфоне.
Осталось задать название шаблона и опубликовать его – для этого в левой части вводим имя, а справа нажимаем «Сохранить и выйти».
В последующем вы можете отредактировать созданный шаблон в разделе «Шаблоны».
Также письмо будет отображаться в списке доступных шаблонов, когда вы будете создавать рассылку. Это полезно в тех случаях, когда есть множество различных шаблонов и нужно сделать рассылку с конкретным типом письма.
Вместо заключения
Создание письма в конструкторе Cheapsender – это дело одного часа. Предварительно рекомендуем воссоздать макет в графическом редакторе, например Figma, а также заранее подготовить все необходимые изображения. Так вы сможете в кратчайшие сроки запустить первую рассылку.
Комментарии