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

1. Настройка адаптивности через вкладку “Оформление”

Настройка адаптивности происходит во вкладке “Оформление”, которая предназначена для создания общего стиля всего письма.

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

Далее нужно перейти в последний пункт этой вкладки:

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

1. Размер текста

Находится во вкладке “Оформление” → “Адаптивность”. Здесь можно задать настройки текста и заголовков для отображения на мобильных устройствах.

В редакторе eSputnik по умолчанию указан оптимальный размер шрифта для элементов.

Для десктопной версии писем для текста чаще всего используется шрифт 14 px. Но на экране мобильного устройства он будет слишком мелким, поэтому оптимальным будет шрифт размером не менее 16 px.

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

2. Кнопки

Размер текста на кнопке и размещение кнопки в мобильной версии письма также можно задать отдельно. 

Для мобильной версии можно изменить внешние отступы, внутренние останутся такими же, как и для десктопной версии.

На кнопку можно поместить иконку. Но эта функция не поддерживается в Windows Outlook 2002, 2007, 2010, 2013, 2016, 2019. 

3. Общие отступы

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

2. Настройка отдельных блоков

1. Карточка товара

Настройка карточки товара происходит через раздел “Контент” → “Структуры”, по клику на карточку товара слева откроется раздел, в котором можно включить адаптивность, а также вносить другие изменения: добавить картинку, ссылку, выравнивание, отступы и т. п.

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

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

Предпросмотр доступен по клику на кнопку “Просмотр сообщения” в верхнем меню: 

1.1. Обратный порядок блоков

Если карточка составлена в обратном порядке (сначала текст, потом картинка), на мобильном это может выглядеть некрасиво. Чтобы блоки отобразились в другой последовательности, включите инверсию контейнеров (работает для двух контейнеров). Это означает, что элементы на мобильном устройстве будут отображаться в обратном порядке: картинка → текст.

1.2. Отключение адаптивности

Если перестраивание элементов может навредить дизайну письма, адаптивную структуру можно отключить.

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

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

2. Адаптивность картинок

Настройка адаптивности изображений находится в разделе “Контент” и доступна при нажатии на контейнер с изображением:

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

3. Центрирование текста

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

4. Скрытие/отображение блоков для разных устройств

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

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

5. Блок “Меню”

В “Меню” также можно сократить отображение пунктов для мобильной версии. Для этого нужно перейти в настройки блока меню и отключить лишние категории. 

В блоке “Меню” мы рекомендуем использовать не более 4 пунктов для корректного отображения на мобильном. Если блок выглядит неопрятно, можно уменьшить шрифт.