Как добавить меню в емейл-сообщение с помощью Stripo

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

(Статистика реальная, вымышленное только название магазина).

15% подписчиков, которые открывали емейл, кликали по пунктам меню. Так почему бы не привлечь и не мотивировать каждого седьмого получателя делать покупки у вас, просто добавляя меню в шаблоны емейл-рассылок?

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

Средний результат для магазинов достигает 10%. Фактически, результаты выглядят так: интернет-магазины, которые продают детские вещи, получают больше кликов по меню. Но магазины косметики не могут похвастаться столь хорошими результатами. Тем не менее у них больше кликов по баннерам — женщины постоянно ищут новые товары и распродажи.

Я решила разделить типы меню в емейлах на три группы:

1. Стандартная панель навигационного меню;
2. Альтернативы стандартному меню;
3. Интерактивные меню.

1. Стандартная панель навигационного меню

Первое и основное преимущество меню этого типа: оно абсолютно веб-безопасно и в большинстве случаев полностью адаптивно.

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

Для чего предназначено меню? Чтобы получатель имел возможность быстро и удобно добраться до нужной целевой страницы вашего сайта.

Наш редактор предлагает три вида меню:

Ссылки, иконки и ссылки с иконками.

Чтобы добавить меню в емейл при помощи нашего редактора, сначала перетащите базовый блок “Меню”. Затем выберите тип меню, который вы хотите использовать для своей емейл-маркетинговой кампании.

a) меню со ссылками

Естественно, вы должны присвоить этим ссылкам имена. Затем убедитесь, что ссылки направят клиентов на нужные вам страницы.

Как это работает:

Выберите тип меню “Ссылки”. Затем выставьте общие настройки:

выберите из 20 шрифтов тот, который вам нравится, и установите размер и цвет шрифта (опция выбора цвета называется “цвет ссылок”)

Таким образом вы задаете желаемый цвет шрифта, его размер и шрифт для всего меню. Но можно также настроить разные шрифты и даже цвета фона для отдельных пунктов меню.

Я выберу прозрачный цвет фона для полосы.

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

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

Но я протестировала множество шаблонов, чтобы определить и максимальное, и оптимальное количество пунктов меню для емейлов, и вот что я выяснила: вы можете вставлять до 11 пунктов меню в строке. В этом случае размер шрифта должен быть 16 или меньше, а названия пунктов — не длиннее 5 символов.

Но чтобы дизайн емейла был адаптивным, а меню — хорошо заметным и работающим, придерживайтесь Правила Трех. Согласно этому правилу четыре — всегда много, а два — мало.

И когда все будет сделано — можно, наконец, добавлять ссылки.

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

Примечание: вы не можете проверить ссылки непосредственно в редакторе. Поэтому отправьте тестовое письмо либо на свой аккаунт электронной почты, либо на Mail-tester. Этот инструмент подскажет вам, какие ссылки битые, а какие работают правильно. Тем не менее шаблоны емейлов, отправленные на ваш адрес, позволяют проверить каждую ссылку по отдельности и увидеть, куда она на самом деле ведет.

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

Если все сделано правильно, вот что вы увидите:

• на рабочем столе;

• на экране мобильного;

В этом емейле нет горизонтального скролла!

б) меню с иконками

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

Как это работает:

После того как вы вставили основной блок “Меню” в шаблон электронного письма, вам следует выбрать тип меню “Иконки”.

Сначала задайте размер для изображений.

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

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

Затем загрузите изображения или иконки, которые соответствуют пунктам меню. Я решила придерживаться одного шаблона емейла и просто заменила названия пунктов изображениями.

Добавьте ссылки на целевые страницы.

В этой гифке я наглядно показала, как загружать изображения из библиотеки. Напомню, что вы можете использовать наш банк, в котором более 10 000 стоковых картинок.

Таким образом я загрузила остальные два изображения и добавила ссылки. И вот что у меня получилось:

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

в) меню с иконками и ссылками

Вы не уверены, что ваши изображения хорошо заметны, а их смысл очевиден, но всё равно хотите использовать их в рассылках? Значит, этот тип меню — то, что надо.

Как это работает:

Выберите тип меню “Иконки и ссылки”. Добавьте его в хедер емейла. Загрузите изображения, добавьте имя для каждого пункта меню, задайте размер и проверьте сообщение в режиме предпросмотра для мобильных устройств.

Теперь мое меню емейла выглядит вот так:

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

2. Альтернативы стандартному меню

В качестве альтернативы стандартному меню вы можете использовать “Структуры”, как это делает большинство пользователей в других редакторах сообщений и при помощи емейл-провайдеров. Выберите одну из структур с нужным количеством контейнеров. Затем заполните их изображениями, иконками, текстом и ссылками. Но на мобильных устройствах такое меню будет выглядеть как обычные контейнеры с фрагментами продуктов — изображения уйдут друг под друга. Следовательно, потребуется столько строк, сколько у вас пунктов меню.

Я не стану настойчиво отговаривать вас от использования подобного альтернативного меню. Но хочу сказать: “Будьте готовы к инверсии контейнеров”.

Трюк, который можно провернуть в Stripo

Инверсия контейнеров может стать очень полезной. Хотите разместить свой логотип под панелью меню для мобильных устройств?

Знаете ли вы, что Stripo позволяет выбирать местоположение и порядок контейнеров при инвертировании для мобильного экрана?

Примечание: обратите внимание, что эта функция работает только для структур с двумя контейнерами.

Как это работает:

Выберите структуру с двумя контейнерами и поместите ее в хедер, футер или другое место, где вы хотите видеть меню. Затем загрузите логотип компании в первый контейнер. Во второй контейнер вставьте блок меню. При необходимости добавьте названия, задайте цвета шрифтов и даже фона, вставьте ссылки. И нажмите кнопку “Инверсия контейнеров”.

3. Интерактивные меню

Когда мы слышим “интерактивное меню”, что первое приходит в голову? Возможно, гамбургер-меню и меню-гармошка. Что у них общего? Они являются разновидностями гибридного выпадающего меню для емейлов. Почему многие компании любят их использовать, а те, кто еще не применяет их, по крайней мере подумывают об этом?

Дело в том, что интерактивные меню экономят много места в емейлах. Представьте, что трех пунктов недостаточно. Вам нужно 7 или даже 9… Вместо того, чтобы вставлять панель навигационного меню, содержащую семь пунктов, вы добавляете в сообщение гамбургер-меню, которое занимает менее одного дюйма драгоценного пространства.

Единственный минус использования гамбургер-меню в емейлах: только два емейл-клиента поддерживают их интерактивность.

Как добавить:

Прежде всего вам нужен код гамбургер-меню. Купите один из доступных кодов на EmailMonks; можно также поискать на другом сайте. Если вы выберете первый вариант, встраиваемый код уже будет иметь нужные вам ссылки, а также желаемые шрифты и цвета.

Затем в нашем редакторе помещаем блок HTML в ваш шаблон. И вставляем код. Готово!

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

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

Stripo предлагает альтернативу выпадающему меню

Наш дизайнер написал код меню-гармошки для одного из наших шаблонов интерактивного емейла — и этот код, к слову, очень легкий. Меню-гармошки предназначены для мобильных устройств.

Нажав на “плюс”, вы увидите выпадающее описание, кнопки CTA и цены.

Для десктопных устройств не будет необходимости нажимать кнопки:

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

Но не стесняйтесь использовать этот шаблон емейла как основу для ваших будущих емейл-маркетинговых кампаний.

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

Примечание: как видим на гифке, есть два способа редактирования меню — редактировать либо визуальные элементы, либо HTML-код. Выбирайте тот вариант, который вам больше нравится.

Лучшие примеры меню емейлов

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

Adidas

В меню всегда есть “Поиск магазинов”. Хорошее решение для компании, которая продает обувь. Люди предпочитают примерить обувь, прежде чем купить.

Отели Hilton

Кто сказал, что меню обязательно должно быть в хедере? Верно, никто. Именно поэтому отели Hilton иногда помещают меню прямо над футером. На самом деле наилучшее решение для триггерных емейлов по определенному поводу — переместить меню вниз или вообще убрать его, чтобы не отвлекать клиентов.

В данном примере отели Hilton не удалили меню. Они просто изменили его в соответствии с конкретными целями. И заменили меню промо-емейла на такое:

Tesla

Не только Илон Маск является инноватором, но его маркетологи — они размещают меню где-то посередине. Выглядит отлично. Потому что с первого же скрина они показывают, как уютно, удобно и прикольно припарковать свою Теслу возле дома. У вас возникают эмоции, вы хотите себе такую машину. А затем они предлагают выбрать себе модель из предлагаемого ассортимента: Модель S, Модель 3 и т.д.

Представляя эти же модели на своем сайте, Tesla сделали отдельные кнопки и посадочные страницы для каждой машины.

Jewelry

Да, это вымышленный пример. Но я решила его сюда добавить поскольку многие наши пользователей спрашивают, как разместить меню в баннере. Но баннер может иметь только одну ссылку, тогда как типичное меню требует минимум трех. Вот почему мы предлагаем следующее решение: разрежьте изображение вашего баннера на две части с соотношением примерно 20/80%. Первую (меньшую) часть сделайте фоновым изображением для меню навигации.

Вторая (большая) часть будет выполнять функции баннера.

И в результате у вас получится:

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

При использовании этого метода ваши емейлы будут выглядеть бесшовными.

В завершение…

Как мы говорили еще в начале статьи, меню могут повысить рейтинг переходов по ссылкам на 15%. Этот факт еще раз доказывает, что навигационное меню — неотъемлемый элемент любого емейла. Используя один из вариантов меню в своих емейл-шаблонах, вы действительно окажете услугу многим пользователям, предоставляя им более короткий маршрут к нужным целевым страницам вашего сайта.

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

С любыми вопросами или проблемами – пожалуйста, обращайтесь к нам в Facebook.