Menu nawigacyjne Elementora – zbuduj niesamowite menu dla swojej witryny WordPress

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

Na początek pokażemy Ci krok po kroku, jak utworzyć menu dla swojej witryny WordPress. A kiedy już to zrozumiesz, poprowadzimy Cię, jak używać widżetu Menu nawigacji Elementora, aby dostosować i ulepszyć 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ą widżetu nawigacyjnego Elementor pro
• Kluczowe funkcje widżetu Elementor Nav Menu
• Utwórz menu za pomocą widżetu nav-menu pro
• Menu responsywne dla urządzeń mobilnych
• Podsumowanie

Dlaczego potrzebujesz niestandardowego menu nawigacyjnego?

Ważne jest, aby wiedzieć, że menu nawigacyjne są ważne nie tylko dla zwiększenia ruchu w Twojej witrynie, ale także dla lepszego rankingu SEO.

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

Drugim najważniejszym czynnikiem jest uwzględnienie roli „WebCrawlera”, czyli botów, których zadaniem jest przeszukiwanie stron internetowych i indeksowanie treści do odpowiedniego poziomu oraz raportowanie do wyszukiwarki w celu umieszczenia treści we właściwym miejscu.

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

Krótko mówiąc, „łatwość nawigacji” ma kluczowy wpływ na poprawę komfortu użytkowania, a także odgrywa kluczową rolę w poprawie rankingu naszej witryny i zwiększeniu ruchu.

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

Dzięki widżetowi Elementor pro ze 100% responsywnym menu nawigacyjnym możesz stworzyć doskonały co do piksela i niezwykle elastyczny pasek menu bez użycia żadnego kodu.

W tym samouczku pokażemy, jak używać widżetu menu nawigacyjnego Elementora, aby uzyskać spersonalizowane, zaawansowane menu WordPress.

Zanim zaczniemy od widżetu nawigacji Elementor, przyjrzyjmy się, jak możemy stworzyć proste menu WordPress przy użyciu darmowej wersji Elementora.

Utwórz podstawowe menu WordPress za pomocą Elementora

Teraz, aby stworzyć menu WordPress, nie musisz instalować żadnych specjalnych plugin . Domyślnie WordPress jest wyposażony w łatwy w użyciu kreator menu, który 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. Przejmie projekt aktualnie aktywnego motywu WordPress. Ale jeśli to wszystko, czego chcesz, jest to doskonały sposób na skonfigurowanie menu nawigacyjnego dla Twojej witryny WordPress.

1. Utwórz proste menu dla swojej witryny WordPress

Po pierwsze, musisz zalogować się do panelu zaplecza WordPress.

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

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

Uwaga : nie martw się. Twoi czytelnicy nie będą mogli zobaczyć nazw menu. Jest to funkcja pomagająca uporządkować wszystkie menu.

Po nadaniu nazwy Menu 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 wypełniasz nowe menu elementami 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 to dowolne strony, posty, strony docelowe, niestandardowe linki i kategorie.

po prostu wybierz pozycje menu, które chcesz dodać, korzystając z pola wyboru, a następnie kliknij przycisk „Dodaj do menu”. Spowoduje to zapełnienie Twojego menu wszystkimi wybranymi pozycjami menu.

Uwaga : Zwróć uwagę, że w każdej sekcji „Dodaj elementy menu” można przełączać się między – Najnowsze , Wyświetl wszystko i Szukaj . Pamiętaj, aby użyć 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 domyślnie WordPress umożliwia także tworzenie podmenu? Tworząc strukturę podmenu, masz element menu nadrzędnego i element menu podrzędnego.

Gdy użytkownik najedzie kursorem na element menu nadrzędnego, odsłoni wszystkie ukryte pod nim elementy menu podrzędnego.

Fajnie, prawda?

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

4. Zarządzaj lokalizacją menu i publikuj

Po utworzeniu nowego menu i dodaniu podmenu przyszedł czas na zarządzanie jego lokalizacją.

U góry edytora menu powinieneś zauważyć opcję „Zarządzaj lokalizacjami”. Kliknij na to i powinno pojawić się coś podobnego do poniższego ekranu:

Teraz dostępne lokalizacje menu będą zależeć od zainstalowanego motywu. W tym amp mamy motyw obsługujący 3 menu.

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

Znasz już 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 nawigacji Elementor Pro.

Jak utworzyć menu nawigacyjne za pomocą widżetu nawigacyjnego Elementor pro

Jeśli chcesz dodać dostosowane menu nawigacyjne do swojej witryny WordPress, potrzebujesz wersji Elementor Pro. Wersja Elementor Pro zawiera widżet nawigacyjny Elementor oraz wiele innych specjalnych funkcji, takich jak ponad 300 szablonów, narzędzie do tworzenia motywów, widżet wyskakujący, widżety WooCommerce i wiele innych interesujących funkcji.

Jakie są konkretne kluczowe funkcje samego widżetu Nav Menu? Oto krótkie wprowadzenie.

Kluczowe funkcje widżetu Elementor Nav Menu

• Widget menu nawigacyjnego zapewnia swobodę umieszczania menu w dowolnym miejscu. W nagłówku, na górze lub w dowolnym miejscu strony.
• Możesz dodać wiele menu w swojej witrynie, a także na swoich stronach oddzielnie lub globalnie.
• Nadaj swojemu menu olśniewający wygląd, używając animacji, efektów najechania lub statusu aktywnego
• Utwórz mobilne, responsywne menu swojej witryny i kontroluj, jak Twoja witryna będzie wyglądać na ekranach mobilnych
• Dostosuj kolor, typografię i wyściółkę lub inne ustawienia paska menu
• Utwórz menu doskonałe w pikselach z odpowiednią precyzją wyrównania, odstępów i wypełnienia.

Utwórz menu za pomocą widżetu nav-menu pro

Będziesz musiał utworzyć podstawowe menu WordPress, jak wspomnieliśmy powyżej, a następnie dostosować domyślne menu WordPress za pomocą widżetu pro-nav-menu. Po utworzeniu listy podstawowej następnym krokiem jest dodanie jej do wybranej lokalizacji, tj. sekcji nagłówka.

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

W górnym 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ęstszym układem używanym w witrynach. Rozprzestrzenia się po ekranie od lewej do prawej.
• Pionowy: w wielu witrynach, szczególnie w witrynach oferujących usługi kreatywne, znajdziesz także układ pionowy. W przypadku układu pionowego rozkład paska nawigacyjnego będzie przebiegał od góry do dołu.
• Lista rozwijana: menu rozwijane są również dość powszechne. Listy rozwijane mają układ pionowy i ich ujawnienie wymaga interakcji z użytkownikiem. Są one najczęściej używane do stworzenia czystego projektu.

Wyrównaj sekcję : ta sekcja pomaga wyrównać elementy tekstowe menu; środkowy, prawy lub lewy.

Sekcja animacji : ta sekcja umożliwia dodawanie efektów animacji pod, nad lub efektów animacji z podwójną linią. Możesz także wybrać animacje ramki, tła i subtelnego tekstu.

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

• Zanikanie: Animacja zanikania oferuje animację zanikania pod elementami menu.
• Slajd: Animacja slajdu przesuwa pasek poniżej pozycji menu.
• Grow : Animacja wzrostu rośnie od środka w kierunku zewnętrznym i daje wrażenie wzrostu.
• Wpuszczanie : animacja wrzucania przebiega od dołu do góry.
• Porzuć: Animacja porzucenia przebiega od góry do dołu.

Podobnie istnieją animacje z ramkami, nadkreśleniami, podwójną linią, tłem i tekstem. Każdy z nich oferuje własny zestaw animacji i możesz je sprawdzić samodzielnie, aby dowiedzieć się, co dzięki nim zyskujesz.

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

Sekcja wskaźników podmenu : widżet Elementor zawiera wiele opcji stylizacji podmenu. Gdzie możesz nie tylko kontrolować kolor, styl, ale także tło menu.

Wypełnienie i odstępy w menu: dopełnienie można szybko dostosować. Możesz zmienić poziome dopełnienie menu i podmenu, pionowe dopełnienie, odstępy pomiędzy nimi, a także wyrównanie do prawej, lewej i wyśrodkowanej.

Elementor bardzo dobrze podchodzi do odstępów i dopełnienia menu. Ciężko pracowali za drzwiami, aby mieć pewność, że będą mogli dostarczyć programistom narzędzia, dzięki którym będą mogli z łatwością stworzyć projekt, o którym myślą.

Rozstaw menu oferuje wiele opcji, w tym:

• Odstęp pomiędzy pozycjami menu
• Poziome i pionowe wypełnienie elementów menu i podmenu
• Wyrównanie do środka, do lewej, do prawej i wyjustowane.

Kolor tła i typografia : możesz uzyskać spersonalizowany 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 to możliwe, i upewnić się, że projektujesz tła zgodnie ze swoimi upodobaniami.

Menu responsywne dla urządzeń mobilnych

Urządzenia mobilne są ważną częścią Internetu i dlatego programiści Elementora udostępniają również narzędzia, dzięki którym można utworzyć pasek nawigacyjny również dla urządzeń mobilnych.

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

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

• Pełna szerokość na urządzeniach mobilnych: możesz ustawić także pełną lub ograniczoną szerokość.
• Punkty przerwania na tablecie lub urządzeniu mobilnym: 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 składanej ikony hamburgera.
• Przełącz wyrównanie: Ikona hamburgera może być wyrównana do środka, do lewej lub do prawej.
• Wyrównanie na bok/do środka: wybierz wyrównanie menu mobilnego.

Responsywna nawigacja: oferuje responsywne pozycjonowanie menu.

Podsumowanie

Menu to jedna z najważniejszych cech każdej witryny internetowej. Ponieważ pomaga odwiedzającym poruszać się po Twojej witrynie, a jeśli mądrze utworzysz listę, pomoże to zatrzymać odwiedzających na Twojej witrynie przez długi czas. Menu jest równie ważne, jak cały układ dowolnej witryny internetowej, nagłówek i stopka.

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