Структура листа

Щоб гнучко створювати листи, які коректно відображаються в усіх поштових клієнтах (Gmail, Outlook, Apple Mail) і на різних пристроях, шаблон має чітку ієрархію елементів: Смуга → Структура → Контейнер → Блок.

Смуги

Смуга — елемент верхнього рівня, який ділить лист на горизонтальні секції та допомагає впорядкувати основні області повідомлення:

• Хедер — верхня частина листа з логотипом або навігацією;
• Контент — основна зона з текстом, зображеннями, кнопками та іншими блоками;
• Футер — нижня частина з контактами, соцмережами та юридичною інформацією;
• Інфообласть — розміщується над хедером або під футером і містить сервісні посилання (наприклад, перегляд листа в браузері або посилання для відписки).

Структури

Структура — елемент усередині Смуги, який визначає кількість контейнерів у горизонтальному ряду.

Щоб оновити/додати ще одну структуру, натисніть на іконку + та виберіть потрібну конфігурацію.

Одна структура може містити до 11 контейнерів у ряд.

📘

Примітка

Не рекомендується для кожної Структури без потреби використовувати окремі Смуги, оскільки кількість Cмуг впливає на розмір HTML-листа та може призвести до часткового відображення листа в Gmail.

Контейнери

Контейнер використовується для групування контенту всередині структури. Саме в контейнерах розміщуються блоки. Наприклад, для створення картки товару.

У порожньому контейнері відображаються іконки додавання базових блоків:

• зображення;

• текст;

• кнопка.

Налаштування елементів

Смуги, структури та контейнери мають уніфікований набір вкладок.

Вкладка Налаштування

Містить параметри, що визначають поведінку елемента та умови його відображення в листі. Набір опцій може включати як спільні параметри (доступні для всіх елементів), так і специфічні — залежно від типу елемента (смуга, структура або контейнер).

Спільні параметри:

• Відступи (крім смуги) — зовнішні та внутрішні відступи між структурами та контейнерами з блоками;
• Умови відображення — правила показу або приховування елемента після відправлення листа;
• Показувати — вибір версії листа, у якій відображається елемент (HTML, AMP HTML або усюди);
• Приховування елемента — у десктопній або мобільній версії листа.

Специфічні параметри:

• смуга — налаштування області листа (хедер, контент, футер або інфообласть);

• структура — кількість контейнерів, їх ширина та відступи між ними;

Вкладка Стилі

Призначена для налаштування зовнішнього вигляду елемента: кольорів, фону, меж та інших візуальних параметрів.

Вкладка Дані

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

Докладніше про налаштування smart-контейнерів >

Блоки

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

Усі доступні блоки розташовані на спеціальній боковій панелі редактора.

Щоб додати блок, перетягніть його в контейнер.

Якщо контейнер порожній, у ньому відображаються іконки швидкого додавання базових блоків (зображення, текст, кнопка). Клікніть потрібну іконку, щоб додати блок без перетягування з панелі.

Натисніть на блок, щоб відкрити його налаштування, які згруповані на вкладках:

• Налаштування — визначають поведінку блока та умови його відображення в листі: посилання, відступи, вирівнювання, умови показу тощо.
• Стилі — відповідають за зовнішній вигляд: кольори, фон, межі та інші візуальні характеристики.

Розглянемо елементи вкладки Блоки.

Зображення

Робота з блоком Зображення >

Текст

Містить вбудований текстовий редактор. Доступні налаштування: шрифт, розмір, стиль, міжрядковий інтервал, відступи. Доступний інструмент генерації тексту за допомогою ШІ.

Кнопка

Створення кнопки CTA >

Розділювач

Розділювач допомагає візуально відокремити різні контентні блоки. В налаштуваннях блока можна вибрати:

• фон блоку
• режим розділювача (ліня або простір)
• ширину, стиль та колір межі

Соцмережі

Додає посилання на сторінки бренду у соцмережах — Facebook, Instagram тощо.

Налаштування для блока:

• Тип іконок — вибір стилю відображення логотипів соцмереж: кольорові або монохромні.
• Список соцмереж — додавання, вимкнення, зміна порядку і введення посилань для Facebook, X, Instagram, YouTube тощо.
• Розмір іконки — встановлення висоти та ширини іконок у пікселях.
• Простір між іконками (десктоп) — регулювання горизонтального інтервалу між іконками на великих екранах.
• Title та alt-текст — додаткові підписи для доступності та підказок при наведенні (за потреби можна вмикати/вимикати).

Меню

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

Типи меню:

• посилання;
• іконки;
• іконки та посилання.

HTML

Блок HTML призначений для додавання власного HTML- та CSS-коду.

📘

Примітка

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

Адаптивність і стилі такого блока потрібно налаштовувати безпосередньо в HTML-коді.

Банер

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

Відео

Блок призначений для показу відео із зовнішніх платформ, таких як YouTube, Vimeo чи Instagram. У листі відображається прев’ю з кнопкою Play, яка веде на сторінку перегляду — це допомагає привернути увагу та підвищити залучення, наприклад, для оглядів товарів, промовідео або брендованого контенту.

Можна додати посилання на відео, налаштувати alt-текст, використати власне зображення прев’ю та обрати стиль кнопки відтворення. Розмір прев’ю для десктопу задається вручну, а режим адаптивності забезпечує коректне відображення на мобільних пристроях.

📘

Примітка

Більшість поштових клієнтів не підтримують відтворення відео в листах. Після натискання кнопки відтворення відкриється сторінка з відео на сервісі, де воно розміщене

Таймер

Робота з блоком Таймер >

AMP блоки

Технологія AMP дозволяє створювати листи, які виглядають як окремі вебсторінки. Одержувач може виконувати дії безпосередньо в листі: переглядати асортимент товарів, бронювати зустріч тощо. Інструкції з налаштування AMP-елементів:

• Карусель
• Акордеон
• Форма

Товарні блоки

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

• Товари
• Ціна
• Знижка
• Колонки

Навігація та дії з елементами

Щоб вибрати елемент, натисніть на нього в редакторі.

Всі елементи листа можна:

• зберегти як модуль (крім блоків);
• перемістити;
• дублювати;
• видалити.

1. Наведіть курсор на іконку з трьома крапками біля потрібного елемента.

2. Оберіть відповідну опцію в контекстному меню.