How to Build AMP Accordion_Cover Image_Stripo
timer ~ 7 мин читать
14568 просмотры
оценить
21 сентября 2019

Как создать AMP-аккордеон в Stripo без знаний HTML

Stripo / Blog / Как создать AMP-аккордеон в Stripo без знаний HTML

Создание AMP-аккордеона еще никогда не было настолько простым.

Я с гордостью сообщаю, что 18 сентября мы выпустили совершенно новую функцию: Drag-n-Drop блок AMP-аккордеона.

Навыки программирования не понадобятся. Не нужно добавлять какие-либо скрипты в код письма. Stripo все сделает за вас!!

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

Понадобится всего несколько простых шагов:

  • перетащите блок AMP-аккордеона в свой шаблон;

Building-AMP-Accordion_AMP-Accordion-Block

  • опция «Анимация разворачивания» включена по умолчанию. Она активирует параметр «Переход», который позволяет вашим секциям открываться и закрываться плавно. Если это не нужно, вы всегда можете выключить опцию, переключив кнопку;

AMP-Accordion_Toggling-Animated-Expansion-Button

  • теперь вам нужно поработать над дизайном аккордеона. Установите цвет фона, ширину и цвет контура, цвет текста секции и размер шрифта. Пожалуйста, не забывайте, что сейчас вы работаете над дизайном аккордеонных секций. Другими словами, это то, что увидят клиенты, когда аккордеон свернут;

AMP-Accordion_Working-on-Accordion-Design

  • добавьте столько секций, сколько вам нужно;

Adding-Sections-to-Accordion RU

  • дайте всем секциям имена. Вы можете ввести до 200 символов. Если вы добавите больше, письмо увеличится в ширину. Но даже 200 символов — как-то многовато, это более 4 строк;

  • теперь включите «Автосворачивание секций», чтобы активировать эту опцию. Она позволяет показывать одну секцию за раз. Когда вы открываете любую другую секцию, то открытая ранее закрывается;

AMP-Accordion_Toggling-Auto-Collapsing-Function RU

  • вы можете захотеть показывать одну из секций постоянно открытой, чтобы клиенты знали, что в этой секции находится какой-то контент. Для этого включите для нужной секции кнопку «Показывать открытой»;

AMP-Accordion_Expanded-Sections RU

  • теперь заполните эти секции своим контентом. Это может быть что угодно — к примеру, изображения, текст, кнопки, баннеры, иконки соцсетей, видео и т. д.;

  • отредактируйте контент так, как вы обычно это делаете при создании писем в Stripo.

Попробуйте Stripo

Важно отметить:

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

Как создать резервный вариант с помощью Stripo:

Вы делаете всё так, как при создании обычного шаблона в Stripo. Но когда закончите, вам понадобится активировать всю структуру резервного варианта, и на панели настроек нажмите кнопку «Включать в HTML».

The-Include-in-HTML-Button_Building-AMP-Emails

После этого структура будет помечена как HTML, а структура с AMP-аккордеоном соответственно как ⚡HTML:

Stripo-How-to-Build-AMP-Emails-with-StripoShowing-andHiding-Elements-for-Emails

Все остальные элементы, для которых вы не активировали опцию «Включать в...», будут отображаться в обеих версиях письма.

Предварительный просмотр вашего AMP-аккордеона

Теперь, когда ваше письмо готово к рассылке, нужно предварительно посмотреть на него перед отправкой получателям:

  • нажмите кнопку «Просмотреть» над шаблоном;

How-to-Build-Email-with-Stripo-Previewing-Your-Email RU

  • выберите версию AMP HTML;

  • попробуйте взаимодействовать с вашим AMP-аккордеоном.

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

Отсутствующую ссылку тоже можно считать багом.

Stripo поможет вам в этом: на этапе предварительного просмотра наш редактор показывает, есть ли в вашем AMP-письме какие-то ошибки.

Mistakes-in-AMP-Version-of-Your-Emails

Если они есть — в нашем примере аж три — то нажмите красную кнопку, чтобы увидеть, что нужно исправить. Мне пришлось добавить ссылки для лого и вкладок меню.

Если вы создали свое AMP-письмо с помощью нашего Drag-n-Drop блока AMP-аккордеона, не вводили никаких внешних сценариев в код письма и добавили все необходимые ссылки даже для иконок соцсетей, то ваше AMP-письмо будет корректно отображаться во всей почтовиках.

Зарегистрироваться

Какие почтовики поддерживают AMP

  • Gmail desktop — да;

  • Mail.ru desktop — да;

  • Yahoo и AOL — поддержка будет в ближайшее время;

  • Gmail на Android и iOS — ожидается этой осенью.

Обратите внимание, что для отправки AMP-писем вам необходимо попасть в белый список как доверенный отправитель Google, Mail.ru.

Распространенные способы использования AMP-аккордеонов и резервных вариантов

Конечно, есть много способов использования аккордеона в письмах, но мы рассмотрим только наиболее распространенные.

Инструкции

Иногда нам нужно объяснить клиентам, как сделать что-то разными способами, или дать пошаговую инструкцию по использованию нашего нового инструмента. AMP-аккордеон будет здесь очень полезен.

Добавляя его в HTML-письмо, вы даете получателям возможность пропустить шаги, с которыми они уже знакомы, и быстрее найти то, с чем у них возникли некоторые трудности.

Building-AMP-Accordion-with-Stripo_Step-by-Step-Guide

Вы можете добавлять изображения, видеоуроки и кнопки — при желании, кнопки можно даже добавить в каждую секцию аккордеона.

Резервный вариант

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

Accordion-for-Manuals

(пример от Brighton)

Дайджест-рассылки

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

Если вы публикуете более 5 постов в своих дайджестах, обязательно оформите их в виде аккордеона.

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

Monthly-Investor's-Update

Резервный вариант

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

AMP-Accordion_Example-of-Email-Digest-by-Hubspot.

(пример от Hubspot)

Как вариант вы можете использовать в дайджестах ссылки-анкоры.

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

Категории товаров

Большинство интернет-магазинов продвигает не один продукт, а целую серию. Тем не менее клиенты могут не интересоваться всем вашим ассортиментом — они хотят посмотреть определенные категории.

Аккордеон хорошо работает, если вам нужно продвигать более 10 позиций одновременно.

AMP-Accordion-for-Categories

Резервный вариант

Здесь в качестве запасного варианта вы можете добавить несколько карточек товаров. Обязательно разместите их по несколько штук в ряд.

Fallback-to-Accordion-with-Product-Snippets

(пример от GAP)

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

Напоминаем

Для того, чтоб ваши получатели увидели именно АМР-письмо, нужно:

  • получить от Google разрешение на отправку АМР-контента;
  • в случае возникновения каких-либо ошибок, которые можно обнаужить именно в меню «Предпросмотр», их нужно устранить в коде. Хотя письма, созданные с помощью наших АМР-блоков, не будут содержать ошибоок;
  • включить HTML-версию в письмо. В противном случае, оно может быть совсем не доставлено;
  • убедиться, что ваш ESP/CRM поддерживает отправку АМР-контента;
  • учитывать, что на данный момент только Gmail (веб версия и приложение на мобильном, как на Android, так и на iOS) и Mail.ru (веб версия и приложение на мобильном, как на Android, так и на iOS) поддерживают АМР-контент. Yahoo скоро пополнит этот список;
  • письма теряют АМР-контент при пересылке.

В завершение

Используя инновационные технологии в своих рассылках, вы улучшаете взаимодействие с клиентами и оставляете конкурентов позади.

Чтобы быть уверенными, что получатели увидят ваши AMP-письма, убедитесь в следующем:

  1. в вашем AMP-коде нет багов — Stripo проверит, есть ли ошибки в письме, и даже подскажет, как их исправить;
  2. у вас должны быть резервные варианты для клиентов, чьи почтовики еще не поддерживают AMP4Emails;
  3. вы зарегистрированы как отправитель в топовых почтовиках.

Подробности о создании, тестировании и экспорте AMP-писем вы найдете в статье «Как создать AMP-письма с помощью Stripo» нашего блога.

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи в письмах помогают нам развивать бизнес и производить хорошее впечатление на клиентов. И поскольку это последний элемент, который люди видят в письмах, нам нужно сделать подписи креативными и запоминающимися. Давайте рассмотрим лучшие примеры подписей и их правильное использование в письмах и шаблонах рассылок. Стоит отметить, что профессиональные подписи с подробной контактной информацией нужны для любого бизнеса. Используйте этот шаблон, чтобы создавать подписи для рассылок быстрее Использовать Такой пример подписи хорошо подходит для юридических консультаций, банковского дела и т.д....

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!