Как создать письмо в конструкторе

Вы можете создать письмо несколькими способами:

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

Конструктор писем — это визуальный редактор, в котором письма можно собирать из разных элементов (картинки, текст, кнопки) по принципу drag-and-drop: необходимо только продумать структуру, написать текст и подобрать картинки. Вёрстка созданного в конструкторе письма автоматически адаптируется под разные типы устройств, с которых пользователи читают почту.

У конструктора писем есть две версии: старая и новая. Вы сможете выбрать, какую версию использовать, приступая к созданию дизайна письма.

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

Как работает новый коструктор писем

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

Важно

Если вы откроете и сохраните шаблон в новой версии конструктора, то вернуть его в старую версию будет нельзя.

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

Создание рассылки в конструкторе писем проходит в пять этапов:

1. Выберите шаблон (опционально)

Все письма в конструкторе можно создать с нуля или на основе шаблонов. Шаблоны бывают двух видов:

Базовые — это заготовки из элементов, которые расположены на странице в соответствии с типом рассылки: приветственное письмо, каталог товаров, оповещения, акции, новости и письмо подтверждения (последний доступен только в разделе Контент).

Тематические — это макеты с готовым дизайном. Вам нужно только подставить текст, контакты и логотип бренда.

Кроме того, любое письмо можно сохранить как шаблон — он будет храниться в разделе Контент. Чтобы сделать рассылку по своему шаблону, при создании письма откройте вкладку «Избранное» в левом столбике.

2. Добавьте и настройте секции

Письмо состоит из секций, которые вы наполняете контентом. В письме может быть любое количество секций.

Новый конструктор

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

Секции можно копировать с помощью горячих клавиш и вставлять в нужное место шаблона или другого письма.

У каждой секций есть настройки. Чтобы открыть их, дважды кликните по секции или наведите на неё курсор и нажмите «Настройки секции».

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

Колонки можно добавить и другим способом: перетаскивайте новые элементы в уже созданную секцию и располагайте их рядом с другими.

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

Чтобы включить разметку письма, используйте инструмент «Сетка» — с ним удобнее располагать секции, колонки и элементы.

Старый конструктор

Чтобы создать секцию, перетащите любой элемент в письмо. Для секций можно задать следующие настройки:

• стиль — цвет или картинка на фон (можно установить на всю ширину секции и отдельно для блока контента по центру),
• персонализация — видимость секции для получателей: её можно показать не всем, а только определённому типу подписчиков,
• колонки — в секции может быть максимум четыре колонки, у каждой регулируются размеры и отступы.

Как персонализировать рассылку

Чтобы открыть настройки, просто нажмите на секцию. При этом справа появятся три иконки, чтобы переместить, скопировать или удалить секцию:

3. Добавьте элементы и блоки

Наполните письмо контентом, перетаскивая элементы в область секций.

Новый конструктор

В новом конструкторе девять типов элементов:

• картинка,
• кнопка,
• заголовок,
• текст,
• отступ,
• меню,
• список,
• соцсети,
• HTML-код.

Важно

Вы можете использовать изображения формата JPEG, PNG или GIF, весом не больше 5 Мб.

Чтобы картинки хорошо отображались на retina-дисплеях, лучше использовать изображения шириной не больше 1200 px.

У каждого элемента можно изменить настройки — для этого кликните дважды по элементу или нажмите на иконку настроек во всплывающем меню.

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

Работая с письмом, вы можете пользоваться коллекцией готовых блоков с элементами.

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

Готовые блоки находятся в левом меню.

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

Старый конструктор

В старой версии конструктора семь элементов:

• текст,
• картинки,
• кнопки,
• разделитель (визуально отбивает секции друг от друга),
• кнопка «Поделиться» (для фейсбука, твиттера и ВКонтакте),
• профили в соцсетях,
• HTML-блок.

Важно

Рекомендуемые форматы изображений для письма — JPEG и PNG. Также можно использовать GIF и SVG, однако такие картинки могут не отображаться в некоторых почтовых клиентах.

Чтобы картинки хорошо отображалаись на retina-дисплеях, лучше использовать изображения шириной не больше 1200 px. В остальном ограничения касаются только веса картинки: изображения весом до 1 Мб можно использовать без потери в скорости отображения.

Чтобы добавить элемент, перетащите его в нужную секцию, а чтобы удалить — в корзину (она появится в левой части экрана, если нажать на элемент в письме и удерживать левую кнопку мыши).

У каждого элемента можно задать индивидуальные параметры — для этого нужно нажать на него, и в левой части экрана появится окно настроек.

Важно

В базе знаний также есть видеоурок Как добавить в письмо блок с HTML-кодом. Ошибки в вёрстке в HTML-блоке могут поломать отображение всего остального.

4. Задайте настройки письма

На этом этапе нужно настроить общие параметры письма.

Новый конструктор

Нажмите на кнопку «Стиль письма». На экране появится меню стилей, где можно настроить дизайн сразу для всех элементов.

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

Старый конструктор

В общих настройках можно установить цвет текста, ссылок и кнопок, а также фон письма. Обратите внимание: фон письма выравнивается не по центру, а по левому краю, так как не все почтовые клиенты умеют его центрировать. Установить его по центру можно только в настройках секции (во вкладке «Стили»).

5. Проверьте письмо в режиме предпросмотра

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

Новый конструктор

Инструмент «Проверка ссылок» покажет все ссылки, которые вы добавили в письмо, а также элементы, к которым они привязаны. В инструменте три вкладки с индикаторами разных цветов:

• серый индикатор указывает на необязательные элементы, к которым можно добавить ссылку,

• красный индикатор указывает на ссылки с ошибками или отсутствие обязательной ссылки у элемента,

• зелёный индикатор — ссылки, прикреплённые без ошибок.

  

Функция «Предпросмотр» поможет оценить, как увидят письмо получатели. В предпросмотре вы сможете:

• выключить отображение картинок, чтобы увидеть, как выглядит письмо, если у получателя выключена загрузка изображений;

• посмотреть мобильную версию письма, чтобы понять, как оно будет выглядеть на смартфоне;

• включить персонализацию, чтобы проверить, как в письмо подставятся данные подписчика;

• оценить оформление письма в тёмной теме.

  

В меню предпросмотра можно скопировать ссылку на письмо и передать её другому пользователю — например, для согласования. Для этого нажмите «Поделиться», — и ссылка скопируется в буфер обмена.

Старый конструктор

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

• посмотреть письмо для подписчиков, у которых нет данных для персонализации,

• посмотреть письмо с данными конкретного подписчика (нужно ввести его адрес),

• посмотреть все настроенные варианты персонализации.

  
  

Помните, что все почтовые клиенты немного по-разному отображают письма. Если вы хотите точно знать, как подписчики увидят вашу рассылку, заведите ящики на основных доменах (Яндекс, Mail, Gmail, Outlook) и отправьте себе несколько тестовых копий. На бесплатных аккаунтах можно отправить только одну тестовую копию — на почту, на которую зарегистрирован аккаунт.

Важно

Отправить тестовую копию можно только контакту, который есть в базе со статусом Подтверждённый.

Читайте также:
Прехедер письма: что это, какие бывают и как их создать
Футер в письме