---
title: Конструктор Email-сообщений
description: Конструктор Email — 7 блоков, 3 макета, свойства элементов, просмотр на экранах
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://docs.mydialogi.ru/llms.txt). Append `.md` to any page URL for its markdown version.


> **Коротко:** конструктор Email позволяет собирать письмо из блоков: текст, изображение, кнопка, соцсети, разделитель и другие.

## Кому подходит

- Роль: Клиент, Менеджер рассылок
- Уровень: Новичок / Опытный

## Что это

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

Открывается из настроек Email — нажмите **Открыть конструктор**.

<Note>
Формат содержимого письма может быть **HTML**, **MJML** или **Plain text**.

[Форматы содержимого →](https://docs.mydialogi.ru/05-channels/06-email/email#формат-содержимого)
</Note>

## Перед началом

- [ ] У вас есть имя отправителя Email со статусом **Активно** — [Имя отправителя для Email →](https://docs.mydialogi.ru/05-channels/06-email/sender-id).
- [ ] Вы открыли настройки Email в рассылке или шаблоне.
- [ ] Вы заполнили тему и подзаголовок — они обязательны.

[Что такое Email →](https://docs.mydialogi.ru/05-channels/06-email/email)

## Интерфейс конструктора

Конструктор состоит из четырёх панелей:

| Панель | Что содержит |
|---|---|
| **Block / Layer** | Слева. Выбор между блоками и слоями |
| **Рабочая область** | По центру. Письмо |
| **Configuration** | Справа. Свойства элемента |
| **Панель инструментов** | Сверху. Форматирование текста |

## Все 7 блоков

| Блок | Что содержит |
|---|---|
| **Text (Текст)** | Текстовый блок |
| **Image (Изображение)** | Картинка |
| **Button (Кнопка)** | Кнопка с текстом и ссылкой |
| **Social (Соцсети)** | Ссылки на соцсети |
| **Divider (Разделитель)** | Линия-разделитель |
| **Spacer (Рамочный разделитель)** | Прямоугольный разделитель |
| **Wrapper (Рамка)** | Область с рамкой для других элементов |

### Text (Текст)

Текстовый блок. Поддерживает форматирование: жирный, курсив, подчёркнутый, списки, ссылки, персонализацию.

### Image (Изображение)

Картинка. Загружается из базы **Медиа** или с устройства.

### Button (Кнопка)

Кнопка с текстом и ссылкой. Настраивается текст кнопки и URL, куда она ведёт.

### Social (Соцсети)

Ссылки на социальные сети. По умолчанию — VK, OK, Google, Twitter. Можно настроить ссылки.

### Divider (Разделитель)

Линия, разделяющая блоки сообщения.

### Spacer (Рамочный разделитель)

Прямоугольный разделитель. Используется для отступов.

### Wrapper (Рамка)

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

## Слои (Layers)

Переключитесь на вкладку **Layer**, чтобы увидеть список элементов письма и переключаться между ними. Это удобно, когда письмо большое.

Структура слоёв:

- **Page** — страница письма.
- **Wrapper** — рамка (если есть).
- **Text, Button, Social, Divider, Spacer, Image** — вложенные элементы.

## Макет (Layout)

Панель **Layout** позволяет выбрать количество колонок:

- 2 колонки.
- 3 колонки.
- 4 колонки.

## Просмотр на разных экранах

Кнопки в верхней панели:

| Кнопка | Что показывает |
|---|---|
| Обычный экран | Стандартное отображение |
| Широкоформатный экран | Письмо для больших экранов |
| Экран смартфона | Мобильная версия |

## Панель инструментов

Элементы форматирования текста:

- **Жирный.**
- **Курсив.**
- **Подчёркнутый.**
- **Списки.**
- **Ссылки.**
- **Персонализация** — вставка атрибутов контакта.

## Свойства элемента (Configuration)

На панели **Configuration** справа:

| Раздел | Что настраивает |
|---|---|
| **Dimension** | Высота, отступы (Padding) |
| **Color** | Цвет текста, фон |
| **Typography** | Шрифт, размер, межстрочный интервал, буквенное расстояние, оформление, жирность |

### Dimension (Размер)

- **Height** — высота элемента.
- **Padding** — внутренние отступы: Top, Left, Bottom, Right.

### Color (Цвет)

- **Color** — цвет текста.
- **Background color** — цвет фона.

### Typography (Типографика)

- **Font family** — шрифт.
- **Font size (px)** — размер шрифта.
- **Line height** — межстрочный интервал.
- **Letter spacing** — расстояние между буквами.
- **Text decoration** — оформление (подчёркивание и т.д.).
- **Font weight** — жирность.

## Перемещение элементов

Используйте иконку перемещения, чтобы перетащить элемент в нужное место.

## Закрытие конструктора

Нажмите **×** в правом верхнем углу, чтобы вернуться к настройкам рассылки.

## Результат

Письмо собрано из блоков и готово к отправке.

- [Что такое Email →](https://docs.mydialogi.ru/05-channels/06-email/email)
- [Обзор шаблонов Email →](https://docs.mydialogi.ru/05-channels/06-email/templates/templates-overview)

## Частые проблемы

### Элемент не перетаскивается

**Причина:** не выбрана вкладка Block.

**Решение:** переключитесь на вкладку **Block**.

### Стили не применяются

**Причина:** элемент не выбран.

**Решение:** кликните на элемент, затем настройте свойства в панели **Configuration**.

### Письмо ломается на мобильном

**Причина:** нет адаптивной вёрстки.

**Решение:** используйте **Layout** с колонками — например, 2 или 3 колонки. Проверьте отображение через кнопку **Экран смартфона** в верхней панели.

### Элемент не удаляется

**Причина:** элемент не выбран.

**Решение:** кликните на элемент и нажмите **Delete**.

### Изображение не загружается

**Причина:** файл не загружен в базу **Медиа**, или ссылка повреждена.

**Решение:** загрузите изображение заново — оно должно быть в базе Медиа.

[Как загрузить медиафайл →](https://docs.mydialogi.ru/04-mydialogi/06-assets/md-801-media)

### Персонализация не подставляется

**Причина:** неверный ключ атрибута.

**Решение:** проверьте формат — например, `{{attribute.name}}`.

[Управление атрибутами →](https://docs.mydialogi.ru/04-mydialogi/03-contacts/md-504-attributes)

## См. также

<Columns cols={2}>
  <Card title="Что такое Email" icon="envelope" href="/05-channels/06-email/email">
    Форматы содержимого и настройка канала
  </Card>
  <Card title="Имя отправителя для Email" icon="id-card" href="/05-channels/06-email/sender-id">
    Верификация домена
  </Card>
  <Card title="Обзор шаблонов Email" icon="book" href="/05-channels/06-email/templates/templates-overview">
    Шаблоны писем для рассылок
  </Card>
  <Card title="Как загрузить медиафайл" icon="upload" href="/04-mydialogi/06-assets/md-801-media">
    Загрузка файлов в базу Медиа
  </Card>
</Columns>

## Нужна помощь?

- **OTP-коды:** support@otpcod.ru
- **Multi API:** support@multiapi.ru
- **Мой диалог:** support@mydialogi.ru