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

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

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

Вы можете посмотреть настройки адаптивности на вкладке «Оформление», которая предназначена для создания общего стиля всего письма. Сейчас нам нужен последний пункт этой вкладки:

Адаптивность

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

1. Настройка шрифтов для всего письма

Находится во вкладке «Оформление» - «Адаптивность». Здесь можно задать настройки текста и заголовков для отображения на смартфонах.

Адаптивность шрифта

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

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

2. Настройка текста на кнопке

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

Размер текста на кнопке

3. Перестраивание блоков

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

Пример как делать адаптивные блоки в контейнере

 

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


Результат правильного расположения блоков в контейнере при настройке адаптивности

Если карточка товаров расположена горизонтально:

Горизонтальная карточка товара

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

Перестройка горизонтальной карточки товара на мобильной версии

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

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

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

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

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

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

Отключение адаптивности для структуры

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

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

Важно: настройка адаптивности изображений находится в разделе «Контент» и доступна, когда вы становитесь на контейнер с изображением:

Вкладка Контент - задать адаптивность контенту письма

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

Размеры изображения

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

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

Выравнивание по левому краю на мобильном

Выравнивание текста по центру на мобильном

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

Результат центрирования текста на мобильном

6. Отключение/включение блоков для разных устройств

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

Скрытие блока на мобильном устройстве

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

Отключение элемента на мобильном

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

Скрытие блока на мобильных

7. Блок «Меню» на телефоне

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

Как скрыть пункты меню на мобильном

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

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