Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Как работать с блоком «Меню»

Вы здесь:

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

Вот так это выглядит в письме:

Меню в десктопной версии

Меню в десктопной версии

Меню в мобильной версии

Меню в мобильной версии

Мы покажем, как создать две версии меню:

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

Версия для ПК

Переходим на вкладку «Строки» и перетаскиваем строку в письмо.

Добавляем строку

Теперь идём на вкладку «Содержимое» и перетаскиваем оттуда в строку блок «Меню».

Добавляем блок Меню

Чтобы создать пункт меню, выделяем добавленное меню в письме и на панели слева нажимаем «Добавить новый элемент».

Добавляем новый пункт меню

Вводим текст пункта меню, URL и заголовок. В поле «Тип ссылки» оставляем «Открыть ссылку», а в выпадающем списке напротив «Цель» выбираем «Новая вкладка».

Новый пункт меню

Таким же образом добавляем ещё три пункта меню.

Добавленные пункты меню

Теперь переходим к настройкам внешнего вида меню. Выделяем блок с меню в письме, на вкладке «Свойства блока» листаем вниз и указываем свойства:

  • Шрифт
  • Размер шрифта.
  • Цвет текста
  • Цвет ссылки. Так как все пункты меню — это ссылки, их цвет мы указываем здесь.
  • Выравнивание. Можно выровнять по левому краю, по правому или по центру.
  • Ориентация. Для десктопной версии выберем «Горизонтальная» — пункты меню в один ряд. 
  • Разделитель. Тут указываем «|». Можно указать другой или оставить поле пустым. Цвет разделителя мы задаём в пункте «Цвет текста».

Настройка внешнего вида меню

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

Свойства меню

Мобильная версия

Добавляем в письмо ещё одну строку и блок «Меню» внутри неё. Теперь в редакторе у нас два блока с меню, но это нормально. Каждый из блоков будет отображаться только на своём устройстве, они не будет отображаться вместе.

Добавляем второй блок Меню

Выделяем добавленный блок. На панели слева с помощью кнопки «Добавить новый элемент» добавляем те же пункты, что и в версии меню для ПК.

Добавляем пункты меню для второго блока

Далее прописываем свойства.

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

Свойства меню

Далее включаем «Сворачивающееся меню» (ещё его называют «Гамбургер»). Это иконка, которая будет появляться вместо меню. По нажатию на иконку меню будет раскрываться и сворачиваться. Указываем свойства:

  • Размер иконки.
  • Тип иконки. «Normal» — иконка в виде квадрата, «rounded» — круглая иконка. 
  • Цвет переднего плана. Здесь задаём цвет горизонтальных линий в иконке и текста в развёрнутом меню.
  • Цвет фона. Здесь — цвет фона иконки и развёрнутого меню.

Настройки сворачивающегося меню

Скрываем меню на ПК.

Скрываем отображение на ПК

Отображение меню на разных устройствах

Предпросмотр в редакторе

В левом верхнем углу выбираем «Действия» → «Предпросмотр».

Предпросмотр

Так письмо выглядит в версии для ПК.

Десктопная версия

Так — в версии для мобильных.

Мобильная версия

Иконка гамбургер-меню

Важно!

Иконка для сворачивания меню может отображаться не на всех мобильных телефонах. Это зависит от модели телефона, операционной системы, приложения, в котором вы просматриваете письмо. Лучше всего этот функционал поддерживают устройства Apple (iPhone, iPad).

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

Так выглядит письмо в стандартном приложении «Почта» на iOS, iPhone XR.

Гамбургер-меню на iPhone

Иконка «гамбургер-меню» работает

А вот так — в приложении «Gmail» на Android, Xiaomi Redmi 5.

Меню в мобильной версии

Здесь нет иконки «гамбургер-меню». Пункты меню просто отображаются в столбце

Полезные ссылки

Видео «Как сделать простое письмо в конструкторе UniSender»
Как попасть в новый конструктор
Как работает
Как настроить шрифты и цвета шаблона
Как собрать макет
Как отредактировать текст
Как вставить картинку
Как вставить кнопку
Как вставить соцсети
Как вставить видео
Как вставить GIF
Как сделать прехедер
Как посмотреть письмо перед отправкой
Как сохранить письмо в виде шаблона
Как создать письмо на основе шаблона

Оцените, на сколько вам показалась полезной статья «Как работать с блоком «Меню»»
(0)