Если театр начинается с вешалки, то email-рассылка — с подготовки письма. В DashaMail создать его можно разными способами: загрузить HTML-код по прямой ссылке со страницы или файлом в ZIP-архиве, а также работать с кодом напрямую. Но самый простой и удобный метод — собрать письмо в блочном онлайн-редакторе. Ведь для работы в нем не требуется специальных знаний и навыков, а в результате вы получаете HTML-макет, готовый к отправке. При этом в процессе работы вы не встретитесь ни с одним HTML-тегом.
В этой статье мы разберем по шагам, как же работать в онлайн-редакторе DashaMail. Если же вам больше подходит формат видеоуроков, смотрите наш плейлист на Youtube.
Итак, для начала создайте новый шаблон в разделе «Шаблоны»:
Вы можете создать письмо с нуля или выбрать один из готовых шаблонов:
Готовые шаблоны от дизайнеров DashaMail
Самый простой и быстрый способ создать красивое письмо — выбрать готовый дизайнерский шаблон и заменить в нем контент. Вариантов шаблонов достаточно много, и мы регулярно добавляем новые. Цветовая гамма, шрифты, структура — все тщательно продумано дизайнерами:
Готовые шаблоны от DashaMail отлично подойдут, если рассылку нужно сделать «уже вчера», или если вы новичок в email-маркетинге. Просто выберите понравившийся вариант и адаптируйте под себя, заменив текст и изображения. Письмо будет корректно отображается на всех устройствах — можете быть уверены.
Как создать письмо в онлайн-редакторе с нуля
Итак, вы решили создать письмо самостоятельно. Давайте разберемся в «устройстве» онлайн-редактора. Он состоит из нескольких элементов:
Общие настройки и адаптивность письма
Справа есть меню общих настроек письма: ширина, цвет фона. Мы рекомендуем установить ширину письма 600 рх — это оптимальный размер для корректного отображения в большинстве почтовых программ и на разных устройствах. При создании письма в нашем онлайн-редакторе вам не нужно отдельно адаптировать его для мобильных устройств — процесс происходит автоматически. В качестве фона при желании можно загрузить изображение:
Полоса
Полосы задают фон, стиль и внешние границы письма. Ее можно дублировать или переместить, а также при необходимости скрывать на мобильных устройствах. Чтобы выделить полосу, нажмите на нее справа:
Структура
Структура создается внутри полосы. Она может быть единой, двухколоночной, трехколоночной и так далее. Элементы структуры могут идти подряд или располагаться в шахматном порядке. Таким образом можно реализовать даже самые смелые творческие задумки:
Вот пример структуры из 2х колонок. В каждой из них 3 элемента контента: заголовок, текст, кнопка CTA. В процессе работы можно менять структуру, добавляя новые колонки, менять их ширину с помощью ползунка или нажать кнопку «уравнять»:
Контент
Заданную структуру необходимо наполнить контентом. Для этого выбирайте нужный вариант в меню слева и перетаскиваете в структуру. Это может быть изображение, текст, кнопка CTA или кнопки социальных сетей:
Для примера создадим двухколоночная структуру с изображением, текстом и кнопкой:
Если вам требуется создать несколько колонок с аналогичной структурой контента (например, изображение, текст и кнопка), настройте сначала все элементы в одной колонке, а затем копируйте ее целиком. Таким образом, потребуется только поменять контент, не внося дополнительные изменения в настройки каждой колонки.
Элементы письма
Текст
Для работы текстом доступно множество функций: вы можете менять шрифт, его размер, цвет, добавить буллиты, ссылки и много другое. Практические все, что вы могли бы сделать в полноценном текстовом редакторе. Отступы в структуре и высоту строки можно настроить в меню справа:
Несколько советов, которые помогут вам при работе с текстом:
- Рекомендуем использовать один выбранный вами шрифт для всего письма, выделяя заголовки и подзаголовки размером, отступами или другими настройками. Так текст будет визуально более гармоничным.
- Соблюдайте соразмерность шрифта и высоты строки
- Если в письме много текста, обязательно разделите его на абзацы для удобства восприятия.
- Используйте буллиты, там, где нужно выделить несколько пунктов в тексте.
Изображения
Картинки в письмо можно редактировать: изменять отступы от края, закруглить края или добавить обводку. Картинку можно сделать кликабельной, добавив ссылку в верхнем меню:
При загрузке помните, что изображение не должно быть больше 10 Мб, иначе письмо будет слишком тяжеловесным.
Кнопки
Кнопки должны привлекать внимание подписчика, поэтому делайте их достаточно заметными. Если письмо предполагает, что пользователь должен совершить какое-то действие — перейти на сайт, оформить покупку или заявку, лучше всего разместить кнопку на первом экране, чтобы увеличить конверсию.
В настройках можно менять размер кнопки и размер текста в ней, основной цвет и цвет обводки, а также добавить закругление:
Социальные сети
Используйте «Социальный» блок, чтобы добавить кнопки соцсетей. Выберите из списка соцсети, которые собираетесь использовать и добавьте ссылки на них. Вы можете сделать значки круглыми или квадратными, поменять их цвет и размер:
Разделитель
Если требуется визуально усилить разделение между структурами, можно добавить разделительную линию — прямую или пунктирную. Для этого используйте блок «Разделитель» в левом меню. Стиль, цвет и толщину линии можно менять:
Футер письма
Футер автоматически формируется при создании шаблона. Это обязательный блок в самом конце, где должна быть информация о правомерности использования персональных данных пользователей. Другими словами, вам нужно указать, почему подписчик получил это письмо. Например: «Вы получили это письмо, потому что подписались на нашу рассылку на сайте dashamail.ru». Также обязательно должна быть кнопка «отписаться», она формируется автоматически при создании шаблона письма. Так выглядит футер в email-рассылках DashaMail:
По желанию вы можете добавить и другие данные о своей компании. Обычно в футер добавляют адрес, телефон и ссылку на веб-версию письма.
Прехедер
Прехедер — это текст, который отображается в почтовой программе после основного заголовка. Если не заполнить прехедер, в него подтянутся технические данные. Это может негативно повлиять на % открываемости писем, ведь создается ощущение, что рассылку готовили «на скорую руку». Выберите «Прехедер» в верхнем меню и добавьте текст:
Предпросмотр
Перед отправкой нужно обязательно убедиться, что письмо выглядит корректно на десктопе и на мобильных устройствах: элементы на своих местах и выглядят соразмерно друг другу. Заодно можно проверить текст на наличие опечаток, а также корректную работу ссылок. Ведь после отправки исправить письмо уже не получится. Для проверки используйте функцию «Предпросмотр»:
Проверка ГлавРедом
С помощью проверки ГлавРедом можно оценить ваш текст на «чистоту» и «читаемость». Для этого выберите «ГлавРед» в верхнем меню «Другие»:
Заключение
В онлайн-редакторе DashaMail есть все инструменты, чтобы создавать красивые письма. Вы можете создать письмо с нуля, выбрать один из готовых дизайнерских шаблонов или заказать разработку шаблона у наших дизайнеров.
Создавайте письма, которые хочется читать, вместе с нами.
Загрузка...