Навігаційне меню Elementor – створіть дивовижне меню для свого сайту WordPress

Ви шукаєте спосіб створити дивовижне меню, яке допоможе покращити UI/UX вашого сайту? Якщо так, то ви в потрібному місці. Тут ми зібрали докладний посібник, щоб допомогти вам.

Спочатку ми покажемо вам крок за кроком, як створити меню для вашого веб-сайту WordPress. І як тільки ви це зрозумієте, ми допоможемо вам, як використовувати віджет Elementor Navigation Menu, щоб налаштувати та розширити ваше меню WordPress.

Зміст:

• Навіщо вам власне навігаційне меню?
• Створіть базове меню WordPress за допомогою Elementor
• 1. Створіть просте меню для свого сайту WordPress
• 2. Виберіть і налаштуйте пункти навігаційного меню
• 3. Створіть підменю – пункти батьківського та дочірнього меню (необов’язково)
• 4. Керуйте розташуванням меню та публікуйте його
• Як створити навігаційне меню за допомогою віджета Elementor pro nav
• Основні функції віджета Elementor Nav Menu
• Створіть меню за допомогою віджета nav-menu pro
• Адаптивне мобільне меню
• Підведенню

Навіщо вам власне навігаційне меню?

Важливо знати, що навігаційні меню важливі не лише для залучення трафіку на ваш сайт, але й для кращого рейтингу SEO.

Дійсно, навігаційні меню в першу чергу призначені для взаємодії з користувачем, але це не єдина мета.

Другим найважливішим фактором є пам’ятати про роль «веб-сканера» або ботів, які призначені для сканування веб-сайтів та індексації вмісту до відповідного рівня та звітування пошуковій системі для ранжування вмісту в потрібному місці.

Тому, якщо ви створюєте надто складні меню, роботам буде важко ранжувати ваш вміст, але ви також втратите відвідувачів.

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

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

Завдяки віджету Elementor pro зі 100% адаптивним навігаційним меню ви можете створити ідеальну та неймовірно гнучку панель меню без використання коду.

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

Перш ніж розпочати роботу з віджетом Elementor Navigation, давайте дізнаємося, як ми можемо створити просте меню WordPress за допомогою безкоштовної версії Elementor.

Створіть базове меню WordPress за допомогою Elementor

Тепер, щоб створити меню WordPress, вам не потрібно встановлювати спеціальні plugin . За замовчуванням WordPress поставляється з простим у використанні конструктором меню, який допоможе вам створити прості меню навігації для вашого веб-сайту.

З огляду на це, ви не матимете доступу до жодних параметрів налаштування меню. Він візьме на себе дизайн поточної активної теми WordPress. Але якщо це все, що ви хочете, то це чудовий спосіб налаштувати навігаційне меню для вашого сайту WordPress.

1. Створіть просте меню для свого сайту WordPress

Перш за все, вам потрібно буде увійти на свою інформаційну панель WordPress.

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

У розділі «Структура меню» ви знайдете поле «Назва меню». Це буде назва для меню, яке ми будемо створювати прямо зараз. Назвемо це Меню 1.

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

Давши назву своєму меню, натисніть кнопку «Створити меню», щоб зробити його доступним. Тепер вам потрібно додати різні пункти меню.

2. Виберіть і налаштуйте пункти навігаційного меню

Тепер настає частина, де ви заповнюєте нове меню пунктами меню. У розділі «Додати пункти меню» ліворуч ви знайдете впорядкований список речей, які можна додати до свого меню.

За замовчуванням тут містяться будь-які ваші сторінки, публікації, цільові сторінки, спеціальні посилання та категорії.

просто виберіть пункти меню, які ви хочете додати, використовуючи прапорці, а потім натисніть кнопку «Додати до меню». Це заповнить ваше меню всіма вибраними пунктами меню.

Примітка : Зверніть увагу: у кожному розділі в розділі «Додати пункти меню» є можливість перемикатися між – Найновіші , Переглянути всі та Пошук . Не забувайте використовувати ці параметри, якщо предметів багато.

Завершивши додавання всіх пунктів меню, натисніть кнопку «Зберегти меню» та перейдіть до наступного кроку.

3. Створіть підменю – пункти батьківського та дочірнього меню (необов’язково)

Чи знаєте ви, що за замовчуванням WordPress також дозволяє створювати підменю? Під час створення структури підменю у вас є пункт батьківського меню та дочірній пункт меню.

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

Круто правда?

Тепер, щоб створити структуру підменю, все, що вам потрібно зробити, це вибрати пункт меню, який ви хочете розмістити в головному меню. Далі перетягніть під нього всі пункти меню, які ви хочете зробити дочірніми. Тепер просто перетягніть його вправо, і готово!

4. Керуйте розташуванням меню та публікуйте його

Тепер, коли ви створили нове меню та додали підменю, настав час керувати його розташуванням.

У верхній частині редактора меню ви повинні помітити опцію «Керувати розташуваннями». Натисніть на нього, і має з’явитися щось схоже на наступний екран:

Тепер доступні місця меню залежатимуть від теми, яку ви встановили. У цьому amp у нас є тема, яка підтримує 3 меню.

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

Тепер ви знаєте всі основні функції меню, які WordPress пропонує за замовчуванням. Однак, якщо вам потрібні додаткові налаштування та функціональність, читайте далі, щоб дізнатися про віджет навігаційного меню Elementor Pro.

Як створити навігаційне меню за допомогою віджета Elementor pro nav

Якщо ви хочете додати спеціальне навігаційне меню на свій сайт WordPress, вам знадобиться версія Elementor Pro. Версія Elementor Pro постачається з віджетом навігації Elementor разом із багатьма іншими спеціальними функціями, такими як 300+ шаблонів, конструктор тем, віджет для спливаючих вікон, віджети WooCommerce та багато інших цікавих функцій.

Які особливі ключові функції самого віджета Nav Menu? Ось короткий вступ.

Основні функції віджета Elementor Nav Menu

• Віджет Nav-menu дає вам свободу розміщувати меню будь-де. У заголовку, угорі чи будь-де на сторінці.
• Ви можете додати кілька меню на свій сайт, а також на свої сторінки окремо чи глобально.
• Надайте сліпучому вигляду своєму меню за допомогою анімації, ефектів наведення або активного стану
• Створіть мобільне адаптивне меню свого сайту та контролюйте, як ваш сайт виглядатиме на екранах мобільних пристроїв
• Налаштуйте колір, типографіку та відступ або інші налаштування рядка меню
• Створіть піксельне меню з правильною точністю вирівнювання, інтервалів і відступів.

Створіть меню за допомогою віджета nav-menu pro

Вам потрібно буде створити базове меню WordPress, як ми вже згадували вище, а потім ви налаштуєте стандартне меню WordPress за допомогою віджета pro-nav-menu. Після того, як ви створили основний список, наступним кроком буде додавання його до бажаного місця, тобто до розділу заголовка.

Тепер, коли ви закінчили з основними налаштуваннями, давайте налаштуємо меню за допомогою віджета навігаційного меню.

У самому верхньому куті розділу налаштувань доступні три параметри; Вміст, стиль і розширені можливості.

Розділ «Макет» : у вас є три варіанти: горизонтальний, вертикальний або прихований розкривний список.

• Горизонтальний: горизонтальний макет є найпоширенішим макетом, який використовується на сайтах. Він поширюється по екрану зліва направо.
• Вертикальний: Ви також знайдете вертикальний макет на багатьох сайтах, зокрема на сайтах, які пропонують творчі послуги. У разі вертикального розташування панель навігації буде розташовуватися зверху вниз.
• Випадаюче меню: випадаючі меню також досить поширені. Випадаючі меню мають вертикальне розташування, і для їх розкриття потрібна взаємодія з користувачем. Здебільшого вони використовуються для створення чистого дизайну.

Розділ вирівнювання : цей розділ допоможе вам вирівняти текстові елементи меню; по центру, праворуч або ліворуч.

Розділ анімації : у цьому розділі ви зможете додавати анімаційні ефекти під ефектами анімації, над або подвійною лінією. Ви також можете використати рамку, фон і тонку текстову анімацію.

Підкреслені анімації такі:

• Зникнення: анімація зникнення пропонує згасання анімації під елементами меню.
• Слайд: анімація слайда зсуває панель під пунктами меню.
• Зростання : анімація зростання зростає від середини до зовнішнього боку та створює відчуття зростання.
• Анімація спаду : анімація рухається знизу вгору.
• Випадання: анімація випадання йде зверху вниз.

Подібним чином існують анімація в рамці, накладання, подвійна лінія, фон і текстова анімація. Кожен із них пропонує власний набір анімацій, і ви можете перевірити їх самостійно, щоб дізнатися, що ви отримуєте з ними.

Розділ вказівника : виберіть тип вказівника зі спадного меню.

Розділ індикатора підменю : віджет Elementor містить багато параметрів стилю підменю. Де можна керувати не тільки кольором, стилем, а також фоном меню.

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

Elementor надзвичайно добре підходить до інтервалів і відступів у меню. Вони наполегливо працювали за дверима, щоб переконатися, що вони можуть надати інструменти розробнику, щоб вони могли легко створити дизайн, про який вони думають.

Розташування меню пропонує багато варіантів, зокрема:

• Відстань між пунктами меню
• Горизонтальні та вертикальні відступи для елементів меню та підменю
• Вирівнювання по центру, ліворуч, праворуч і за шириною.

Колір фону та типографіки : ви можете отримати індивідуальний фірмовий вигляд за допомогою бажаної колірної схеми та кольору фону. Крім того, ви можете вибрати параметри прозорого або напівпрозорого меню.

Як дизайнер, ви можете грати з цими параметрами якомога більше та гарантувати, що ви розробляєте фони відповідно до своїх уподобань.

Адаптивне мобільне меню

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

Віджет Elementor дозволяє повністю контролювати параметри мобільного меню на WordPress. Ви можете керувати переглядом екрана мобільного пристрою за допомогою окремого набору налаштувань для екранів лише мобільних пристроїв. У нижній частині розділу налаштувань Elementor є опція налаштувань мобільного екрана, де ви можете переглянути параметри мобільного екрана.

Коротко кажучи, функції мобільного меню Elementor такі:

• Повна ширина на мобільному пристрої: Ви також можете встановити повну або обмежену ширину.
• Точки зупинки для планшета або мобільного пристрою: ви можете використовувати налаштування точки зупинки, щоб налаштувати мобільне меню для мобільного пристрою чи планшета.
• Вертикальне меню та меню-акордеон: Elementor також пропонує можливість відображення піктограми гамбургера, що складається.
• Перемкнути вирівнювання: піктограму гамбургера можна вирівняти по центру, ліворуч або праворуч.
• Вирівнювання вбік/по центру: виберіть вирівнювання мобільного меню.

Адаптивна навігація: забезпечує адаптивне розташування меню.

Підведенню

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

Таким чином, віджет меню має бути здатним надавати ваш унікальний вигляд бренду з усіма основними функціями. Віджет Elementor Navigation має багатофункціональні можливості, які дозволяють клієнтам налаштувати розділ меню відповідно до голосу вашого бренду. Тепер ви можете використовувати індивідуальне стильне меню на своєму веб-сайті, на цільовій сторінці, у заголовку чи будь-якому іншому розділі, де ви хочете його відображати.