Email

Омніканальність

Автоматизація

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

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