Как создать 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.
Доступны 3 опции:

• Открыть редактор кода,
• Копировать AMP HTML в буфер обмена,
• Открыть AMP Playground.

Читайте также "Как подать заявку для добавление в белый список отправителей AMP"