Ви шукаєте спосіб створити дивовижне меню, яке допоможе покращити UI/UX вашого сайту? Якщо так, то ви в потрібному місці. Тут ми зібрали докладний посібник, щоб допомогти вам.
Спочатку ми покажемо вам крок за кроком, як створити меню для вашого веб-сайту WordPress. І як тільки ви це зрозумієте, ми допоможемо вам, як використовувати віджет Elementor Navigation Menu, щоб налаштувати та розширити ваше меню WordPress.
Зміст:
Важливо знати, що навігаційні меню важливі не лише для залучення трафіку на ваш сайт, але й для кращого рейтингу SEO.
Дійсно, навігаційні меню в першу чергу призначені для взаємодії з користувачем, але це не єдина мета.
Другим найважливішим фактором є пам’ятати про роль «веб-сканера» або ботів, які призначені для сканування веб-сайтів та індексації вмісту до відповідного рівня та звітування пошуковій системі для ранжування вмісту в потрібному місці.
Тому, якщо ви створюєте надто складні меню, роботам буде важко ранжувати ваш вміст, але ви також втратите відвідувачів.
Коротше кажучи, «зручність навігації» є основним фактором покращення взаємодії з користувачем, а також відіграє важливу роль у підвищенні рейтингу нашого сайту та збільшенні трафіку.
Це чудова причина для багатьох бізнес-сайтів зберігати одну піктограму навігації замість складної панелі меню, яка завантажує меню на весь екран після натискання.
Завдяки віджету Elementor pro зі 100% адаптивним навігаційним меню ви можете створити ідеальну та неймовірно гнучку панель меню без використання коду.
У цьому підручнику ми покажемо вам, як використовувати віджет навігаційного меню Elementor, щоб отримати персоналізоване розширене меню WordPress.
Перш ніж розпочати роботу з віджетом Elementor Navigation, давайте дізнаємося, як ми можемо створити просте меню WordPress за допомогою безкоштовної версії Elementor.
Тепер, щоб створити меню WordPress, вам не потрібно встановлювати спеціальні plugin . За замовчуванням WordPress поставляється з простим у використанні конструктором меню, який допоможе вам створити прості меню навігації для вашого веб-сайту.
З огляду на це, ви не матимете доступу до жодних параметрів налаштування меню. Він візьме на себе дизайн поточної активної теми WordPress. Але якщо це все, що ви хочете, то це чудовий спосіб налаштувати навігаційне меню для вашого сайту WordPress.
Перш за все, вам потрібно буде увійти на свою інформаційну панель WordPress.
Тепер на лівій бічній панелі перейдіть до Вигляд > Меню . Тут ви знайдете макет у два стовпці з «Додати пункти меню» ліворуч і «Структура меню» праворуч.
У розділі «Структура меню» ви знайдете поле «Назва меню». Це буде назва для меню, яке ми будемо створювати прямо зараз. Назвемо це Меню 1.
Примітка : не хвилюйтеся. Ваші читачі не зможуть побачити назви меню. Це функція, яка допоможе вам упорядкувати всі різні меню.
Давши назву своєму меню, натисніть кнопку «Створити меню», щоб зробити його доступним. Тепер вам потрібно додати різні пункти меню.
Тепер настає частина, де ви заповнюєте нове меню пунктами меню. У розділі «Додати пункти меню» ліворуч ви знайдете впорядкований список речей, які можна додати до свого меню.
За замовчуванням тут містяться будь-які ваші сторінки, публікації, цільові сторінки, спеціальні посилання та категорії.
просто виберіть пункти меню, які ви хочете додати, використовуючи прапорці, а потім натисніть кнопку «Додати до меню». Це заповнить ваше меню всіма вибраними пунктами меню.
Примітка . Зверніть увагу: у кожному розділі в розділі «Додати пункти меню» є можливість перемикатися між найновішими , Переглянути всі та Пошук . Не забувайте використовувати ці параметри, якщо предметів багато.
Завершивши додавання всіх пунктів меню, натисніть кнопку «Зберегти меню» та перейдіть до наступного кроку.
Чи знаєте ви, що за замовчуванням WordPress також дозволяє створювати підменю? Під час створення структури підменю у вас є пункт батьківського меню та дочірній пункт меню.
Коли користувач наводить вказівник на батьківський пункт меню, відображаються всі приховані під ним дочірні пункти меню.
Круто правда?
Тепер, щоб створити структуру підменю, все, що вам потрібно зробити, це вибрати пункт меню, який ви хочете розмістити в головному меню. Далі перетягніть під нього всі пункти меню, які ви хочете зробити дочірніми. Тепер просто перетягніть його вправо, і готово!
Тепер, коли ви створили нове меню та додали підменю, настав час керувати його розташуванням.
У верхній частині редактора меню ви повинні помітити опцію «Керувати розташуваннями». Натисніть на нього, і має з’явитися щось схоже на наступний екран:
Тепер доступні місця меню залежатимуть від теми, яку ви встановили. У цьому amp у нас є тема, яка підтримує 3 меню.
Після призначення меню кожному з доступних місць меню натисніть «Зберегти зміни», і все.
Тепер ви знаєте всі основні функції меню, які WordPress пропонує за замовчуванням. Однак, якщо вам потрібні додаткові налаштування та функціональність, читайте далі, щоб дізнатися про віджет навігаційного меню Elementor Pro.
Якщо ви хочете додати спеціальне навігаційне меню на свій сайт WordPress, вам знадобиться версія Elementor Pro. Версія Elementor Pro постачається з віджетом навігації Elementor разом із багатьма іншими спеціальними функціями, такими як 300+ шаблонів, конструктор тем, віджет для спливаючих вікон, віджети WooCommerce та багато інших цікавих функцій.
Які ключові особливості самого віджета Nav Menu? Ось короткий вступ.
Вам потрібно буде створити базове меню WordPress, як ми вже згадували вище, а потім ви налаштуєте стандартне меню WordPress за допомогою віджета pro-nav-menu. Після того, як ви створили основний список, наступним кроком буде додавання його до бажаного місця, тобто до розділу заголовка.
Тепер, коли ви закінчили з основними налаштуваннями, давайте налаштуємо меню за допомогою віджета навігаційного меню.
У самому верхньому куті розділу налаштувань доступні три параметри; Вміст, стиль і розширені можливості.
Розділ «Макет» : у вас є три варіанти: горизонтальний, вертикальний або прихований розкривний список.
Розділ вирівнювання : цей розділ допоможе вам вирівняти текстові елементи меню; по центру, праворуч або ліворуч.
Розділ анімації : у цьому розділі ви зможете додавати анімаційні ефекти під ефектами анімації, над або подвійною лінією. Ви також можете використати рамку, фон і тонку текстову анімацію.
Підкреслені анімації такі:
Подібним чином існують анімація в рамці, накладання, подвійна лінія, фон і текстова анімація. Кожен із них пропонує власний набір анімацій, і ви можете перевірити їх самостійно, щоб дізнатися, що ви отримуєте з ними.
Розділ вказівника : виберіть тип вказівника зі спадного меню.
Розділ індикатора підменю : віджет Elementor містить багато параметрів стилю підменю. Де ви можете не тільки керувати кольором, стилем, а також фоном меню.
Відступи та інтервали в меню: відступи можна швидко регулювати. Ви можете змінити горизонтальний відступ для меню та підменю, вертикальний відступ, проміжний проміжок, а також праворуч, ліворуч і вирівнювання по центру.
Elementor надзвичайно добре підходить до інтервалів і відступів у меню. Вони наполегливо працювали за дверима, щоб переконатися, що вони можуть надати інструменти розробнику, щоб вони могли легко створити дизайн, про який вони думають.
Розташування меню пропонує багато варіантів, зокрема:
Колір фону та типографіки : ви можете отримати індивідуальний фірмовий вигляд за допомогою бажаної колірної схеми та кольору фону. Крім того, ви можете вибрати параметри прозорого або напівпрозорого меню.
Як дизайнер, ви можете грати з цими параметрами якомога більше та гарантувати, що ви розробляєте фони відповідно до своїх уподобань.
Мобільні пристрої є важливою частиною Інтернету, і тому розробники Elementor також надають інструменти, за допомогою яких ви можете створювати навігаційну панель також для мобільних пристроїв.
Віджет Elementor дозволяє повністю контролювати параметри мобільного меню на WordPress. Ви можете керувати переглядом екрана мобільного пристрою за допомогою окремого набору налаштувань для екранів лише мобільних пристроїв. У нижній частині розділу налаштувань Elementor є опція налаштувань мобільного екрана, де ви можете переглянути параметри мобільного екрана.
Коротко кажучи, функції мобільного меню Elementor такі:
Адаптивна навігація: забезпечує адаптивне розташування меню.
Меню є однією з найважливіших функцій будь-якого веб-сайту. Тому що це допомагає відвідувачам проходити ваш веб-сайт, і якщо ви грамотно створили список, це допоможе утримувати відвідувачів на вашому сайті протягом тривалого часу. Меню настільки ж важливе, як і весь макет будь-якого веб-сайту, розділ верхнього та нижнього колонтитулів.
Таким чином, віджет меню має бути здатним надавати ваш унікальний вигляд бренду з усіма основними функціями. Віджет Elementor Navigation має багатофункціональні можливості, які дозволяють клієнтам налаштувати розділ меню відповідно до голосу вашого бренду. Тепер ви можете використовувати індивідуальне стильне меню на своєму веб-сайті, на цільовій сторінці, у заголовку чи будь-якому іншому розділі, де ви хочете його відображати.
Верхні та нижні колонтитули веб-сайту є важливими елементами. У більшості випадків заголовок забезпечує навігацію…
Дві найпопулярніші теми WordPress на ринку – Astra та OceanWP. Професійний…
Щоб створити чудовий сайт новин, не обов’язково ставати веб-дизайнером. Ми…
Тема газети є однією з найважливіших тем WordPress, розроблена tagDiv,…
Коли справа доходить до створення онлайн-магазину, WooCommerce – це найпопулярніший plugin . Це…
Заголовок, як правило, є першим, що бачить людина, коли відвідує ваш веб-сайт,...
Переглянути коментарі
Hola gracias por el post, cuando añado el nav menu no me aparece mi menuú se queda solo un recuadro gris en el editor de elementor y si voy a la pagina donde lo tengo no aparece nada. Como puedo solucionarlo? gracias
привіт Зазвичай ця проблема виникає, коли ваше меню порожнє або не збережене. Будь ласка, ще раз перевірте сторінку меню WordPress.
Hola, una consulta, cómo se puede dar la instrucción para cerrar Automaticamente un submenu al abrir otro ítem del menu.
Gracias.
Привіт, вибачте, я не повністю зрозумів ваше запитання? Чи могли б ви уточнити?
ciao quando le voci del submenù sono troppo lunghe come si riesce a dividerle su più righe ?
Привіт, це не рекомендується, оскільки навігацію було б дуже складно читати, у цьому випадку краще використовувати стиль мегаменю
Menu w wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
Привіт! Відображення мобільного меню відбувається автоматично, якщо ви використовуєте навігаційний віджет Elementor. Але ви повинні перевірити виклик налаштування «точка зупину» в налаштуваннях меню. Це розмір екрана, коли ваше меню перемикатиметься.
Tôi dùng thằng này, mà trên destop tôi để chế độ Horizontal mà nó không nằm ngang, nó cứ nằm dọc, tôi dùng theme Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor? EPro
Привіт, на жаль, це неможливо, такої опції немає у навігаційному віджеті Elementor.
Чао. Vorrei sapere se è possibile fare in modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della pagina. Purtroppo tutte le volte che ci ho provato il menu scende ma il colore di background del menu no rendendolo praticamente illegibile le scritte. Дякую