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

Блочный редактор позволяет создавать красивые письма с нуля, не привлекая дизайнеров и верстальщиков.

Процесс создания письма можно разделить на три шага:

Далее подробно рассмотрим каждый шаг.

Как создать структуру

В личном кабинете нажмите «Создать рассылку» — «Email», чтобы перейти к созданию письма.

Кнопка для создания рассылки из навигации сервиса.

Выберите «Перейти на новую версию».

Выберите новую версию редактора.

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

На первом этапе создания рассылки нажмите «Письмо с нуля».

На этапе «Дизайн письма» нажмите «Письмо с нуля».

Откроется новый редактор писем.

Внешний вид редактора писем.

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

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

Иерархия компонентов в новом блочном редакторе.

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

Вкладка «Контент».

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

Как создать структуру письма с помощью пустых блоков.

 

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

Выберите из категории «Общие блоки» нужный блок, перетащите его на рабочую область и отредактируйте под себя.

Как создать структуру письма с помощью готовых блоков.

При наведении курсора на блок можно посмотреть его превью

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

 

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

Как работать с картинками

Как добавить контент в пустые блоки.

Отредактируйте получившуюся структуру:

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

Для этого кликните на нужный компонент и измените его параметры на рабочей области или на панели настроек.

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

 

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

  • Ctrl + Z — отменить действие.
  • Ctrl + Shift + Z — повторить отмененное действие.
  • Ctrl + S — сохранить письмо.

Как настроить внешний вид

Настроить внешний вид письма можно на вкладке «Стили». Чтобы в нее попасть, кликните в правой части редактора на значок шестеренки.

Откроется панель с настройками стилей письма и контента.

Вкладка «Стили».

В стилях письма можно:

  1. Задать ширину письма в пикселях. По умолчанию ширина письма составляет 660 пикселей.
  2. Настроить адаптивность письма.
  3. Установить цвет фона письма или фоновое изображение.
  4. Установить цвет фона контента.

Настройки стилей письма.

В стилях контента можно настроить:

  • Стиль текста письма: шрифт, размер, цвет и отступы.
  • Стиль заголовков: шрифт, размер, цвет и отступы.
  • Цвет ссылок.
  • Стиль текста кнопок: шрифт, размер, цвет и выравнивание.
  • Стиль кнопок: цвет, отступы, рамку и скругление краев.

Настройки стилей контента.

Как адаптировать под мобильные

Письма, созданные в редакторе, автоматически адаптируются под мобильные устройства, если на вкладке «Стили» включен переключатель «Адаптировать письмо в моб. устройствах».

Настройки адаптивности на вкладке «Стили».

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

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

 

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

Как перейти к редактированию мобильной версии письма.

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

 

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

Как отредактировать компонент для мобильной версии.

С помощью параметра видимости можно скрыть компонент в определенной версии письма:

  • Всегда. Компонент будет показываться на мобильных и десктопных устройствах.
  • Десктоп. Компонент будет доступен для получателей, которые откроют письмо на компьютере.
  • На мобильном. Компонент будет отображаться только на мобильных устройствах.

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

Как скрыть компонент для десктопной или мобильной версии.

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

 

При создании мобильной версии на рабочей области редактора недоступно перетаскивание компонентов. Для перемещения используйте стрелки.

Как изменить положение компонентов при создании мобильной версии.

Таким образом, у вас получится две версии письма, которые будут отображаться по-разному на экранах различных размеров.

Пример писем для мобильной и десктопной версий.

Слева — письмо для получателей, которые откроют письмо на ПК, справа — на мобильном

Полезные ссылки

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

Вы нашли ответ?

2
1