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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приклад

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

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

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

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

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

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

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

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

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

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

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

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