Конструктор email-листів

02.07.2026

На цій сторінці

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

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

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

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

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

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

Зображення
Текст
Порожній блок
Кнопка
Соціальні мережі
HTML-блок

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

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

Внутрішні відступи;
Рамка;
Радіус рамки;
Тло.

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

Зображення

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

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

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

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

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

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

Текст

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

Увага!

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

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

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

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

Зверніть увагу!

Ви можете додати до чотирьох елементів вмісту (блоків) в одній секції.

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

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

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

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

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

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

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

Кнопка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Інструкції щодо редагування зовнішньої рамки секції можна знайти в розділі «Загальні налаштування секції» -> Рамка. посилання «Рамка»

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

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

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

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

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

Радіус рамки

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

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

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

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

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

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

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

Відступи

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

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

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

Рамка

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

Інструкції щодо редагування зовнішньої рамки секції можна знайти в розділі «Рамка (внутрішня)» посилання «Рамка (внутрішня)»

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