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

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

Основные возможности:

• Визуальная сборка писем из блоков
• Адаптивная верстка для мобильных устройств
• Библиотека сохраненных блоков и шаблонов
• Гибкая настройка стилей и отступов

Как начать работу с конструкторомКак начать работу с конструктором

При создании новой рассылки выберите «Конструктор Mindbox»:

Из чего состоит письмоИз чего состоит письмо

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

• Блок — самостоятельная часть письма, например шапка, баннер или футер. Для блока задаются фон, отступы и скругления. Блок можно сохранить в библиотеку и использовать в других письмах.
• Строка — ряд внутри блока. В одном блоке может быть несколько строк. Как и у блока, у строки есть свои фон, отступы и скругления, а также количество и пропорции колонок.
• Элемент — контент внутри колонки строки: текст, изображение, кнопка и другие.

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

Сборка письма из блоковСборка письма из блоков

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

1. Для их добавления нажмите «Блоки» в левой панели:

   

2. Выберите пустой пресет и перетащите блок в область письма:
   

3. Выберите строку и настройте количество и пропорции колонок:
   

4. Добавьте нужные элементы.
   

Пример простой сборки блока:

Создание сложных блоков с несколькими строкамиСоздание сложных блоков с несколькими строками

Если нужен составной блок с разным количеством колонок в строках (например, футер):

1. Создайте отдельные блоки с нужным количеством колонок
2. Настройте содержимое каждого блока.
3. Уберите отступы блоков.
4. Перетащите строки в один блок.

Пример создания составного футера:

Как выбрать блок или строкуКак выбрать блок или строку

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

1. Кликните по любому элементу внутри нужного блока.
2. В навигационной цепочке нажмите на нужный уровень, например «Строка» или «Блок».

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

Адаптация под мобильные устройстваАдаптация под мобильные устройства

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

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

Общий принцип работы:

1. Выберите элемент или блок.
2. По умолчанию отображается десктопная версия. Установите нужные значения (размер шрифта, отступы, ширину изображения).
3. Переключитесь на мобильный предпросмотр.

Пример настройки адаптивности:

Способ 2: Отдельные блоки для разных устройствСпособ 2: Отдельные блоки для разных устройств

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

1. Создайте блок или скопируйте существующий.
2. Настройте его под конкретное устройство.
3. В настройках блока укажите, где он должен показываться:

Этот способ удобен, когда нужны принципиально разные версии блока.

Пример создания версий блока:

Сохранение блоковСохранение блоков

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

1. Нажмите на блок или выберите его в навигационной цепочке:

   

2. В меню справа выберите «Сохранить блок»:
   

3. Укажите категорию, название и тип блока. Сквозные блоки могут использоваться и редактироваться одновременно в нескольких рассылках - см. «Сквозные блоки в конструкторе рассылок».
   

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

Фирменные стили письмаФирменные стили письма

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

Как применить фирменные стилиКак применить фирменные стили

1. В шапке конструктора нажмите «Настройки письма»;

2. В открывшемся меню задайте параметры фирменного стиля (например, цвет текста или фона):

   

Стили применятся ко всем блокам в шаблоне письма и в меню готовых блоков.

Пример настройки стилей

Размеры из фирменных стилей (например, размер шрифта или отступы) можно задать отдельно для мобильной версии письма. Для этого в «Настройках письма» переключитесь на мобильный предпросмотр и укажите нужные значения. Подробнее о переключателе — в разделе «Адаптация под мобильные устройства».

Как настроить элементу стиль, отличный от фирменногоКак настроить элементу стиль, отличный от фирменного

Иногда отдельный элемент нужно выделить: например, сделать кнопку другого цвета или задать другой шрифт заголовку. Для этого настройте стиль прямо в элементе, остальные элементы письма сохранят фирменные стили.

Это можно сделать двумя способами.

Задать свои значения в настройках элемента:

1. Кликните по элементу, чтобы открыть его настройки.
2. Укажите нужные значения, например цвет текста или фона.

Фирменные стили перестанут применяться к этому элементу, и он сохранит ваши настройки.

Отключить фирменные стили для элемента:

1. Кликните по элементу, чтобы открыть его настройки.

2. Выключите настройку «Применять фирменные стили письма к элементу»:

   

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

Сохранение письма как шаблонаСохранение письма как шаблона

Чтобы использовать готовое письмо в будущих рассылках:

1. Нажмите «Сохранить в галерею» в верхнем меню конструктора.
2. Задайте имя шаблону.

Где найти сохраненные шаблоныГде найти сохраненные шаблоны

Шаблоны доступны в двух местах:

1. При создании новой рассылки.
2. В разделе меню Контент → Галерея шаблонов:
   

Предпросмотр и тестированиеПредпросмотр и тестирование

По кнопке Предпросмотр можно отслеживать изменения шаблона:

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