Усе для адаптивності в редакторі

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 пункти для коректного відображення на мобільному. Якщо блок має неохайний вигляд, можна зменшити шрифт.