Конструктор писем Sendsay

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

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

Интерфейс конструктора

В центре находится рабочая область с письмом — здесь будут располагаться все секции и элементы. По бокам — две панели:

• сайдбар — иконки для добавления элементов и блоков.
• меню настроек — настройки выбранного элемента или секции (открывается справа, при выборе элемента или секции).

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

Работа с письмом

Секции и колонки

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

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

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

В параметрах секции можно изменить порядок и ширину колонок.

Навигация по письму

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

История изменений

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

Копирование элементов между вкладками

Элементы и секции можно копировать между вкладками браузера. Например, чтобы перенести секцию из другого письма, откройте его в соседней вкладке, скопируйте с помощью горячих клавиш (Ctrl + C или Сommand + C) и вставьте в нужное место.

Быстрый ввод отступов и скруглений

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

Мобильная адаптация

Адаптация колонок

В настройках секции можно задать поведение колонок на мобильных устройствах: будут ли колонки перестраиваться в столбец (в стандартном или обратном порядке) или сохранят свой вид как на десктопных версиях почтовых клиентов.

Почему мобильная версия письма отличается от предпросмотра

Редактирование мобильной версии

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

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

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

Блоки и стили

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

Коллекция блоков

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

Чтобы сохранить собственный блок, нажмите на иконку «Сохранить блок» в меню секции.

Стили письма

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

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

Элементы конструктора

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

Заголовок

Элемент «Заголовок» позволяет управлять стилями письма: настройки заголовков применяются ко всем заголовкам в письме одновременно.

Текст

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

Кроме этого, типограф автоматически заменяет отдельные сочетания символов:

Вводите	Получаете
--	— (длинное тире)
- между числами	– (короткое тире)
->	→
<-	←
"текст"	«текст»
1/2, 1/4, 3/4	½, ¼, ¾
10 x 5	10×5
+-	±
!=	≠
<=, >=	≤, ≥
(c), (tm), (r)	©, ™, ®
м2, м3	м², м³
25-ый, 25-ого	25-й, 25-го

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

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

Настройки текстового блока

Шрифт. Шрифты делятся на безопасные и веб-шрифты: безопасные корректно отображаются практически во всех почтовых клиентах, отображение веб-шрифтов зависит от поддержки на стороне получателя.

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

Размер текста. Доступны три пресета размера: S, M и L. Базовый размер M задаётся в стилях письма и применяется ко всем текстовым блокам сразу. Размеры S и L рассчитываются автоматически относительно него — с шагом 2 пункта. Конкретное значение также можно задать вручную.

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

Межбуквенный интервал. Настройка доступна для элемента «Текст». Для элемента «Заголовок» эта настройка не предусмотрена.

Интервал между абзацами. Можно настроить расстояние между абзацами текста.

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

Форматирование выделенного текста

При выделении фрагмента текста появляется меню настроек форматирования:

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

Чтобы убрать форматирование, выделите нужный текст и нажмите «Очистить форматирование».

Соцсети

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

Меню

Элемент «Меню» создаёт в письме горизонтальное меню с кликабельным текстом.

Список

Элемент для создания списков с иконками, заголовками и текстом. Помогает упорядочить информацию и показать её в наглядном виде.

Проверка письма

Проверка ссылок

Инструмент «Проверка ссылок» показывает все ссылки в письме и элементы, к которым они привязаны. Это помогает убедиться, что все ссылки указаны верно перед отправкой.

Предпросмотр

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

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