Как создать AMP-аккордеон
Аккордеон - это блок, который позволяет открывать/ скрывать часть содержимого при клике на этот блок. Такой подход даёт возможность экономить место и не отвлекать клиента информацией, которая, возможно, ему не нужна. Такой эффект можно встретить на сайтах, а теперь ещё и использовать в email-рассылках.
Важно!
Чтобы при отправке рассылки AMP-аккордеон отображался у получателей - подайте заявку на подтверждение отправителя.
Как создать AMP-аккордеон
Подготовьте предварительно письмо, в которое хотите добавить этот блок.
-
Зайдите в редакторе во вкладку «Контент» → «Блоки».
-
Найдите блок «Аккордеон»
-
Перетащите его в пустую или заранее оформленную Структуру в письме.
Настройка блока аккордеон
Теперь переходим непосредственно к настройкам, которые открываются, когда вы кликните на выбранный блок.
-
Автосворачивание секций.
По умолчанию эта кнопка отключена и позволяет пользователю открывать сразу несколько секций аккордеона. Эта настройка доступна если вы уже добавили несколько секций.
Переключите бегунок вправо, чтобы держать все время открытой только одну секцию, а остальные автоматически скрывались.
-
Чтобы переходы при клике по вкладкам аккордеона открывались плавно, по умолчанию включена «Анимация разворачивания». При необходимости можете его отключить, перетащив ползунок влево.
-
Далее идут настройки, которые касаются общего оформления секций.
Здесь вы можете установить:
- Цвет фона. Можно выбрать один из стандартных или указать свой HEX-код.
- Параметры обводки. По умолчанию контур отключен. Чтобы открылись доступные настройки, перетяните ползунок вправо. Вы сможете выбрать форму, задать ширину и цвет границ.
-
Цвет текста секций. По умолчанию указан HEX-код #659c35, но вы легко его сможете изменить, выбрав один из стандартных или прописать свой.
- Размер шрифта для названия секции.
-
Чтобы у вас было несколько секций в аккордеоне - нажмите кнопку «Добавить секцию».
-
В соответствующем поле задайте название каждой из секций. Это название будет отображаться в письме как заголовок, по щелчку на который покажется содержимое.
-
Под каждой из секций есть бегунок, который позволит развернуть содержимое одного или сразу нескольких разделов. Максимально можно использовать до 200 символов, что займет около 4 строк.
Далее можете возвращаться к этому блоку в письме и заполнять разделы своим контентом.
Это может быть что угодно:
- Картинки,
- Текст,
- Кнопки,
- Иконки социальных сетей,
- Видео.
Важно:
1. Аккордеон будет отображаться только для тех почтовых клиентов, которые поддерживают технологию AMP:
- Gmail на десктопе,
- Mail.ru на десктопе,
- 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"