Письма для email-кампаний можно собирать по вашему дизайну с помощью блоков.

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

Забудьте о скучных шаблонах — создавайте уникальные фирменные письма с Mavibot.

Разделы (блоки) для писем

Конструктор писем можно найти на вкладке «Письма» при создании email-рассылки:

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

  1. Изображение
  2. Текст
  3. Пустой блок
  4. Кнопка
  5. Социальные сети
  6. HTML-блок

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

Каждый блок включает общие настройки отображения раздела, такие как:

  1. Внутренний отступ;
  2. Рамка;
  3. Радиус скругления;
  4. Фон.

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

Изображение

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

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

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

Затем вы увидите, что изображение добавлено в раздел:

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

Для этого просто введите нужную ссылку в соответствующее поле:

Текст

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

Внимание!

Изменение шрифтов недоступно.

  1. Чтобы добавить текст внутрь раздела, например, с изображением, наведите курсор на блок изображения (или любой другой блок справа) и найдите значок «+»:

Затем нажмите на значок плюса, и появится выпадающее меню с вариантами блоков:

Как видите, текстовый блок был добавлен внутрь раздела, который уже содержит изображение:

Обратите внимание!

В одном разделе можно добавить до четырех элементов содержимого (блоков).

  1. Чтобы добавить в письмо отдельный раздел с текстовым блоком (или любым другим блоком), наведите курсор на левую часть экрана и найдите значок «+» в меню быстрых действий:

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

После этого будет добавлен новый раздел с текстовым блоком:

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

На панели инструментов над текстовым блоком можно применить форматирование: полужирный, курсив и подчеркивание:

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

Чтобы настроить размер шрифта, межстрочный интервал, расстояние и цвет, перейдите в настройки блока «Текст» в меню справа:

Кнопка

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

В кнопку можно вставить ссылку на любую нужную страницу:

Чтобы изменить текст, нажмите на текстовое поле внутри кнопки:

Затем введите нужный текст:

Чтобы изменить размер кнопки, найдите в меню поле со стрелками:

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

Чтобы изменить выравнивание кнопки (по центру, слева или справа), используйте эти настройки:

В меню также есть поле для изменения цвета кнопки:

Кнопки «Социальные сети»

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

В настройках блока вы можете выбрать, на какой именно канал вы хотите перенаправлять клиентов:

В меню настроек также есть опция стиля для кнопок социальных сетей:

  1. Стандартный: используется оригинальный стиль значков мессенджеров:

  1. С рамкой: прозрачные значки с цветом рамки, соответствующим стандартным цветам соответствующего мессенджера.

  1. Монохромный: значки, отображаемые в единой цветовой гамме.

Чтобы скруглить углы значков, введите нужное числовое значение в пикселях в поле «Скругленные углы»:

Настройки блока внутри раздела

Каждый элемент внутри раздела имеет одинаковые настройки отступов, рамок и фона.

Вы можете настроить блок отдельно от каждого элемента, а также выбрать:

Отступ элемента

Вы можете настроить отступ элемента в соответствующих полях:

Эти отступы относятся к положению блока содержимого относительно его границы.

Рамка (внутренняя)

Раздел содержит две настраиваемые рамки: внешнюю (для всего раздела) и внутреннюю (для изображения или других элементов).

Инструкции по редактированию внешней рамки раздела можно найти в разделе «Общие настройки раздела» -> Рамка. ссылка «Рамка»

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

Каждую сторону рамки можно настраивать отдельно от других.

Для этого нажмите на сторону рамки, которую хотите отредактировать:

Затем выберите цвет, толщину и стиль линии для рамки.

Чтобы настроить рамку со всех четырех сторон, нажмите на соответствующий значок:

Радиус скругления

Вы также можете задать радиус скругления углов для внутренней рамки в пикселях:

Поля для каждого угла рамки принимают числовые значения в пикселях.

Фон блока содержимого внутри раздела

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

Вы также можете выбрать положение и размер изображения для фона:

Настройки раздела

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

Отступы

Отступы раздела применяются ко всем элементам, расположенным внутри раздела:

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

Или вы можете задать числовые значения в полях, расположенных в правом меню на вкладке «Раздел»:

Рамка

Раздел содержит две настраиваемые рамки: внешнюю (для всего раздела) и внутреннюю (для изображения или других элементов)

Инструкции по редактированию внешней рамки раздела можно найти в разделе «Рамка (внутренняя)» ссылка «Рамка (внутренняя)»

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

Каждую сторону рамки можно настраивать отдельно от других.

Для этого нажмите на нужную сторону рамки:

Затем выберите цвет, толщину и стиль рамки.

Чтобы настроить рамку со всех четырех сторон, нажмите на соответствующий значок:

Радиус скругления

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

Поля для каждого угла рамки принимают числовые значения в пикселях.

Фон

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

Вы также можете выбрать положение и размер фонового изображения: