Меню навігації Elementor - Створіть дивовижне меню для свого веб -сайту WordPress

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

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

Зміст:

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

Навіщо потрібне спеціальне меню навігації?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Круто так?

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

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

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

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

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

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

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

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

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

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

Elementor Nav-Menu Віджет Основні характеристики

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

Створіть меню з віджетом навігаційного меню

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

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

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

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

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

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

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

Анімація підкреслення така:

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

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

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

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

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

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

Інтервал меню пропонує безліч варіантів, включаючи:

• Пробіл між пунктами меню
• Горизонтальне та вертикальне заповнення елементів меню та підменю
• Центр, ліворуч, праворуч і вирівняне вирівнювання.

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

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

Мобільне чуйне меню

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

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

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

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

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

Підведенню

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

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