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

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 пунктов для корректного отображения на мобильном. Если блок выглядит неопрятно, можно уменьшить шрифт.

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email