Всё для адаптивности в редакторе

Некоторые письма, которые отлично смотрятся в веб-версии, могут отображаться искаженно на мобильных устройствах. Именно по этой причине в новом редакторе есть встроенная функция адаптивности. Вы можете посмотреть настройки адаптивности на вкладке “Оформление”, которая предназначена для создания общего стиля всего письма. Сейчас нам нужен последний пункт этой вкладки:

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

Для веб-версии писем наиболее часто используется шрифт с размером 14 пикселей. Но на экране мобильного устройства он будет слишком мелким, поэтому лучше использовать шрифт размером не менее 16 пикселей. Для заголовков слишком большой шрифт лучше не использовать, так как такой заголовок может занимать 3-4 строки. Заданный здесь размер шрифта будет приоритетнее, чем тот размер, который задан на вкладке “Контент” (это относится и к размеру ссылок).

Размер текста на кнопке и размещение кнопки в мобильной версии письма вы также можете задать отдельно. 
Обратите внимание: чтобы карточка товара корректно перестроилось в адаптивной версии, все ее элементы должны быть расположены в одном контейнере:

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

А вот как будет выглядеть на мобильном экране структура карточки товара, когда она расположена горизонтально:

Здесь также действует правило размещения всех элементов в одном контейнере.
Важно: настройка адаптивности изображений находится в разделе “Контент”:

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

Также на вкладке “Контент” вы можете задать выравнивание текста на мобильной версии:

При включении этого параметра текст будет размещен по центру:

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

Скрыть можно любую структуру в вашем письме:

И что немаловажно для удобства чтения письма, вы можете сократить отображение пунктов меню на телефоне: