Menu nawigacyjne Elementora — stwórz niesamowite menu dla swojej witryny WordPress

Szukasz sposobu na stworzenie niesamowitego menu, które pomoże ulepszyć UI/UX Twojej witryny? Jeśli tak, to jesteś we właściwym miejscu. Tutaj przygotowaliśmy szczegółowy przewodnik, który może Ci pomóc.

Najpierw pokażemy Ci krok po kroku, jak utworzyć menu dla Twojej witryny WordPress. A kiedy już to zrozumiesz, podpowiemy Ci, jak korzystać z widżetu menu nawigacyjnego Elementor, aby dostosować i doładować menu WordPress.

Spis treści:

• Dlaczego potrzebujesz niestandardowego menu nawigacyjnego?
• Utwórz podstawowe menu WordPress za pomocą Elementora
• 1. Utwórz proste menu dla swojej witryny WordPress
• 2. Wybierz i dostosuj elementy menu nawigacji
• 3. Utwórz podmenu — pozycje menu nadrzędnego i podrzędnego (opcjonalnie)
• 4. Zarządzaj lokalizacją menu i publikuj
• Jak utworzyć menu nawigacyjne za pomocą widgetu Elementor pro nav
• Elementor Nav-Menu widget Najważniejsze funkcje
• Utwórz menu za pomocą widgetu nav-menu pro
• Mobilne menu responsywne
• Podsumowując

Dlaczego potrzebujesz niestandardowego menu nawigacyjnego?

Bardzo ważne jest, aby wiedzieć, że menu nawigacyjne są ważne nie tylko dla zwiększenia ruchu na Twojej stronie, ale również dla lepszego rankingu SEO.

Rzeczywiście, menu nawigacyjne są zaprojektowane przede wszystkim z myślą o zaangażowaniu użytkowników, ale nie jest to jedyny cel.

Drugim najważniejszym czynnikiem jest obserwowanie roli „WebCrawler” lub botów zaprojektowanych do indeksowania stron internetowych i indeksowania treści do odpowiedniego poziomu oraz zgłaszania się do wyszukiwarki w celu uszeregowania treści we właściwym miejscu.

Dlatego też, jeśli tworzysz zbyt skomplikowane menu, botom trudno będzie uszeregować twoje treści, ale także stracisz odwiedzających.

Krótko mówiąc, „łatwość nawigacji” ma kluczowe znaczenie dla poprawy komfortu użytkowników, a także odgrywa niezbędną rolę w poprawie rankingu naszej witryny i zwiększeniu ruchu.

Jest to doskonały powód, dla którego wiele witryn firmowych utrzymuje jedną ikonę nawigacji zamiast złożonego paska menu, który po kliknięciu ładuje się do menu pełnoekranowego.

Dzięki widżetowi Elementor pro z responsywnym menu nawigacyjnym w 100% możesz stworzyć perfekcyjny i niezwykle elastyczny pasek menu bez użycia kodu.

W tym samouczku zademonstrujemy, jak korzystać z widżetu menu nawigacyjnego Elementora, aby uzyskać dostosowane, zaawansowane menu WordPress.

Zanim zaczniemy od widgetu Elementor Navigation, zbadajmy, jak możemy stworzyć proste menu WordPress przy użyciu bezpłatnej wersji Elementor.

Utwórz podstawowe menu WordPress za pomocą Elementora

Teraz, aby stworzyć menu WordPress, nie musisz instalować żadnych specjalnych plugin . Domyślnie WordPress jest dostarczany z łatwym w użyciu narzędziem do tworzenia menu, które pomoże Ci stworzyć proste menu nawigacyjne dla Twojej witryny.

Biorąc to pod uwagę, nie będziesz mieć dostępu do żadnych opcji dostosowywania menu. Przyjmie projekt aktualnie aktywnego motywu WordPress. Ale jeśli to wszystko, czego chcesz, jest to doskonały sposób na skonfigurowanie menu nawigacyjnego w witrynie WordPress.

1. Utwórz proste menu dla swojej witryny WordPress

Po pierwsze, musisz zalogować się do pulpitu nawigacyjnego WordPress.

Teraz z lewego paska bocznego przejdź do Wygląd > Menu . Tutaj znajdziesz układ dwukolumnowy z „Dodaj elementy menu” po lewej i „Strukturą menu” po prawej stronie.

W Strukturze menu znajdziesz pole „Nazwa menu”. Będzie to nazwa menu, które teraz będziemy tworzyć. Nazwijmy to Menu 1.

Uwaga : nie martw się. Twoi czytelnicy nie będą mogli zobaczyć nazw menu. Jest to funkcja, która pomaga uporządkować wszystkie różne menu.

Po nadaniu swojemu menu nazwy, kliknij przycisk „Utwórz menu”, aby je udostępnić. Teraz musisz dodać różne pozycje menu.

2. Wybierz i dostosuj elementy menu nawigacji

Teraz nadchodzi część, w której zapełniasz swoje nowe menu pozycjami menu. W sekcji „Dodaj pozycje menu” po lewej stronie znajdziesz uporządkowaną listę rzeczy, które możesz dodać do swojego menu.

Domyślnie zawiera wszystkie Twoje strony, posty, strony docelowe, niestandardowe linki i kategorie.

po prostu wybierz elementy menu, które chcesz dodać, za pomocą pola wyboru, a następnie kliknij przycisk „Dodaj do menu”. Spowoduje to wypełnienie menu wszystkimi wybranymi pozycjami menu.

Uwaga : zwróć uwagę, że każda sekcja w sekcji „Dodaj elementy menu” ma opcję przełączania między – Najnowsze , Wyświetl wszystko i Wyszukaj . Pamiętaj, aby skorzystać z tych opcji, jeśli jest dużo przedmiotów.

Po zakończeniu dodawania wszystkich pozycji menu naciśnij przycisk „Zapisz menu” i przejdź do następnego kroku.

3. Utwórz podmenu — pozycje menu nadrzędnego i podrzędnego (opcjonalnie)

Czy wiesz, że WordPress domyślnie umożliwia również tworzenie podmenu? Podczas tworzenia struktury podmenu masz pozycję menu nadrzędnego i pozycję menu podrzędnego.

Gdy użytkownik najedzie kursorem na pozycję menu nadrzędnego, ujawni wszystkie ukryte pod nim pozycje menu podrzędnego.

Fajnie prawda?

Teraz, aby utworzyć strukturę podmenu, wystarczy wybrać pozycję menu, która ma się znaleźć w menu nadrzędnym. Następnie przeciągnij i upuść wszystkie elementy menu, które chcesz jako elementy menu podrzędnego pod nim. Teraz po prostu przeciągnij go w prawo i gotowe!

4. Zarządzaj lokalizacją menu i publikuj

Po utworzeniu nowego menu i dodaniu podmenu nadszedł czas, aby zarządzać jego lokalizacją.

W górnej części edytora menu powinieneś zauważyć opcję o nazwie „Zarządzaj lokalizacjami”. Kliknij go, a pojawi się coś podobnego do następującego ekranu:

Teraz dostępne lokalizacje menu będą zależeć od zainstalowanego motywu. W ten ex amp le, mamy motyw, który obsługuje 3 menu.

Po przypisaniu menu do każdej z dostępnych lokalizacji menu kliknij „Zapisz zmiany” i gotowe.

Teraz znasz wszystkie podstawowe funkcje menu, które domyślnie oferuje WordPress. Jeśli jednak potrzebujesz większej personalizacji i funkcjonalności, czytaj dalej, aby dowiedzieć się o widżecie menu Elementor Pro Nav.

Jak utworzyć menu nawigacyjne za pomocą widgetu Elementor pro nav

Jeśli chcesz dodać niestandardowe menu nawigacyjne do swojej witryny WordPress, potrzebujesz wersji Elementor Pro. Wersja Elementor Pro jest dostarczana z widżetem nawigacyjnym Elementor wraz z wieloma innymi specjalnymi funkcjami, takimi jak ponad 300 szablonów, kreator motywów, widżet wyskakujący, widżety WooCommerce i wiele innych interesujących funkcji.

Jakie są szczególne kluczowe funkcje samego widżetu Menu nawigacyjnego? Oto krótkie wprowadzenie.

Elementor Nav-Menu widget Najważniejsze funkcje

• Widżet menu nawigacyjnego daje swobodę umieszczania menu w dowolnym miejscu. W nagłówku, u góry lub w dowolnym miejscu na stronie.
• Możesz dodać wiele menu w swojej witrynie, a także na swoich stronach osobno lub globalnie.
• Nadaj swojemu menu olśniewający wygląd, używając animacji, efektów najechania myszką lub aktywnego stanu
• Utwórz mobilne menu responsywne swojej witryny i kontroluj jej wygląd na ekranach urządzeń mobilnych
• Dostosuj kolor, typografię i wypełnienie lub inne ustawienia paska menu
• Utwórz menu z pikselami z odpowiednią precyzją wyrównania, odstępów i wypełnienia.

Utwórz menu za pomocą widgetu nav-menu pro

Musisz utworzyć podstawowe menu WordPress, jak wspomniano powyżej, a następnie dostosujesz domyślne menu WordPress za pomocą widżetu pro-nav-menu. Po utworzeniu podstawowej listy, następnym krokiem jest dodanie jej do wybranej lokalizacji, tj. Sekcji Nagłówek.

Teraz, gdy skończysz z podstawowymi ustawieniami, dostosujmy menu za pomocą widżetu menu nawigacyjnego.

W najwyższym rogu sekcji ustawień dostępne są trzy opcje; Treść, styl i zaawansowane.

Sekcja Układ : masz trzy opcje Poziomy, pionowy lub ukryty akordeon rozwijany.

• Poziomy: układ poziomy jest najczęściej używanym układem w witrynach. Rozprzestrzenia się po ekranie od lewej do prawej.
• Wertykalny: w wielu witrynach, szczególnie w witrynach oferujących usługi kreatywne, jest również układ pionowy. W przypadku układu pionowego pasek nawigacji będzie rozłożony od góry do dołu.
• Rozwijane menu : menu rozwijane są również dość powszechne. Listy rozwijane mają układ pionowy i wymagają interakcji z użytkownikiem, aby je ujawnić. Są one głównie używane do tworzenia czystego projektu.

Wyrównaj sekcję : ta sekcja pomaga wyrównać pozycje tekstowe menu; środek, prawo lub lewo.

Sekcja animacji : ta sekcja umożliwia dodawanie efektów animacji pod, nad lub podwójnej linii animacji. Możesz także wybrać animację ramki, tła i subtelnego tekstu.

Animacje podkreślenia są następujące:

• Fade: Animacja zanikania oferuje animację zanikania poniżej elementów menu.
• Slajd: animacja slajdu przesuwa pasek poniżej elementów menu.
• Grow : Animacja wzrostu rośnie od środka do zewnątrz i daje wrażenie wzrostu.
• Upuść : Upuść animację płynie od dołu do góry.
• Drop out: animacja upuszczania płynie od góry do dołu.

Podobnie jest w przypadku animacji w ramkach, nadkreślenia, podwójnej linii, tła i tekstu. Każdy z nich oferuje własny zestaw animacji i możesz sam je sprawdzić, aby dowiedzieć się, co z nimi otrzymasz.

Sekcja wskaźnika : wybierz typ wskaźnika z menu rozwijanego.

Sekcja wskaźnika podmenu : widżet Elementor jest wyposażony w wiele opcji stylizacji podmenu. Gdzie możesz nie tylko kontrolować kolor, styl, a także tło menu.

Padding i odstępy między menu: padding można szybko dostosować. Możesz zmienić poziome dopełnienie menu i podmenu, pionowe dopełnienie, odstępy, a także wyrównanie do prawej, lewej i do środka.

Elementor bardzo dobrze podchodzi do odstępów i dopełniania menu. Ciężko pracowali za drzwiami, aby mieć pewność, że mogą dostarczyć narzędzia deweloperowi, aby mógł łatwo stworzyć projekt, o którym myślą.

Rozstaw menu oferuje wiele opcji, w tym:

• Przestrzeń między pozycjami menu
• Dopełnienie poziome i pionowe dla elementów menu i podmenu
• Wyrównanie do środka, do lewej, do prawej i wyjustowane.

Kolor tła i typografia : możesz uzyskać indywidualny wygląd marki za pomocą żądanego schematu kolorów i koloru tła. Możesz także wybrać przezroczyste lub półprzezroczyste opcje menu.

Jako projektant możesz bawić się tymi opcjami tak często, jak tylko możesz i upewnić się, że projektujesz tła zgodnie ze swoimi upodobaniami.

Mobilne menu responsywne

Urządzenia mobilne są ważną częścią sieci i dlatego programiści Elementora zapewniają również narzędzia, dzięki którym możesz również utworzyć pasek nawigacyjny dla telefonu komórkowego.

Widżet Elementor umożliwia pełną kontrolę nad opcjami menu mobilnego w WordPress. Możesz kontrolować widok ekranu telefonu komórkowego za pomocą osobnego zestawu ustawień dla ekranów tylko dla urządzeń przenośnych. Na dole sekcji ustawień Elementora znajduje się opcja ustawień ekranu telefonu komórkowego, w której możesz wyświetlić opcje ekranu telefonu komórkowego.

Krótko mówiąc, funkcje menu mobilnego Elementora są następujące:

• Pełna szerokość na telefonie komórkowym: możesz ustawić pełną lub ograniczoną szerokość.
• Punkty przerwania na tablecie lub telefonie komórkowym: możesz użyć ustawień punktu przerwania, aby ustawić menu mobilne dla telefonu komórkowego lub tabletu.
• Menu pionowe i harmonijkowe: Elementor oferuje również opcję wyświetlania zwijanej ikony hamburgera.
• Toggle align: Ikonę hamburgera można wyrównać do środka, do lewej lub do prawej.
• Wyrównanie na bok / do środka: Wybierz wyrównanie menu mobilnego.

Elastyczna nawigacja: oferuje elastyczne pozycjonowanie menu.

Podsumowując

Menu jest jedną z najważniejszych cech każdej witryny. Ponieważ pomaga odwiedzającym poruszać się po Twojej witrynie, a jeśli utworzysz sprytnie listę, pomoże to utrzymać użytkowników na Twojej stronie przez długi czas. Menu jest równie ważne jak cały układ strony, nagłówek i stopka.

Dlatego widżet menu musi być w stanie zapewnić unikalny wygląd Twojej marki ze wszystkimi niezbędnymi funkcjami. Widżet Nawigacja Elementor jest wyposażony w bogate funkcje, które pozwalają klientom dostosować sekcję menu, aby pasowała do głosu Twojej marki. Teraz możesz użyć niestandardowego, skrojonego na miarę, stylowego menu w swojej witrynie, na stronie docelowej, nagłówku lub w dowolnej innej sekcji, w której chcesz je wyświetlić.