Разбираемся, как правильно расположить баннер, карточки товаров и другие элементы, чтобы сделать макет письма для рассылки по электронной почте.
Из чего состоит письмо
Содержимое электронного письма подчинено определённой логике: сначала идёт прехедер, потом шапка, тело и подвал (футер).
Эту структуру можно использовать как образец. Дальше в статье мы рассмотрим каждый элемент и его составляющие. Но прежде чем составлять макет рассылки, нужно разобраться: кто будет получать письмо, и с какой целью мы его отправляем.
Выбранная аудитория и сформированная цель сообщения — это то, от чего отталкивается логика расположения элементов в письме, фундамент, на котором стоит макет email-рассылки. Об этом мы рассказывали в статье о том, как сделать рассылку с нуля.
Также важно помнить про размеры макета для рассылки — стоит делать ширину письма не более, чем в 600 пикселей, чтобы письмо корректно отображалось в разных почтовых сервисах: Яндекс Почте, Gmail и других.
Какие блоки нужны в макете письма
В этом разделе рассмотрим основные блоки, которые помогут сделать макет письма: прехедер, хедер, баннеры, текст, кнопки, ссылки и футер.
Прехедер: что в нём написать
Прехедер — это текстовое уточнение темы письма, которое попадает в превью.
Например, вот письмо блога про инвестиции с анонсом новой статьи. В прехедере написано: «Истории провалов инвесторов» — этот текст пойдёт в превью и отобразится первым после темы.
Как сделать прехедер в макете рассылки: прописывайте в прехедере текст в зависимости от темы письма. Например, в прехедере рассылки с темой «Запускаем продажу новых наушников» можно написать:
- Скидка 25% для самых быстрых.
- Не боятся воды и влаги.
- Активное шумоподавление.
- Красный, чёрный, белый цвета.
Шапка письма: какие элементы можно добавить
Шапка, или хедер — это место, где размещаются логотип, заголовок, меню и другая дополнительная информация. Шапка помогает читателю идентифицировать, от кого пришло письмо.
В шапке можно разместить меню или показать персональные данные клиента, что актуально для магазинов и маркетплейсов. Для этого нужно добавить ссылки на разделы сайта, личный кабинет клиента и количество бонусных баллов.
Больше примеров и особенностей этой части письма мы разобрали в отдельной статье, которая поможет вам правильно оформлять шапку.
Баннер: как выбрать и где расположить
После прехедера и шапки идёт «тело письма». Это основная часть email-рассылки, в которой содержится оффер, подборка товаров или полезная информация. Эта часть начинается с баннера. Он может занимать всё тело письма, но чаще — только его часть.
Баннер нужен для привлечения внимания, создания тональности сообщения и призыва к действию. В баннер обычно вшивается ссылка, которая ведёт на страницу предложения или сайт компании. Для рекламной рассылки в баннер выносят главную мысль, слоган, цепляющие слова, оффер, размер скидки, условия спецпредложения.
В письме может быть несколько баннеров. Действует правило: один баннер — один оффер — одно действие.
В баннере может быть не только картинка, но и заголовок. Он интригует, раскрывает тему или служит подводкой.
Разные оформления баннеров позволяют создавать рубрики рассылок или визуально объединять письма для спецпроектов. Когда люди открывают письмо и видят непривычное оформление, то это задаёт особое настроение и тон рассылке.
Текст: как работает в письме и на что обратить внимание
Текст — это основная информация, которая идёт после баннера.
Если мы говорим про рекламную рассылку, то в основном тексте дополнительно раскрывается оффер и отрабатываются возможные возражения. В информационной рассылке текст — это основной элемент письма.
Избегайте воды и штампов. Вместо:
- «Лидеры рынка» → «Лидеры рынка в 2021 году в определённом рынке».
- «Лучший продукт» → «По исследованию компании N наш товар выбирают чаще, чем товары конкурента».
- «Качественные материалы» → «Используем итальянскую кожу, а у мастеров подтверждённые профессиональные сертификаты».
Структурируйте текст: разбивайте его на абзацы, делайте подзаголовки, выделяйте цитаты. Рекомендуем делать текст в одну или максимум две колонки, потому что так вёрстка не поплывёт на разных устройствах и грамотно перестроится на мобильную и обратно.
Вот как можно использовать одну или две колонки в зависимости от содержания письма.
Если верстать текст в два столбца, нужно подумать, как письмо будет выглядеть на маленьком экране. К примеру, если блок просто уменьшится, текст может стать нечитаемым. Поэтому необходимо использовать адаптивную вёрстку, чтобы на экране смартфона блок стал одностолбцовым — один из них сместится вниз или вверх.
Проще сделать такую вёрстку в конструкторе рассылок, чтобы не разбираться в HTML-коде. Например, в редакторе от CDP Sendsay есть готовые блоки из двух столбцов, которые свёрстаны с адаптацией под мобильный экран. Достаточно выбрать нужный блок и наполнить его контентом, всё остальное уже настроено. Выглядит интерфейс так: слева — готовые блоки для разных элементов письма, справа — макет письма, куда нужно перетащить нужный блок.
Узнать больше про конструктор писем Sendsay →
Подробнее про текст в рассылках ― в статье, как за 17 шагов сделать качественный текст.
Иллюстрации и фон рассылки: на что обратить внимание
Чтобы оформить макет письма, нужно помнить, что визуал рассылки — это не только картинки для товаров или иллюстрации для текста, но и фоновый цвет, подложки и графические элементы. Это поможет привлечь внимание пользователя к важным элементам рассылки. У нас есть большая статья на эту тему: «Подбираем картинки для письма и оформляем email-рассылку с помощью изображений».
Цвет фона или отдельных секций письма можно задать в конструкторе. В Sendsay это делается так: нужно дважды кликнуть по нужной секции и откроется дополнительное меню настройки. Там можно поменять фон в целом или только фон контента.
Если нужно поменять фон письма в целом, нужно нажать в правом верхнем углу иконку шестёренки, и в поле «Цвет всего письма» выбрать нужный оттенок.
Далее — несколько подходов к оформлению в качестве примеров:
- Графика позволяет дополнительно разделить смысловые блоки письма.
- С помощью фона и цвета можно создать в письме настроение. А ещё это выглядит красиво и стильно.
- Графика позволяет заменить текст там, где он не нужен, или дополнить его.
Карточки товаров: как расположить и привлечь внимание
Карточка обычно устроена так: изображение + текстовое описание + цена. Их можно оформить как в один, так и несколько столбцов. Карточки нужны, чтобы предоставить клиенту товары, которые можно купить прямо сейчас. Используется для реакционных, рекламных и триггерных рассылок.
В карточке главное — фотография товара, цена и кнопка для покупки. Подобрали удачные примеры карточек товаров:
- Карточки товаров в ряд — когда товара много и при его выборе клиент опирается на визуал.
- Карточки товаров столбцом — когда товара немного, а визуал не играет особой роли.
CDP Sendsay позволяет персонализировать карточки так, чтобы каждый получатель видел товары, интересные лично ему. Для этого нужно использовать функцию динамического контента — именно она позволяет сделать шаблон письма, в который алгоритмы платформы будут подставлять подходящие товары.
Это может быть массовое письмо с анонсом акции или триггерная рассылка, например, по сценарию брошенной корзины. Маркетологу нужно создать шаблон, задать правила подбора товара и настроить рассылку.
Ссылки: как правильно добавлять в текст и баннеры
Ссылки нужны, чтобы клиенты переходили на сайт и совершали целевое действие. Для отслеживания статистики переходов лучше добавить UTM-метку — это можно сделать с помощью бесплатного сервиса от CDP Sendsay.
Ссылки можно ставить на любой элемент письма, но соблюдайте логику. Если на баннере указана скидка, то при переходе человек должен попасть на специальную страницу с акционным товаром в, а не на главную.
Примеры, как ещё используют ссылки:
- Для увеличения кликабельности и переходов на сайт — любой элемент в письме ведёт на товар.
Кнопки: как расположить и что написать
Кнопки, как и ссылки, обычно ведут на сайт компании или в приложение. Их можно оформить картинкой со ссылкой, с помощью готовых блоков в конструкторе рассылки или HTML-кода. Кнопки помогают привлечь внимание читателя и призывают совершить действие. Хорошо работают элементы, которые читаются без контекста или, наоборот, дополняют его.
Другой вариант — добавить новый смысловой контекст, который пересекается с темой. Например, пойти от важных для читателей вопросов.
Иногда кнопки позволяют пробить «баннерную слепоту». Хороший пример — рассылка Т—Ж.
Что разместить в подвале макета письма
Подвал письма ещё называют футером. Это обязательный элемент, где по закону «О рекламе» нужно указать ссылку на отписку. В Sendsay ссылка для отписки формируется автоматически. Кроме того, в подвал обычно добавляют юридическую и контактную информацию: телефон, сайт, соцсети, адрес.
Чек-лист разработки макета письма для рассылки
Чтобы ничего не забыть при создании макета письма, придерживайтесь следующий правил:
- Определена целевая аудитория рассылки и желаемое действие.
- Ширина макета — 600 пикселей.
- Прехедер дополняет тему письма.
- В шапке расположен логотип, заголовок, иллюстрация или меню сайта.
- Баннер привлекает внимание и призывает совершить действие.
- Текст понятен, разбит на абзацы, его можно бегло просмотреть и понять суть.
- Иллюстрации дополняют повествование или задают тон сообщению
- Карточки товаров оформлены в ряд или по порядку
- Ссылки оформлены гипертекстом или добавлены на картинки, баннеры, логотипы
- Кнопки призывают совершить действие или дополняют контекст
- В подвале письма стоит ссылка на отписку от рассылки и есть контактная информация.
Частые вопросы о макете письма для рассылки
