Настройка адаптивности

Адаптивность емейл-шаблона обеспечивает его корректное отображение на экранах разных размеров. Адаптивность создается с помощью гибких настроек размеров элементов письма, перестроения их расположения по отношению друг к другу, скрытия отдельных блоков и других способов, подробнее о которых читайте ниже.

Обратите внимание: адаптивность работает только в почтовиках, которые ее поддерживают.

Общие настройки адаптивности

Во вкладке “Оформление” можно задать размеры текста, кнопок и отступов для всего письма.

Чтобы сделать общие настройки адаптивности доступными, активируйте соответствующую опцию в разделе “Оформление” → “Общие настройки”.

Настройка адаптивности отдельных элементов

Каждый базовый элемент шаблона имеет отдельные настройки адаптивности. Чтобы открыть их в левой панели, нажмите на элемент, который хотите настроить.

Скрытие элемента

Любой элемент письма можно скрыть при отображении на мобильном или десктопном экране. Например, можно уменьшить количество пунктов меню на мобильном:

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

Отступы играют важную роль в создании удобочитаемого и эстетически приятного дизайна электронных писем, особенно когда речь идет о просмотре на мобильных устройствах с их ограниченным пространством.

Инверсия контейнеров на мобильном

Инверсия меняет порядок расположения элементов письма на мобильных устройствах, что делает контент более удобным для восприятия.

Пример структуры с инверсией:

Пример структуры без инверсии:

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

Использование адаптивной структуры перестраивает контейнеры так, что они располагаются друг под другом.

Пример адаптивной структуры:

Адаптивная картинка

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

Центрирование текста и отступы

Можно задать отдельные настройки выравнивания текста и отступов на мобильной версии — для этого нажмите на иконку мобильного и внесите соответствующие параметры отображения письма.