Налаштування адаптивності

Адаптивність забезпечує коректне відображення листа на мобільних і десктопних пристроях.

Вона дозволяє:

• перебудовувати структуру листа;
• змінювати порядок контейнерів;
• приховувати окремі елементи.

📘

Примітка

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

Загальні налаштування адаптивності

Панель Загальні стилі об’єднує всі параметри оформлення листа. Це дозволяє швидко задати єдиний стиль для повідомлення та всіх його елементів.

Опція Адаптивний дизайн увімкнена за замовчуванням.

Якщо вимкнути цю опцію, лист не буде перебудовуватись під мобільні пристрої.

Налаштування адаптивності окремих елементів

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

Щоб змінити налаштування:

1. Натисніть потрібний елемент у шаблоні.
2. Відкрийте панель параметрів.
3. Внесіть зміни для мобільної та/або десктопної версії.

Приховування елемента

Будь-який елемент листа можна приховати при відображенні на мобільному або десктопному екрані.

Наприклад, скоротіть блок Меню для мобільної версії, приховавши частину пунктів.

У результаті елемент не відображатиметься у вибраній версії.

Відступ між контейнерами на мобільному

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

Інверсія контейнерів на мобільному

Опція інверсії змінює порядок відображення контейнерів у мобільній версії.

Приклад

На десктопі зображення розташоване зліва, текст — справа.

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

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

Адаптивна структура

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

Адаптивність зображення

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

• зображення не виходить за межі екрана;
• пропорції зберігаються.

Центрування тексту та відступи

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

• десктопної версії;
• мобільної версії.