Блочный редактор позволяет создавать красивые письма с нуля, не привлекая дизайнеров и верстальщиков.
Процесс создания письма можно разделить на три шага:
- Создание структуры. Соберите макет письма и наполните его нужным контентом.
- Настройка внешнего вида. Замените цвета, настройте шрифты и добавьте фоновое изображение, чтобы придать письму желаемый стиль.
- Адаптация под мобильные. Настройте мобильную версию письма, чтобы письмо корректно отображалось на разных экранах.
Далее подробно рассмотрим каждый шаг.
Как создать структуру
В личном кабинете нажмите «Создать рассылку» — «Email», чтобы перейти к созданию письма.
Выберите «Перейти на новую версию».
При необходимости вы можете сохранить выбор, чтобы каждый раз не выбирать версию редактора, а сразу переходить к созданию письма
На первом этапе создания рассылки нажмите «Письмо с нуля».
Откроется новый редактор писем.
Для создания письма существует три основных компонента:
- Группа — главный компонент, который представляет собой контейнер. В него нужно добавлять блоки.
- Блок — компонент, который предназначен для добавления элементов.
- Элемент — компонент, который отвечает за наполнение письма контентом. С его помощью можно добавить в макет кнопку, картинку, таймер, текст или иконки социальных сетей.
По умолчанию на рабочей области редактора уже присутствует группа. В нее нужно добавлять блоки и элементы из вкладки «Контент».
Чтобы создать структуру письма, выбирайте на вкладке «Контент» нужные блоки и перетаскивайте их на рабочую область.
Чтобы не создавать структуру с нуля, воспользуйтесь готовыми блоками, в которые уже добавлен нужный контент. Из таких блоков можно создать полноценное письмо или добавить в него готовые карточки товаров, меню и опросы.
Выберите из категории «Общие блоки» нужный блок, перетащите его на рабочую область и отредактируйте под себя.
При наведении курсора на блок можно посмотреть его превью
Пустой блок необходимо самостоятельно наполнить нужным контентом. Для этого перейдите на вкладку «Элементы» и добавьте в письмо текст, картинку, кнопку и т.д.
Отредактируйте получившуюся структуру:
- добавьте изображения;
- замените текст и ссылки;
- настройте размеры компонентов и отступы.
Для этого кликните на нужный компонент и измените его параметры на рабочей области или на панели настроек.
Чтобы облегчить и ускорить процесс создания письма, можно использовать в редакторе горячие клавиши:
- Ctrl + Z — отменить действие.
- Ctrl + Shift + Z — повторить отмененное действие.
- Ctrl + S — сохранить письмо.
Как настроить внешний вид
Настроить внешний вид письма можно на вкладке «Стили». Чтобы в нее попасть, кликните в правой части редактора на значок шестеренки.
Откроется панель с настройками стилей письма и контента.
В стилях письма можно:
- Задать ширину письма в пикселях. По умолчанию ширина письма составляет 660 пикселей.
- Настроить адаптивность письма.
- Установить цвет фона письма или фоновое изображение.
- Установить цвет фона контента.
В стилях контента можно настроить:
- Стиль текста письма: шрифт, размер, цвет и отступы.
- Стиль заголовков: шрифт, размер, цвет и отступы.
- Цвет ссылок.
- Стиль текста кнопок: шрифт, размер, цвет и выравнивание.
- Стиль кнопок: цвет, отступы, рамку и скругление краев.
Как адаптировать под мобильные
Письма, созданные в редакторе, автоматически адаптируются под мобильные устройства, если на вкладке «Стили» включен переключатель «Адаптировать письмо в моб. устройствах».
При необходимости вы можете отдельно настроить мобильную версию письма: скрыть компоненты, которые не должны показываться на телефонах, или изменить их параметры.
Для перехода к мобильной версии письма нажмите в левой части редактора на иконку телефона или с помощью специальных ползунков измените размер рабочей области.
При переходе к мобильной версии область сузится до стандартной ширины мобильных экранов (425 пикселей) и вы увидите, как ваше письмо будет отображаться на телефоне.
Чтобы настроить внешний вид компонента в мобильной версии, кликните на него и измените нужные параметры на панели редактирования.
В мобильной версии настройки компонентов будут подсвечиваться зеленым цветом. Внесенные изменения будут применяться только к мобильной версии письма и не затронут десктопную.
С помощью параметра видимости можно скрыть компонент в определенной версии письма:
- Всегда. Компонент будет показываться на мобильных и десктопных устройствах.
- Десктоп. Компонент будет доступен для получателей, которые откроют письмо на компьютере.
- На мобильном. Компонент будет отображаться только на мобильных устройствах.
При этом на рабочей области редактора появится иконка, информирующая, что компонент будет отображаться только в мобильной версии.
В мобильной версии вы также можете добавить в письмо новые элементы и блоки из вкладки «Контент», а затем настроить их видимость.
При создании мобильной версии на рабочей области редактора недоступно перетаскивание компонентов. Для перемещения используйте стрелки.
Таким образом, у вас получится две версии письма, которые будут отображаться по-разному на экранах различных размеров.
Слева — письмо для получателей, которые откроют письмо на ПК, справа — на мобильном
Полезные ссылки
Новый конструктор писем: основные возможности и особенности
Как создать и отправить рассылку в новом редакторе
Как работать с группами
Как работать с блоками
Как работать с элементами
