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

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

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

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

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

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-версія.

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

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

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

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

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

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

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

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

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

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

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

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