Как создать AMP-аккордеон

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

Важно! Чтобы при отправке рассылки AMP-аккордеон отображался у получателей - подайте заявку на подтверждение отправителя.

Пример аккордеона в письме
 

Как создать AMP-аккордеон

Подготовьте предварительно письмо, в которое хотите добавить этот блок.

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

Создание письма с AMP-аккордеоном

 
  1. Найдите блок «Аккордеон»‎

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

  1. Перетащите его в пустую или заранее оформленную Структуру в письме.

Добавление блока в письмо

Настройка блока аккордеон

Теперь переходим непосредственно к настройкам, которые открываются, когда вы кликните на выбранный блок.

 

Настройки блока Аккордеон

  1. Автосворачивание секций.

 

Автосворачивание секций

По умолчанию эта кнопка отключена и позволяет пользователю открывать сразу несколько секций аккордеона. Эта настройка доступна если вы уже добавили несколько секций.

Открытие аккордеона в письме

Переключите бегунок вправо, чтобы держать все время открытой только одну секцию, а остальные автоматически скрывались.

Автоматическое скрытие аккордеона в письме

 
  1. Чтобы переходы при клике по вкладкам аккордеона открывались плавно, по умолчанию включена «Анимация разворачивания». При необходимости можете его отключить, перетащив ползунок влево.

«Анимация разворачивания»

  1. Далее идут настройки, которые касаются общего оформления секций.

    Настройки оформления секций аккордеона

Здесь вы можете установить:

  • Цвет фона. Можно выбрать один из стандартных или указать свой HEX-код.

Цвет названия структуры

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

Создание контуров для блоков

  • Цвет текста секций. По умолчанию указан HEX-код #659c35, но вы легко его сможете изменить, выбрав один из стандартных или прописать свой.

Цвет текста секции

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

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

  1. Чтобы у вас было несколько секций в аккордеоне - нажмите кнопку «Добавить секцию».

Добавление новой секции

  1. В соответствующем поле задайте название каждой из секций. Это название будет отображаться в письме как заголовок, по щелчку на который покажется содержимое.

Название секций

  1. Под каждой из секций есть бегунок, который позволит развернуть содержимое одного или сразу нескольких разделов. Максимально можно использовать до 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-рассылок.