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 Twojej 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:
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.
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.
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.
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 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.
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!
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.
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.
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.
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:
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:
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 dowolnie bawić się tymi opcjami i projektować tła zgodnie ze swoimi upodobaniami.
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:
Responsywna nawigacja: oferuje responsywne pozycjonowanie menu.
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. 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ć.
Nagłówki i stopki witryny internetowej są niezbędnymi elementami. W większości przypadków nagłówek zapewnia nawigację…
Dwa najpopularniejsze motywy WordPress na rynku to Astra i OceanWP. Profesjonalny…
Stworzenie doskonałej witryny z wiadomościami nie wymaga zostania projektantem stron internetowych. My…
Motyw gazety jest jednym z najważniejszych motywów WordPress zaprojektowanych przez tagDiv, firmę…
Jeśli chodzi o konfigurację sklepu internetowego, WooCommerce jest najczęściej wybieraną plugin . To…
Nagłówek jest zazwyczaj pierwszą rzeczą, którą widzi osoba odwiedzająca Twoją witrynę…
Zobacz komentarze
Hola gracias por el post, cuando añado el nav menú no me aparece mi menú 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? gratki
Cześć! Zwykle ten problem pojawia się, gdy menu jest puste lub niezapisane. Sprawdź dokładnie po stronie menu WordPress.
Hola, una consulta, cómo se puede dar la instrucción para cerrar automáticamente un submenu al abrir otro ítem del menu.
Gracie.
Cześć, przepraszam, nie rozumiem do końca Twojego pytania? Czy mógłbyś określić?
ciao quando le voci del submenù sono troppo płuche come si riesce a rozdzielacz su più righe?
Cześć, nie jest to zalecane, ponieważ nawigacja byłaby bardzo skomplikowana w czytaniu, w tym przypadku lepszy jest styl mega menu
Menu w wersji mobilnej nie otwiera sie. Jak mogę je stworzyć, aby wyświetlić na telefonach?
Cześć, wyświetlanie menu mobilnego odbywa się automatycznie, jeśli korzystasz z widżetu nawigacyjnego Elementor. Ale powinieneś sprawdzić ustawienie wywołania „punktu przerwania” w ustawieniach menu. Jest to rozmiar ekranu, przy którym będzie się przełączać menu.
Tôi dùng thằng nay, mà trên destop tôi để chế độ Poziomy mà nó không nằm ngang, nó cu nằm dọc, tôi dùng motyw 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
Witam, niestety nie jest to możliwe, w widżecie nawigacyjnym Elementora nie ma takiej opcji.
Ciao. Vorrei sapere jest możliwe w trybie, który można znaleźć w 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 kolor tła menu bez praticamente rendendolo le scritte. Grazie