Головна › Плагіни редактора макета ›

Плагін «Меню»

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

Щоб розпочати роботу з плагіном «Меню» перейдіть до редактора макета й натисніть на кнопку «ДОДАТИ БЛОК».

Після цього з'явиться бокова панель, в якій потрібно натиснути на плагін «Меню» та перенести його в певне місце на сторінці сайту інтернет-магазину.

Після цього з'явиться бокова панель налаштування плагіна «Меню». Розглянемо детальніше кожну вкладку бокової панелі налаштувань плагіна «Меню».

Вкладка «Основні» дозволяє вибрати які сторінки будуть відображатися в плагіні «Меню». Можна вибрати відображення лише основних сторінок сайту інтернет-магазину 1 або відображати вибрані сторінки сайту інтернет-магазину 2. За потреби можна відображати головну сторінку в плагіні «Меню» за допомогою відповідного перемикача 3. Якщо видалити певну сторінку за допомогою кнопки «Видалити» 4 буде обрано режим відображення вибраних сторінок сайту інтернет-магазину.

Також видаливши певну сторінку при відображенні лише вибраних сторінок в плагіні «Меню» з'явиться кнопка «Змінити». Якщо натиснути на цю кнопку, з'явиться спливаюче вікно, в якому можна вибрати які саме сторінки повинні відображатися в плагіні «Меню».

Вкладка «Вигляд» дозволяє вибрати один з дизайнів відображення меню 1, якщо обрано дизайни відображення меню «Плитки» або «Слайдер» можна вибрати один з готових дизайнів прев'ю меню 2. Для кожного дизайну відображення меню можна змінити налаштування елементів прев'ю меню 3, у випадку обраного дизайну відображення меню «Слайдер» можна змінювати налаштування елементів керування слайдером прев'ю меню 4.

Розглянемо детальніше налаштування елементів блоку меню в разі обраного дизайну відображення меню «Горизонтальне меню» та «Вертикальне меню».

Елемент прев'ю меню «НАЗВА» має наступні налаштування.

«Колір тексту» 1 – ці налаштування дозволяють встановити колір тексту та колір тексту при наведенні на пункт меню;
«Розмір тексту» 2 – це налаштування дозволяє встановити розмір в пікселях тексту пункту меню;
«Міжрядковий інтервал(%)» 3 – це налаштування дозволяє встановити міжрядковий інтервал для пунктів меню;
«Стиль тексту» 4 – ці налаштування дозволяють встановити стиль пункту меню а саме: жирний, курсивний, підкреслений, ВЕЛИКИМИ ЛІТЕРАМИ;
«Відступи зверху/знизу» 5 – це налаштування дозволяє встановити відступ в пікселях зверху та знизу від пункту меню;
«Відступи праворуч/ліворуч» 6 – це налаштування довзоляє встановити відступ в пікселях праворуч та ліворуч від пункту меню.

Елемент прев'ю меню «ДОДАТКОВО» має наступні налаштування.

«Вирівнювання» 1 – ці налаштування дозволяють встановити вирівнювання блоку меню за певним критерієм;
«Показати граничну кількість елементів» 2 – це налаштування дозволяє встановити граничне значення відображуваних пунктів меню в блоці меню;
«Сортування» 3 – це налаштування дозволяє сортувати пункти меню в блоці меню за певним критерієм;
«Напрямок сортування» 4 – це налаштування дозволяє вказати напрямок сортування пунктів меню в блоці меню.

За потреби можна відображати підсторінки при наведенні на пункт меню. Для цього потрібно увімкнути перемикач «Відображати підменю».

Слід зазначити, що цей перемикач з'являється лише в разі обраного дизайну відображення меню «Горизонтальне меню».

Розглянемо детальніше налаштування елементів прев'ю меню в разі обраних дизайнів відображення меню «Плитки», «Слайдер».

Елемент прев'ю меню «ЗОБРАЖЕННЯ» дозволяє виставити потрібну пропорцію зображення пункту меню на прев'ю меню по ширині:висоті.

Елемент прев'ю меню «НАЗВА» має наступні налаштування.

«Колір тексту» 1 – ці налаштування дозволяють змінити колір тексту та колір тексту при наведенні на пункт меню в прев'ю меню;
«Розмір тексту» 2 – це налаштування дозволяє встановити розмір тексту в пікселях пункту меню в прев'ю меню;
«Міжрядковий інтервал(%)» 3 – це налаштування дозволяє встановити міжрядковий інтервал у відсотках між пунктами меню та іншими елементами прев'ю меню;
«Стиль тексту» 4 – ці налаштування дозволяють встановити стиль назви пункту меню, а саме: жирний, курсивний, підкреслений, ВЕЛИКИМИ ЛІТЕРАМИ;
«Відступи зверху/знизу» 5 – цe налаштування дозволяють встановити відступ в пікселях зверху та знизу від пункту меню;
«Відступи праворуч/ліворуч» 6 – цe налаштування дозволяють встановити відступ в пікселях праворуч та ліворуч від пункту меню;
«Вирівнювання» 7 – ці налаштування дозволяють встановити вирівнювання пункту меню відносно прев'ю меню, з'являється опціонально, в залежності від обраного дизайну прев'ю меню;
«Обмежити довжину назви» 8 – цей чекбокс дозволяє обмежувати довжину пункту меню.

Елемент прев'ю меню «КНОПКА» з'являється лише в разі вибору відповідного дизайну прев'ю меню та має наступні налаштування.

«Вигляд кнопки» 1 – ці налаштування дозволяють вибрати один з наявних виглядів кнопки «Детальніше»;
«Колір кнопки» 2 – ці налаштування дозволяють вибрати колір тексту та за наявності колір фону кнопки «Детальніше»;
«Колір при наведенні» 3 – ці налаштування дозволяють вибрати колір тексту та за наявності колір фону при наведенні на кнопку «Детальніше»;
«Розмір тексту (рх)» 4 – це налаштування дозволяє вибрати розмір тексту в пікселях кнопки «Детальніше»;
«Заокруглення країв» 5 – ці налаштування дозволяють вибрати вигляд країв кнопки «Детальніше»;
«Стиль тексту» 6 – ці налаштування дозволяють встановити стиль тексту кнопки «Детальніше», а саме: жирний, курсивний, підкреслений, ВЕЛИКИМИ ЛІТЕРАМИ;
«Висота кнопки (рх)» 7 – це налаштування дозволяє встановити в пікселях висоту кнопки «Детальніше»;
«Ширина кнопки (рх)» 8 – це налаштування дозволяє встановити в пікселях ширину кнопки «Детальніше»;
«Відступ зверху» 9 – це налаштування дозволяє встановити відступ зверху в пікселях від кнопки «Детальніше» до інших елементів прев'ю меню;
«Відступ знизу» 10 – це налаштування дозволяє встановити відступ знизу в пікселях від кнопки «Детальніше» до інших елементів прев'ю меню;
«Приховувати на мобільних пристроях» 11 – цей перемикач дозволяє приховати відображення кнопки «Детальніше» у випадку мобільних версій сайту інтернет-магазину (екрани, що менше ніж 740 пікселів).

Елемент прев'ю меню «ДОДАТКОВО» має наступні налаштування в разі обраного дизайну відображення меню «Плитки».

«КОЛІР ФІЛЬТРА ДЛЯ ЗОБРАЖЕННЯ» 1 – ці налаштування дозволяють встановити колір прев'ю та колір прев'ю меню при наведенні. В залежності від обраного дизайну прев'ю меню ці налаштування може мати назву «ФОН ПРЕВ'Ю МЕНЮ» або «КОЛІР АКЦЕНТНИХ ЕЛЕМЕНТІВ» та мати аналогічні налаштування або це налаштування може бути відсутнім;
«Заокруглення країв (рх)» 2 – це налаштування дозволяє округлити в пікселях краї зображення прев'ю меню;
«Показати граничну кількість елементів» 3 – це налаштування дозволяє встановити граничне значення відображуваних прев'ю меню;
«Відстань між елементами (рх)» 4 – це налаштування дозволяє встановити бокову відстань в пікселях між прев'ю меню;
«КІЛЬКІСТЬ ПУБЛІКАЦІЙ У РЯД» 5 – це налаштування дозволяє встановити граничне значення відображуваних прев'ю меню для настільної, ноутбучної, планшетної, мобільних (вертикальної та горизонтальної, екрани, що менше ніж 740 пікселів) версій сайту інтернет-магазину;
«Сортувати» 6 – це налаштування дозволяє встановити сортування прев'ю меню за певним критерієм;
«Напрямок сортування» 7 – це налаштування дозволяє вибрати напрямок сортування прев'ю меню.

Елемент прев'ю меню «ДОДАТКОВО» має наступні налаштування в разі обраного дизайну відображення меню «Слайдер».

«КОЛІР ФІЛЬТРА ДЛЯ ЗОБРАЖЕННЯ» 1 – ці налаштування дозволяють встановити колір прев'ю та колір прев'ю меню при наведенні. В залежності від обраного дизайну прев'ю меню це налаштування може мати назву «КОЛІР АКЦЕНТНИХ ЕЛЕМЕНТІВ» або «ФОН ПРЕВ'Ю МЕНЮ» та мати аналогічні налаштування або це налаштування може бути відсутнім;
«Заокруглення країв (рх)» 2 – це налаштування дозволяє округлити в пікселях краї зображення прев'ю меню;
«Показати граничну кількість елементів» 3 – це налаштування дозволяє встановити граничне значення відображуваних прев'ю меню;
«Відстань між елементами (рх)» 4 – це налаштування дозволяє встановити бокову відстань в пікселях між прев'ю меню;
«Нескінченна прокрутка» 5 – цей перемикач дозволяє встановити нескінченну прокрутку прев'ю меню, тобто останнє прев'ю меню слайда можна прокрутити праворуч та після цього буде відображатися перше прев'ю меню слайда. У випадку вимкненого перемикача «Нескінченна прокрутка» прокрутити останнє прев'ю меню слайдера праворуч буде неможливо, потрібно буде повернутися ліворуч до першого прев'ю меню;
«Швидкість прокручування слайдера (мс)» 6 – це налаштування дозволяє встановити швидкість прокручування слайдера прев'ю меню у мілісекундах;
«КІЛЬКІСТЬ ПУБЛІКАЦІЙ У РЯД» 7 – це налаштування дозволяє встановити граничне значення відображуваних прев'ю меню для настільної, ноутбучної, планшетної, мобільних (вертикальної та горизонтальної, екрани, що менше ніж 740 пікселів) версій сайту інтернет-магазину;
«Сортувати» 8 – це налаштування дозволяє встановити сортування прев'ю меню за певним критерієм;
«Напрямок сортування» 9 – це налаштування дозволяє вибрати напрямок сортування прев'ю меню.

Елемент прев'ю публікації «КРАПКИ» з'являється лише у випадку обраного дизайну відображення прев'ю меню «Слайдер» та має наступні налаштування.

«Відображати точки» 1 – цей перемикач дозволяє відображати елемент керування слайдером прев'ю меню «Точки»;
«Колір» 2 – це налаштування дозволяє вибрати колір елемента керування слайдером прев'ю меню «Точки»;
«Форма» 3 – ці налаштування дозволяють вибрати форму елемента керування слайдером прев'ю меню «Точки»;
«Вирівнювання» 4 – ці налаштування дозволяють вибрати вирівнювання елемента керування слайдером прев'ю меню «Точки»;
«Приховувати на мобільних пристроях» 5 – цей перемикач дозволяє приховати відображення елемента керування слайдером прев'ю меню «Точки» у випадку мобільних версій (екрани, що менше ніж 740 пікселів) сайту інтернет-магазину.

Елемент прев'ю публікації «СТРІЛКИ» з'являється лише у випадку обраного дизайну відображення прев'ю меню «Слайдер» та має наступні налаштування.

«Відображати стрілки» 1 – цей перемикач дозволяє відображати елемент керування слайдером прев'ю меню «Стрілки»;
«Іконка» 2 – ці налаштування дозволяють вибрати вигляд елемента керування слайдером прев'ю меню «Стрілки»;
«Стиль» 3 – ці налаштування дозволяють вибрати стиль елемента керування слайдером прев'ю меню «Стрілки»;
«Форма» 4 – ці налаштування дозволяють вибрати форму елемента керування слайдером прев'ю меню «Стрілки»;
«Розмір стрілок» 5 – це налаштування дозволяє вибрати розмір в пікселях елемента керування слайдером прев'ю меню «Стрілки»;
«Колір кнопки» 6 – це налаштування дозволяє вибрати колір елемента керування слайдером прев'ю меню «Стрілки»;
«Колір при наведенні» 7 – це налаштування дозволяє вибрати колір елемента керування слайдером прев'ю меню «Стрілки» при наведенні на нього;
«Положення» 8 – ці налаштування дозволяють вибрати положення елемента керування слайдером прев'ю меню «Стрілки»;
«Приховувати на мобільних пристроях» 9 – цей перемикач дозволяє приховати відображення елемента керування слайдером прев'ю меню «Стрілки» у випадку мобільних версій (екрани, що менше ніж 740 пікселів) сайту інтернет-магазину.

Вкладка «Написи» недоступна лише у випадку дизайну відображення меню «Горизонтальне меню». На цій вкладці можна налаштувати заголовок 1 та короткий опис 2 блока плагіна «Меню».

Вкладка «Мобільне меню» містить налаштування відображення плагіна «Меню» у вигляді мобільного меню та недоступна лише у випадку дизайну відображення меню «Слайдер».

Розглянемо детальніше налаштування вкладки «Мобільне меню».

«Відображати в якості мобільного меню» 1 – цей перемикач дозволяє увімкнути відображення плагіна «Меню» у вигляді мобільного меню;
«Назва розділу в мобільному меню» 2 – це налаштування дозволяє встановити назву блоку плагіна «Меню» в мобільному меню;
«Відображати з пристрою» 3 – це налаштування дозволяє додавати пункти меню до наявного мобільного меню сайту інтернет-магазину з певного обраного розміру екрана якщо налаштування «Відображати в якості мобільного меню» вимкнене;
«Відображення підкатегорій у мобільному меню» 4 – це налаштування дозволяє вибрати вигляд відображення підкатегорій пункту меню у мобільному меню. Налаштування не з'являється у випадку дизайну відображення меню «Плитки»;
«Позиція в мобільному меню» 5 – це налаштування дозволяє встановити позицію блоку плагіна «Меню» в мобільному меню.

Закінчивши з налаштуваннями плагіна «Меню» натисніть на кнопку «ЗБЕРЕГТИ», далі натисніть на кнопку «ЗБЕРЕГТИ» в редакторі макета, щоб зберегти наявні налаштування.

Налаштований плагін «Меню» з дизайном відображення «Горизонтальне меню» з відображенням підменю має наступний вигляд на сайті інтернет-магазину.