Як створити AMP-акордеон

Акордеон - це блок, який дозволяє відкривати/приховувати частину контенту за кліком цього блоку. Такий підхід надає можливість економити місце й не відволікати клієнта інформацією, яка йому, можливо, не потрібна. Такий ефект можна зустріти на сайтах, а тепер ще й використовувати в email-розсилках.

Важливо!

Щоб при відправленні розсилки AMP-акордеон відображався в одержувачів, подайте заявку на підтвердження відправника.

Приклад акордеона в листі

Як створити AMP-акордеон

Заздалегідь підготуйте лист, у який бажаєте додати цей блок.

1. Зайдіть у редакторі до вкладки «Контент» → «Блоки».

Створення листа з AMP-акордеоном

2. Знайдіть блок «Акордеон»

Блок Акордеона

3. Перетягніть його в порожню або заздалегідь оформлену Структуру в листі.

Додавання блоку в лист

Налаштування блоку акордеона

Тепер переходимо безпосередньо до налаштувань, які відкриються, коли ви клікнете вибраний блок.

Налаштування блоку Акордеон

1. Автозгортання секцій.

Автозгортання секцій

За замовчуванням ця кнопка вимкнена й дозволяє користувачеві відкривати відразу кілька секцій акордеона. Це налаштування доступне, якщо ви вже додали кілька секцій.

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

Перемкніть повзунок праворуч, щоб тримати весь час відкритою тільки одну секцію, а решта автоматично приховувалася.

Автоматичне приховування секцій акордеона в листі

2. Щоб переходи за кліком по вкладках акордеона відкривалися плавно, за замовчуванням увімкнено «Анімацію розгортання». За необхідності ви можете її вимкнути, перетягнувши повзунок ліворуч.

Анімація розгортання

3. Далі йдуть налаштування, які стосуються загального оформлення секцій.

Налаштування оформлення секцій акордеона

Тут ви можете встановити:

  • Колір фону. Можна вибрати один із стандартних або вказати свій HEX-код.

Вибір кольору фону секцій

  • Параметри обведення. За замовчуванням контур вимкнений. Щоб відкрилися доступні налаштування, перетягніть повзунок праворуч. Ви матимете змогу вибрати форму, задати ширину й колір меж.

Створення контурів для блоків

  • Колір тексту секцій. За замовчуванням указаний HEX-код #659c35, але ви легко зможете його змінити, вибравши один зі стандартних або прописавши свій.

Колір тексту секції

  • Розмір шрифту для назви секції.

Розмір шрифтів секцій

4. Щоб у вас було кілька секцій в акордеоні — натисніть кнопку «Додати секцію».

Додавання нової секції

5. У відповідному полі задайте назву кожної із секцій. Ця назва буде відображатися в листі як заголовок, після кліку по якому відобразиться контент.

Назва секцій акордеона 

6. Під кожною з секцій є бігунок, який дозволить розгорнути вміст одного або одразу кількох розділів. Максимально можна використовувати до 200 символів, що займає близько 4 рядків.

Розгортання секцій

Далі можете повертатися до цього блоку в листі і заповнювати розділи власним контентом.

Заповнення блоків контентом

Це може бути що завгодно:

Важливо:

1. Акордеон буде відображатися тільки для тих поштових клієнтів, які підтримують технологію AMP:

  • Gmail на десктопі;

  • Mail.ru на десктопі;

  • Outlook.com на десктопі;

  • Yahoo і AOL планують, але ще не підтримують;

  • Gmail на Android та iOS.

2. Акордеон відображатиметься, тільки якщо ви подавали заявку й стали довіреним відправником у Google, Mail.ru та Outlook.

3. Для поштовиків, які не підтримують AMP, треба буде створити альтернативний блок у вигляді HTML-елемента. Для цього можна, наприклад, використати блок «Картинка» і вказати, що це HTML-версія.

Альтернативний блок HTML

Попередній перегляд вашого AMP-акордеона

Щоб перевірити, як виглядає ваш лист з обома версіями, натисніть кнопку «Попередній перегляд» у верхній панелі.

Перегляд листа

За замовчуванням відкриється версія «AMPHTML», усі дії в листі можна буде виконувати і в попередньому перегляді.

AMPHTML

Також переключіться у верхньому меню на HTML-версію, щоб перевірити альтернативний варіант листа.

Лист з HTML

Усі інші елементи, для яких ви не встановили опцію «Включити в...», будуть відображатися в обох версіях ваших email-розсилок.

Перевірка помилок в AMP

Щоб перевірити коректність коду листа, натисніть в редакторі повідомлень на попередній перегляд листа.

Попередній перегляд повідомлення

У вікні, що відкриється, ви можете навести курсор на помилки, щоб побачити їхній опис. Знайдені помилки можна виправити безпосередньо в редакторі або скопіювати код письма для валідації в Google Playground.

Доступні три опції:

  • Відкрити редактор коду.

  • Копіювати AMP HTML у буфер обміну.

  • Відкрити AMP Playground.

Попередній перегляд листа на наявність помилок в AMP

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email