Как создать базовое письмо в новом редакторе: краткий гид по фишкам и блокам редактора

С любовью от DashaMail

В одной из недавних публикаций мы рассказали про новый редактор DashaMail. Это профессиональный инструмент, с помощью которого каждый может создавать красивые продающие письма без дизайнера и верстальщика. И это здорово! 

Разберем пошагово, как создать базовое письмо. DashaMail предлагает 3 способа создания шаблонов: загрузить свой HTML-макет, воспользоваться готовым шаблоном от дизайнера или создать шаблон с нуля в онлайн-редакторе. 

Выбрать способ создания шаблона

Краткий обзор предлагаемых вариантов

Работа с готовым HTML-макетом 

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

Импорт html-шаблона

Применение готовых шаблонов 

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

Работа с готовыми шаблонами

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

Обучающий шаблон в сервисе

Создать с нуля в онлайн-редакторе

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

Как это выглядит на старте: 

Создать шаблон с нуля

Если в двух словах, то очень минималистично, чтобы не ограничивать полет вашей фантазии. 🙂 

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

Оформление 

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

Оформление шаблона

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

Отметим несколько моментов. 

  • Самая распространенная ширина письма — 600 пикселей. В редакторе настроена по умолчанию. 
  • Старайтесь не использовать картинки в фоне, так как они поддерживаются ограниченным количеством почтовых программ.
  • Используйте стандартные шрифты.
  • Не забывайте использовать отступы между блоками и строками, чтобы письмо легче воспринималось.

Базовая структура письма и контентные блоки

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

Структуры письма

Из базовых блоков доступны следующие:

Базовые блоки

Модули — это созданные вами и сохраненные структуры, которые вы можете многократно использовать при сборке любого шаблона. Актуально при подготовке большого числа однотипных шаблонов. 

Хедер

Хедер — это шапка вашего письма. Примерно то же самое, что на сайте — логотип и меню (опционально). 

Например, чтобы создать хедер, используйте структуру с одной колонкой. Далее воспользуйтесь блоком «Картинка» и загрузите ваш логотип.

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

Хедер письма

Чтобы добавить меню, нужно также добавить структуру с одной колонкой и далее использовать блок «Меню».

Главный баннер письма 

Баннер — основное изображение, «цепляющее» внимание подписчика. Определяет то, как подписчик воспримет письмо. Используется опционально. Обычно применяется в маркетинговых рассылках. 

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

Чтобы добавить баннер, воспользуйтесь структурой с одной полосой и используйте блок «Баннер». 

Баннер письма

Основное содержимое письма

Здесь вы можете использовать любые базовые блоки и созданные ранее модули. 

Текст

При работе с текстом по умолчанию используются настройки, заданные в меню «Оформление». Но в процессе создания письма вы можете их менять с помощью горизонтального меню, появляющегося в верхней части редактора. Если в тексте есть длинные слова, то для них можно включить функцию переноса строк, что поможет избежать горизонтальную прокрутку на мобильных устройствах. 

Используйте персонализацию. Персонализация также доступна в верхней горизонтальной панели настроек. 

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

Изображения

При работе с изображениями используйте структуры с разным количеством колонок и блок «Картинка». 

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

Не забывайте указывать ALT-текст для улучшения проходимости спам-фильтров. 

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

Ролловер эффект

Видео

При работе с видео можно использовать 2 способа: вставить ссылку на видео или встроить видео в письмо. 

Первый вариант — идеальный, поскольку работает везде. Для вставки ссылки на видео используйте структуру с одной колонкой и блок «Видео». 

Вставка видео

Второй вариант работает только в Apple Mail, нативной почте iOS, Thunderbird и Outlook для Mac. Используйте структуру с одной колонкой и блок HTML, где нужно будет добавить код встраивания. 

Кнопки

При работе с кнопками используйте базовый блок «Кнопка». В редакторе к кнопке можно применить ховер-эффект, в результате чего она будет менять цвет при наведении. 

Ховер-эффект для кнопки

Карточки товаров

В редакторе есть возможность создавать карточки товаров. Карточка товара, по сути, контейнер из 3-4 блоков: картинка, текст + цена и кнопка. Обычно приходится тратить уйму времени на заполнение таких элементов в письме, особенно когда нужно подготовить товарную рассылку с десятком карточек. Редактор решает эту проблему — вы можете создавать smart-объекты. С помощью smart-объектов процесс обновления автоматизируется: вы просто указываете ссылку на страницу с товаром, а редактор сам подтягивает оттуда всю необходимую информацию в макет письма. 

Карточки товаров

Таймер обратного отсчета 

Для срочных маркетинговых акций вставьте в письмо таймер обратного отсчета. Для этого используйте структуру с одной колонкой и блок «Таймер». 

Таймер обратного отсчета

Разделитель

Как декоративный элемент, улучшающий восприятие информации в письме, используйте разделитель. Для этого добавьте структуру с одной колонкой и блок «Разделитель».

Соцсети

Вы также можете использовать блок «Соцсети» для добавления иконок нужных вам соцсетей. 

Футер письма

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

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

Футер письма

Адаптивность каждого письма

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

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

Адаптивность задается в разделе Оформление/Адаптивность, а также при настройке блоков в разделе Контент. 

Заключение

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

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

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

Готовы начать улучшать свой email-маркетинг?

До 100,000 подписчиков в течение 14 дней бесплатно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *