Створення AMP-акордеону

Акордеон — це інтерактивний блок, який дозволяє розгортати або згортати частину контенту всередині листа.

Його використовують, коли потрібно:

зменшити обсяг видимого контенту;
винести додаткову інформацію в розгортні секції;
показувати деталі лише після взаємодії користувача.

🚧
Важливо

Щоб надсилати AMP-листи, потрібно отримати схвалення Google для вашого відправника.

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

Gmail (web, Android, iOS)
Yahoo Mail;
AOL Mail (частково).
FairEmail (Android)

В інших поштових клієнтах AMP-контент не відображається.

Створення AMP-акордеона

Додавання блоку

Створіть новий лист або відкрийте існуючий.
Додайте блок Акордеон у шаблон.

Натисніть на блок, щоб відкрити його налаштування.

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

За замовчуванням акордеон містить одну секцію.

Щоб додати нову секцію:

Натисніть +, та вкажіть її заголовок.

Натисніть на контентну частину секції
Виберіть блок для додавання.

У порожній секції відображаються іконки додавання базових блоків:

зображення;
текст;
кнопка.

📘
Примітка
Акордеон може містити будь-які блоки.

Розглянемо приклад акордеона з зображенням.

Додайте зображення — оберіть файл із завантажених або завантажте новий.

👍
Рекомендація
Використовуйте зображення однакового розміру. Це забезпечує:

акуратний вигляд;

відсутність зміщення контенту;

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

Якщо зображення мають різні розміри, відредагуйте їх у вбудованому редакторі:

змінить масштаб;
вирівняйте пропорції.

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

Вкладка Налаштування

Керує логікою показу секцій.

Показувати відкритою. Визначає, чи буде секція розгорнута одразу після відкриття листа. Налаштовується окремо для кожної секції.
Відступ між секціями. Встановлює відстань між заголовками секцій у пікселях.
Автоматичне згортання. Дозволяє одночасно тримати відкритою лише одну секцію. Під час відкриття нової попередня закривається автоматично.
Анімація розгортання. Вмикає плавний ефект відкриття та закриття секцій.

Вкладка Стилі

Містить параметри зовнішнього вигляду акордеона — шрифт, кольори, вирівнювання заголовка, фон і межі.

Створення HTML-версії контенту для клієнтів без підтримки AMP

AMP-акордеон відображається лише у клієнтах, що підтримують AMPHTML, тому обов’язково створіть альтернативну HTML-версію контенту, наприклад з блоком Зображення.

Для цього: