Блочные редакторы позволяют быстро создавать письма без знания кода и тонкостей дизайна. В этой статье покажем, как пользоваться блочными конструкторами email-писем на примере Sendsay. Вы научитесь создавать рассылки, которые хорошо выглядят на всех устройствах, и сможете запускать кампании в день появления идеи.
Как блочные редакторы упрощают создание писем
Традиционно email-рассылки делались с помощью HTML-вёрстки, а значит, маркетологу приходилось либо изучать теги, CSS и верстать самому, либо привлекать специалиста. А любое изменение означало новый круг правок и согласований, из-за чего стоимость письма неизбежно увеличивалась.
Затем появились блочные онлайн-редакторы писем, которые работают по принципу конструктора. Готовые элементы — шапки, кнопки, блоки товаров — уже свёрстаны и адаптированы под разных устройства. Маркетологу остаётся выбрать нужные блоки, перетащить их в макет письма и отредактировать их.
Плюсы блочных редакторов:
- Скорость создания писем выше. Там, где опытный верстальщик потратит часы на программирование HTML-письма, маркетолог в блочном редакторе может справиться за 20–30 минут.
- Письма автоматически адаптируются под разные устройства. Блоки изначально свёрстаны так, чтобы подстраиваться под экраны планшетов, смартфонов, десктопов. Маркетологу не приходится отдельно продумывать оформление для мобильных устройств, а проверить корректность отображения можно в один клик. При необходимости расположение элементов можно дополнительно настроить.
- Ошибки отображения случаются реже. Блоки проходят тестирование в основных почтовых клиентах, поэтому вероятность того, что письмо «сломается» при просмотре, ниже. Маркетолог может сосредоточиться на содержании, а не переживать из-за технических нюансов.
Давайте посмотрим, как такой редактор реализован в омниканальной CDP Sendsay.
Что есть в конструкторе рассылок Sendsay
У Sendsay есть блочный конструктор email-писем для рассылки, который работает по принципу drag-and-drop. Слева расположена панель с готовыми элементами, справа — рабочая область для сборки письма. Нужно просто взять блок и перетащить в макет:
Недавно вышла обновлённая версия редактора. Она включает историю изменений, навигацию по письму, настройки мобильной адаптации, новые элементы (заголовки, списки, соцсети), управление стилями и проверку ссылок.
Чтобы начать работу в конструкторе рассылок:
- Перейдите в раздел «Контент» в меню Sendsay.
- Нажмите «Создать Email».
- В блоке «Письмо» выберите «В блочном редакторе».
- Далее подтвердите «Использовать новый».
- Поставьте галочку «Запомнить выбор», если хотите всегда работать в новом редакторе.
Теперь вы в интерфейсе конструктора писем. В верхней части находятся кнопки предпросмотра для разных устройств. Рабочая область показывает подсказку: «Перетащите сюда элемент или готовый блок из левого меню».
Перед началом работы с блоками полезно настроить общие стили письма. В новом редакторе есть функция управления стилями, которая позволяет задать единое оформление для всех элементов письма — цвета, шрифты, размеры заголовков и кнопок:
Готовые блоки для быстрой сборки письма
Принцип простой: взять готовую шапку с логотипом, блок с товарами, футер с контактами — и всё, письмо готово за условные 10 минут. Не нужно думать о расположении элементов, цветах, отступах. Тем более, что блоки автоматически подстраиваются под заданный формат письма: шапка растягивается на всю ширину, товарные блоки выстраиваются в ряды. Остаётся только заменить текст, ссылки и картинки на свои.
Нажмите кнопку «Блоки» в левой панели, чтобы открыть библиотеку готовых элементов. В Sendsay доступно 42 готовых шаблона, разделённых на 7 логических категорий. Такое разделение повторяет структуру обычного письма: сверху шапка, посередине основной контент, снизу контакты и юридическая информация:
- шапка — 6 вариантов блоков с логотипом и навигацией;
- меню — 4 варианта навигационных элементов;
- контент — 9 блоков для основной информации письма;
- товары — 7 блоков для e-commerce рассылок;
- статьи — 4 варианта для анонсов материалов;
- контакты — 4 блока с контактной информацией;
- подвал — 8 вариантов футеров с юридической информацией.
Можно взять по одному блоку из каждой категории — и получится полноценное письмо. Или использовать только те категории, которые нужны для конкретной рассылки. Например, для простого информационного письма достаточно шапки, блока контента и подвала.
Отдельные элементы для уникальной структуры
Если готовых блоков недостаточно или нужны особая структура или дизайн письма, можно использовать отдельные элементы. В левой панели доступно 9 базовых элементов для любых задач:
- картинка — для товаров, баннеров, логотипов;
- кнопка — призывы к действию;
- заголовок — для структурирования информации;
- текст — основные текстовые блоки;
- отступ — для пустого пространства между элементами;
- список — маркированные и нумерованные перечни;
- соцсети — ссылки на профили компании;
- меню — навигационные элементы;
- код — HTML-блоки для случаев, когда возможностей стандартных блоков недостаточно.
Возможности для персонализации
Каждый блок можно настроить под разные сегменты аудитории. Можно кликнуть на блок и откроется раздел персонализации в настройках. Например, можно вставлять переменные подстановки прямо в текст:
- {Имя} — имя подписчика;
- {Город} — город клиента;
- {Дата последней покупки} — когда совершал покупку;
- {Средний чек} — размер заказа.
Пример: «{Имя}, специально для жителей {Город} скидка 20% на доставку».
В настройках каждого блока есть возможность указать условия показа, чтобы его видели только подписчики, которые соответствуют заданным критериям. Например:
- блок с мужской одеждой показывать только мужчинам;
- блок с детскими товарами — только родителям;
- блок с премиум-товарами — клиентам с высоким средним чеком.
Как создать проморассылку в конструкторе писем Sendsay
Шаг 1. Добавляем шапку письма. Нажмите кнопку «Блоки» в левой панели и выберите категорию «Шапка». Перетащите один из вариантов в рабочую область. Для интернет-магазина подойдёт шапка с логотипом и навигационным меню.
Шаг 2. Создаём баннер с акцией. Большинство проморассылок содержат яркий баннер с предложением. Добавляем элемент «Картинка» и загружаем изображение с текстом акции. Добавляем ссылку, чтобы сделать её кликабельной.
Шаг 3. Добавляем заголовок акции. Из левой панели перетащите элемент «Заголовок» под баннер. Кликните на добавленный блок — и редактирование станет доступно. Напишите текст, например: «Зимняя распродажа: скидки до 50%».
Шаг 4. Вставляем блок товаров. В категории «Товары» выберите один из готовых блоков и добавьте изображения товаров, названия, цены и ссылки. Товарные блоки можно заполнять не только вручную, но и автоматически — настроить подстановку рекомендаций на основе поведения клиента или истории покупок.
Шаг 5. Добавляем вовлекающий текст. После блока товаров нужно добавить текст, который мотивирует клиента к действию. Перетащите элемент «Текст» из левой панели под товарный блок.
Шаг 6. Добавляем призыв к действию. Перетащите элемент «Кнопка» из левой панели под блок товаров. В настройках кнопки напишите призыв «Купить со скидкой» и настройте ссылку на каталог со скидками.
Шаг 7. Добавляем подвал. В категории «Подвал» выберите один из вариантов и перетащите в конец письма. Настройте контактную информацию и ссылки на социальные сети.
Шаг 8. Проверяем результат. Для предпросмотра нажмите иконку нужного устройства в верхней части редактора — доступны варианты для десктопа и смартфона.
После создания письма полезные блоки можно сохранить в личную библиотеку:
- Кликните на блок, который хотите сохранить.
- Во всплывающем меню нажмите на «Сохранить блок».
- Введите название и категорию блока.
- Нажмите «Сохранить».
Они появятся в разделе «Мои блоки» и будут доступны для всех последующих писем. Можно сохранять как отдельные элементы, так и целые секции письма.
Настраиваем персонализацию контента
Помимо персонализации с подстановкой имени или количества бонусных баллов, можно использовать и более сложные механики. Например, CDP Sendsay отслеживает действия пользователей на сайте, в мобильном приложении, взаимодействия с предыдущими письмами. Это позволяет показывать каждому клиенту именно те товары, которые его заинтересовали.
И если человек просматривал куртки, но не купил — в письме увидит именно их. А если клиент регулярно покупает корм для собак, система предложит сопутствующие товары — поводки, игрушки, лакомства.
В товарных блоках можно настроить автоматическую подстановку:
- товаров, которые клиент просматривал на сайте — напомнить о заинтересовавших позициях;
- товаров из брошенной корзины — мотивировать завершить покупку;
- сопутствующих товаров на основе последней покупки — увеличить средний чек.
Чем больше данных о клиентах, тем точнее можно настроить персонализацию.
Перед настройкой убедитесь, что в Sendsay попадают нужные данные о подписчиках. Это можно сделать несколькими способами: загрузить таблицей, настроить интеграцию с CRM-системой, подключить передачу данных с сайта, импортировать информацию через API.
Подробнее о том, как настроить передачу поведенческих данных и создать эффективные сценарии отправки для работы с электронной почтой, читайте в статьях:
- «Триггеры: подстраиваемся под клиента и растим прибыль»
- «Как правильно персонализировать email-рассылку: 5 способов»
- «Как настроить передачу данных с сайта»
Что важно запомнить
Блочный конструктор писем Sendsay позволяет собирать рассылки из готовых элементов без глубоких познаний в дизайне или программировании.
Главные преимущества блочного редактора:
- быстрая сборка писем методом drag-and-drop;
- автоматическая адаптация под мобильные устройства;
- встроенные возможности персонализации;
- возможность создавать собственные блоки для повторного использования.
Начните с простых писем из готовых блоков и постепенно добавляйте персонализацию и собственные элементы. Российский сервис Sendsay предоставляет все необходимые инструменты для эффективной работы с почтой без технических знаний.
