Створення AMP-каруселі

Карусель зображень — один зі способів додати інтерактивність у лист.

Ви можете створити її:

• за допомогою вбудованого блоку Карусель;
• або через сторонній сервіс.

📘

Важливо

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

Створення AMP HTML-каруселі

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

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

2. Додайте блок Карусель у шаблон.

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

Додавання та налаштування слайдів

1. Додайте зображення для першого слайду:

• виберіть картинку з попередньо завантажених;
• або завантажте нову

2. Додайте Alt-текст та посилання.

3. Щоб створити інші слайди, натисніть + та повторіть дії з двох попередніх пунктів.

Кількість використовуваних слайдів не обмежена.

👍

Рекомендація

Використовуйте зображення однакового розміру для плавного перемикання каруселі.

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

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

Загальні налаштування каруселі

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

1. Автоперегортання — автоматичне перемикання слайдів з часом затримки.

2. Циклічне перегортання — безперервне відтворення слайдів по колу під час кліку.
3. Заповнення слайда зображенням — спосіб відображення картинки в межах слайда (заповнити або вмістити).
4. Показ прев’ю — відображення мініатюр слайдів.

5. Заповнення мініатюри зображенням — вибір способу відображення картинки в межах превью (заповнити або вмістити).
6. Розмір прев’ю — налаштування розміру мініатюр.

7. Вирівнювання — визначає розташування блоку прев’ю відносно каруселі:

• по горизонталі — зліва, по центру або справа;
• по вертикалі — зверху або знизу каруселі.

8. Відступ між прев’ю — відстань між мініатюрами.
9. Тип предперегляду — відображення мініатюри слайда або кольорової мініатюри.

Якщо активувати опцію Загальне посилання, то всі слайди каруселі отримують один спільний URL.

Використовуйте, якщо:

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

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

Користувачі Gmail побачать AMP-блок. Для інших клієнтів потрібно створити карусель через спеціальний блок HTML.

Створення каруселі через сервіс FreshInbox

Підтримується:

• iPhone Mail
• Android Mail 4.x
• Apple Mail
• Yahoo! Mail
• AOL Mail

У непідтримуваних клієнтах (Gmail, Outlook 2007–2013, Outlook.com) відображається лише перше зображення.

1. Перейдіть у FreshInbox.
2. Додайте посилання на зображення.

Мінімальна кількість зображень — три. Для додавання використовуйте кнопку More images.

3. Налаштуйте розміри блоку.

4. Протестуйте, відправивши на свою адресу.

Перенесення блоку до eSputnik

1. Додайте блок HTML.

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

3. Скопіюйте HTML код з Freshinbox.

4. Вставте код із FreshInbox і натисніть Застосувати зміни.

5. Скопіюйте CSS код із Freshinbox.

6. Відкрийте вкладку Користувацький CSS та вставте CSS код.
7. Видаліть тег <style> на початку і в кінці коду.

8. Натисніть Застосувати зміни.

Налаштування показу

• Для блоку Карусель

Виберіть у налаштуваннях Показувати ⚡HTML.

• Для блоку HTML

Виберіть у налаштуваннях Показувати HTML.

Перевірка відображення обох блоків

Щоб перевірити, як працюють AMP та HTML-блоки:

1. Натисніть Попередній перегляд.

2. У вікні перегляду перемикайтеся між версіями:

• ⚡ AMPHTML
• HTML

Переконайтеся, що:

• в AMP-версії відображається інтерактивна карусель;
• в HTML-версії — перше зображення.

Замість HTML-каруселі можна додати звичайну картку товару та увімкнути для неї показ HTML.

У такому разі вона відображатиметься лише у клієнтах без підтримки AMP.

Перевірка AMP-листа на помилки

У вікні попереднього перегляду натисніть Помилки, щоб побачити опис.

За потреби:

• виправте код у редакторі;
• скопіюйте код;
• або відкрийте в Google Playground для валідації.