# Конструктор email-розсилок

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

<figure><img src="/files/df6276d8c0cc965ce6b4c69d1d3e3815ad193982" alt="" width="563"><figcaption></figcaption></figure>

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

Забудьте про нудні шаблони — створюйте унікальні брендовані листи з Mavibot.

## Секції (блоки) для листів

Ви можете знайти конструктор листів у вкладці «Листи» під час створення email-розсилки:

<figure><img src="/files/633f6441ba4a935ef7e14b590b9ad3fa237038e6" alt=""><figcaption></figcaption></figure>

У конструкторі ви побачите порожнє полотно, куди можна вставити такі блоки (секції):

1. Зображення
2. Текст
3. Порожній блок
4. Кнопка
5. &#x20;Соціальні мережі&#x20;
6. HTML-блок

Крім того, блоки можна поєднувати між собою — наприклад, ви можете додати кілька елементів листа в межах однієї секції.

<figure><img src="/files/25e1ab05d68a0bffdd1947360bf97b07651f44e9" alt=""><figcaption></figcaption></figure>

Кожен блок містить загальні налаштування відображення секції, такі як:

1. Внутрішні відступи;
2. Рамка;
3. Радіус рамки;&#x20;
4. Фон.

<figure><img src="/files/89c378c1682a79f503d022b14cf54f3ec9d751e1" alt=""><figcaption></figcaption></figure>

Почнімо з огляду налаштувань, доступних для кожної секції. Потім ми розглянемо приклад, щоб показати, як можна налаштувати кілька різних блоків у межах однієї секції.

### Зображення

Щоб додати зображення, перейдіть до меню праворуч на екрані. Там ви знайдете іконку, яка дозволяє завантажити зображення після натискання:

<figure><img src="/files/627f6818c8897de034a6ad0031c7ef68d4b7baf8" alt=""><figcaption></figcaption></figure>

Коли ви натиснете кнопку, побачите, що секцію додано до листа:

<figure><img src="/files/69127c8772188438cb88c426499cd7d75c6a5431" alt=""><figcaption></figcaption></figure>

Щоб додати зображення, перейдіть до відповідної вкладки та завантажте потрібний файл зі свого пристрою:

<figure><img src="/files/6a5ee44e965bf049a0d188f2f529ce5e3c7a0c57" alt=""><figcaption></figcaption></figure>

Далі ви побачите, що зображення додано до секції:

<figure><img src="/files/aef9635b6388f3644fa051035963896febf38fe7" alt=""><figcaption></figcaption></figure>

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

Для цього просто введіть потрібне посилання в надане поле:

<figure><img src="/files/fd573a912fb16d05ba6874bbf3d467d7d9631aa2" alt=""><figcaption></figcaption></figure>

### Текст

Текстовий блок можна додати або всередині секції, що містить зображення (або будь-який інший блок), або як окремий блок сам по собі.

{% hint style="warning" %}
Увага!

Зміна шрифтів недоступна.
{% endhint %}

1. Щоб додати текст усередині секції — наприклад, тієї, що містить зображення, — наведіть курсор на блок зображення (або будь-який інший блок праворуч) і знайдіть іконку «+»:

<figure><img src="/files/21646926a6263350f3ec1fcf9034357305b19155" alt="" width="299"><figcaption></figcaption></figure>

Далі натисніть на іконку плюс, і з’явиться спадне меню з варіантами блоків:

<figure><img src="/files/1d98ec4c2285902cd4c15da3351da501d1af1fa8" alt="" width="250"><figcaption></figcaption></figure>

Як бачите, текстовий блок було додано всередині секції, яка вже містить зображення:

<figure><img src="/files/439465b85537f7c8c4b3dea146dd135abcd50a94" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Зверніть увагу!

У межах однієї секції можна додати до чотирьох елементів контенту (блоків).
{% endhint %}

2. Щоб додати окрему секцію в листі з текстовим блоком (або будь-яким іншим блоком), наведіть курсор на ліву частину екрана та знайдіть іконку «+» у меню швидких дій:

<figure><img src="/files/80fe2329f55d6c054d027b784bdfc66a43fbf085" alt=""><figcaption></figcaption></figure>

Далі натисніть на іконку плюс і виберіть секцію, яку хочете додати:

<figure><img src="/files/00c4238f85ee6812519ce2037301a6501ea341fc" alt=""><figcaption></figcaption></figure>

Після цього буде додано нову секцію з текстовим блоком:

<figure><img src="/files/62ad8b2faa8ab9ded7387329b32fbfe0909fcfb3" alt=""><figcaption></figcaption></figure>

Щоб редагувати, натисніть на текст, і над ним з’явиться панель інструментів із налаштуваннями — подібними до тих, що є в будь-якому текстовому редакторі.

<figure><img src="/files/4893e32a3f3cabca2d255f7b619ae5098383561a" alt=""><figcaption></figcaption></figure>

На панелі інструментів над текстовим блоком можна застосувати напівжирне, курсивне та підкреслене форматування:

<figure><img src="/files/239529478122aaf94cd8f67d66da814726c65b01" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/e4a15b2aaf63596a3e2d6d1caf47b9935566d158" alt=""><figcaption></figcaption></figure>

### Кнопка&#x20;

Блок кнопки додається так само, як і будь-який інший блок: його можна розмістити як окрему секцію або всередині наявної секції з іншими елементами:

<figure><img src="/files/1660e7adb531c6a0de4f9a3717ec46f61d951164" alt=""><figcaption></figcaption></figure>

У кнопку можна вставити посилання на будь-яку потрібну сторінку.:

<figure><img src="/files/4787a99fd6884798c077c50e11ad92009fdb2d17" alt=""><figcaption></figcaption></figure>

Щоб змінити текст, натисніть на текстове поле всередині кнопки:

<figure><img src="/files/23e0ac61afd46eaee18fa75cabc14859172be329" alt=""><figcaption></figcaption></figure>

Потім введіть потрібний текст:

<figure><img src="/files/391ddb0f67d83af2b633de88c75939d18e7b9efa" alt=""><figcaption></figcaption></figure>

Щоб змінити розмір кнопки, знайдіть у меню поле зі стрілками:

<figure><img src="/files/30acf316f69a642ee3cb7a64e0ee84dbe7a694a8" alt=""><figcaption></figcaption></figure>

Далі встановіть потрібний розмір, ввівши числове значення — поле приймає значення в пікселях.&#x20;

Щоб змінити вирівнювання кнопки (по центру, ліворуч або праворуч), скористайтеся цими налаштуваннями:

<figure><img src="/files/2ac3c55203febcc167801b66073ffb7bf0338261" alt=""><figcaption></figcaption></figure>

У меню також є поле для зміни кольору кнопки:

<figure><img src="/files/21a6eed7ebb785d95f7182bc49131b4d6c81a8fe" alt=""><figcaption></figcaption></figure>

### Кнопки «Соціальні мережі»

У листі ви також можете додати кнопки, які перенаправлятимуть одержувачів до соціальних мереж, підключених до вашого проєкту:

<figure><img src="/files/467ebdae189b5b8de49ded37c7005d19eddeb361" alt=""><figcaption></figcaption></figure>

У налаштуваннях блоку ви можете вибрати, на який саме канал хочете перенаправити своїх клієнтів:

<figure><img src="/files/5de6572798a7bcd1b3168edc43ae81f9659ae22b" alt=""><figcaption></figcaption></figure>

Меню налаштувань також містить опцію стилю для кнопок соціальних мереж:

<figure><img src="/files/1373bd84fbbe418e82106c33043ef84bbe5c283e" alt="" width="563"><figcaption></figcaption></figure>

1. Стандарт: використовує оригінальний стиль іконок месенджерів:

<figure><img src="/files/d00b7e1162521fb2115d4c2747e2304a665de8b0" alt="" width="326"><figcaption></figcaption></figure>

2. з рамкою: прозорі іконки з кольором рамки, що відповідає стандартним кольорам відповідного месенджера.

<figure><img src="/files/16b154e95c77c8a454ae64df6d5ee84d7040a154" alt="" width="371"><figcaption></figcaption></figure>

3. Монохромний: іконки, відображені в єдиній кольоровій гамі.

<figure><img src="/files/91ddf5f56d90e81492c95b59b7ecfab3d84c4053" alt="" width="365"><figcaption></figcaption></figure>

Щоб заокруглити кути іконок, введіть потрібне числове значення в пікселях у поле «Заокруглені кути»:

<figure><img src="/files/409e5bad8d63f1228fe2af206bf56129f9029dd6" alt=""><figcaption></figcaption></figure>

## Налаштування блоку всередині секції

Кожен елемент у межах секції має однакові налаштування для відступів, рамок і фону.&#x20;

Ви можете налаштувати блок окремо від кожного елемента, а також вибрати:

### Відступ елемента

Ви можете налаштувати відступи елемента у відповідних полях:

<figure><img src="/files/75e361064ea070d4f4fddc5634a728f42e7fd133" alt=""><figcaption></figcaption></figure>

Ці відступи стосуються саме положення блоку контенту відносно його рамки.

### Рамка (внутрішня)

Секція містить дві рамки, які можна налаштувати: зовнішню рамку (для всієї секції) та внутрішню рамку (для зображення або інших елементів).

{% hint style="info" %}
Інструкції щодо редагування зовнішньої рамки секції можна знайти в розділі «Загальні налаштування секції» -> Рамка. посилання  "[Рамка](#ramka)"
{% endhint %}

Внутрішню рамку, що оточує блок контенту, можна налаштувати, обравши будь-який колір, товщину, а також окремі сторони для виділення та потрібний стиль лінії:

<figure><img src="/files/ab77b86bd87a80b1a551fa89d5f909a7738eaf8b" alt="" width="375"><figcaption></figcaption></figure>

Кожну сторону рамки можна налаштувати окремо від інших.

Для цього натисніть на сторону рамки, яку хочете редагувати:

<figure><img src="/files/bae4916bc022e485a3919bb783af5f7203edaf59" alt=""><figcaption></figcaption></figure>

Потім виберіть колір, товщину та стиль лінії для рамки.

Щоб налаштувати рамку з усіх чотирьох сторін, натисніть відповідну іконку:

<figure><img src="/files/e3c41dd021733f5c4d4b3730bd54da6f027ff8d4" alt=""><figcaption></figcaption></figure>

#### Радіус рамки&#x20;

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

<figure><img src="/files/f27e7c6a0abdc975edf0856f8b687536e02c0193" alt="" width="372"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/6c1fa4f5a23e268686e6f0929bbbab56ddc56087" alt=""><figcaption></figcaption></figure> <figure><img src="/files/a1306b53fcdfba2125b23c2433e1d1ec9fd00166" alt=""><figcaption></figcaption></figure></div>

### Фон блоку контенту всередині секції

<figure><img src="/files/2a8967c07db0e1d65877fca0ba6e49eeab2922c2" alt="" width="375"><figcaption></figcaption></figure>

Внутрішній фон, який застосовується лише до блоку, що містить певний елемент у межах секції, можна встановити, завантаживши зображення або вибравши колір із палітри.

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

<figure><img src="/files/2fcbd886a34ed03098cc99e8ddf5300ffbe8b3c9" alt=""><figcaption></figcaption></figure>

## Налаштування секції

Секцію з елементами контенту можна налаштувати інакше, ніж інші секції листа, застосувавши фонові кольори, додавши рамки та відкоригувавши відступи.

### Внутрішній відступ

Відступи секції застосовуються до всіх елементів, розташованих усередині секції:

<figure><img src="/files/617f16b6d53225fe941044158af8903f2b9a2825" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e1739cb454bfdf86cab20a09020b6f26bd508e41" alt=""><figcaption></figcaption></figure>

Альтернативно ви можете задати числові значення в полях, розташованих у меню праворуч під вкладкою «Секція»:

<figure><img src="/files/e526b74eb41ab6196f2cb423188dfb3f858743ad" alt="" width="366"><figcaption></figcaption></figure>

### Рамка

Секція містить дві рамки, які можна налаштувати: зовнішню рамку (для всієї секції) та внутрішню рамку (для зображення або інших елементів)

{% hint style="info" %}
Інструкції щодо редагування зовнішньої рамки секції можна знайти в розділі «Рамка (внутрішня)» посилання  "[Рамка (внутрішня)](#ramka-vnutrennyaya)"
{% endhint %}

Зовнішню рамку, яка обрамляє всю секцію з блоками контенту, можна налаштувати за допомогою будь-якого кольору та товщини, а також обравши потрібні сторони для виділення та стиль рамки:

<figure><img src="/files/caee317651cfd5a723baee27200b68b17de97abb" alt=""><figcaption></figcaption></figure>

Кожну сторону рамки можна налаштувати окремо від інших.

Для цього натисніть на потрібну сторону рамки:

<figure><img src="/files/21e066f9adde66cc3972fb86188e9ca1994bd9f7" alt=""><figcaption></figcaption></figure>

Потім виберіть колір, товщину та стиль рамки.&#x20;

Щоб налаштувати рамку з усіх чотирьох сторін, натисніть відповідну іконку:

<figure><img src="/files/b7c73fc52fab61b3394eb80f8d40a49ac5e726a7" alt=""><figcaption></figcaption></figure>

### Радіус рамки

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

<figure><img src="/files/302f871741301bf105df175dd3ceb60de9a3565f" alt="" width="372"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/9eb80c8fe70cda309a4e389213186fedf42f7eaf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/a0f2cfabe89f45970282f97415f2d8af94528efc" alt=""><figcaption></figcaption></figure></div>

### Фон

<figure><img src="/files/93ae5976184ccefcb18f77d2e20c8664074b827e" alt="" width="375"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/35ad985c9bd4269fc4c0cf3d4adb3d3efcc7613f" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/uk/biznes-rozsilki/konstruktor-email-rozsilok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.