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

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

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

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

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

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

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

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

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

    email-editor-block-button

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

  3. Настройте количество и пропорции колонок:
    email-editor-flex-blocks-columns

  4. Добавьте нужные элементы.
    email-editor-flex-blocks-elements

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

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

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

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

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

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

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

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

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

email-editor-mobile-ver

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

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

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

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

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

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

email-editor-mobile-ver2

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

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

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

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

  1. Нажмите на блок:

    email-editor-save-borders-save.png
    Границы «Блока»
  2. В меню справа выберите «Сохранить блок»:
    email-editor-save-block

  3. Укажите категорию и название:
    email-editor-save-block-setting

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

email-editor-new-cat

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

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

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

email-editor-new-temp.png

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

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

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

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

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

Снимок экрана 2023-08-09 в 23.04.26

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