Як додати блок «Меню» в конструкторі UniSender

Додати блок «Меню»

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

Ось такий це має вигляд у листі:

Меню у десктопній версії

Меню у десктопній версії

Меню у мобільній версії

Меню у мобільній версії

Ми покажемо, як створити дві версії меню:

  • Горизонтальне меню для ПК (десктопна версія).
  • Вертикальне меню для телефону (мобільна версія).

Одержувач бачитиме лише один варіант, залежно від пристрою, на якому він відкрив лист.

Версія для ПК

Переходимо на вкладку «Рядки» та перетягуємо рядок у лист.

Переходимо на вкладку «Рядки»

Тепер переходимо на вкладку «Вміст» і перетягуємо звідти в рядок блок «Меню».

переходимо на вкладку «Вміст»

Щоби створити пункт меню, виділяємо додане меню в листі і на панелі ліворуч натискаємо «Додати новий елемент».

Додати новий елемент

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

вибираємо «Нова вкладка»

Таким самим чином додаємо ще три пункти меню.

додаємо ще три пункти меню

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

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

«Властивості блоку»

Додаємо відступи праворуч і ліворуч від кожного пункту меню, а внизу приховуємо блок у мобільній версії.

Додаємо відступи

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

Додаємо в лист іще один рядок і блок «Меню» всередині нього. Тепер у редакторі два блоки з меню, але це нормально. Кожен блок відображається тільки на своєму пристрої, одночасно відображатися вони не будуть.

Додаємо в лист іще один рядок

Виділяємо доданий блок. На панелі ліворуч за допомогою кнопки «Додати новий елемент» додаємо ті самі пункти, що й у версії меню для ПК.

Виділяємо доданий блок

Далі прописуємо властивості.

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

у полі «Орієнтація» вибираємо «Вертикальна»

Далі вмикаємо «меню, що згортається» (його ще називають «Гамбургер»). Це іконка, яка буде з'являтися замість меню. Від натискання на іконку меню буде розкриватися та згортатися. Зазначаємо властивості:

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

меню, що згортається

Приховуємо меню на ПК.

Приховуємо меню на ПК

Відображення меню на різних пристроях

Попередній перегляд у редакторі

У лівому верхньому куті вибираємо «Дії» → «Попередній перегляд».

Попередній перегляд

Такий вигляд лист має у версії для ПК.

Такий вигляд лист має у версії для ПК

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

у версії для мобільних

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

Важливо!

Іконка для згортання меню може відображатися не на всіх мобільних телефонах. Це залежить від моделі телефону, операційної системи, додатка, в якому ви переглядаєте лист. Найкраще цей функціонал підтримують пристрої Apple (iPhone, iPad).
Перед відправкою масової розсилки рекомендуємо перевірити лист на різних пристроях.

Такий вигляд має лист у стандартному додатку «Пошта» на iOS.

Іконка «гамбургер-меню» працює

Іконка «гамбургер-меню» працює

А ось так — у додатку «Gmail» на Android.

Пункти меню

Тут немає іконки «гамбургер-меню». Пункти меню просто відображаються у стовпчику

Корисні посилання:

Основні можливості конструктора
Як налаштувати шрифти та кольори в листі
Як зібрати макет за допомогою рядків
Як додати та відредагувати текст
Як вставити картинку
Як додати посилання на соцмережі
Як вставити відео
Як вставити GIF
Як додати прехедер
Як подивитися лист перед надсиланням

Ви знайшли відповідь на ваше питання?

0
0