Blok menu nawigacyjnego GutenKit to solidne rozwiązanie do łatwego dodawania i dostosowywania elementów menu i podmenu w edytorze Gutenberga. Posiada również funkcje do projektowania menu mobilnego dla urządzeń mobilnych.

Przejrzyj ten dokument, aby dowiedzieć się, jak używać bloku menu nawigacyjnego GutenKit w edytorze bloków.

Jak korzystać z bloku menu nawigacyjnego GutenKit? #

Rozpocznij instalację wtyczki GutenKit z pulpitu WordPress. Następnie przeciągnij i upuść menu nawigacyjne na ekran edytora bloków.
You can follow the video tutorial:

Or, follow the below steps and create your desired Nav Menu with GutenKit.

Krok 1: Dodaj blok menu nawigacyjnego GutenKit #

Pierwszy krok naszej podróży obejmuje zainstalowanie wtyczki GutenKit. Następnie wykonaj następujące czynności:

• Przejdź do nowej strony lub istniejącej.
• Włącz edytor bloków i znajdź „+” ikonę u góry ekranu edytora.
• Kliknięcie spowoduje otwarcie biblioteki bloków.
• Wyszukaj Menu nawigacyjne GutenKit.
• Po wyświetleniu bloku kliknij go lub przeciągnij i upuść na ekranie edytora.

Krok 2: Dodaj element menu nawigacyjnego #

Po dodaniu bloku menu Nav na ekranie edytora, automatycznie pojawi się on ze wszystkimi opublikowanymi stronami jako elementy menu nawigacyjnego. I jest „+”, aby dodać nową pozycję menu. 

Teraz, jeśli skupimy się na ustawieniach tego bloku, ma on kilka funkcji więcej niż inne bloki GutenKit. Kliknij na element nawigacyjny na ekranie edytora, a jego kontrolka ustawień pojawi się na prawym pasku bocznym. 

Tutaj zobaczysz:

Treść: #

• Typ menu: Wybierz typ menu: niestandardowy lub dynamiczny.
• Wybierz łącze dynamiczne: Wybierz stronę, którą chcesz połączyć z tym elementem menu z listy rozwijanej.
• Dodaj niestandardową etykietę: Przełącz ten przycisk, jeśli chcesz dodać inną etykietę dla elementu menu. Włączenie go spowoduje wyświetlenie pola Etykieta niestandardowa, w którym możesz wprowadzić swój własny tekst.
• Dodaj podmenu: Kliknij ten przycisk przełączania, aby włączyć podmenu. A „+” pojawi się pod pozycją menu na ekranie edytora. Zobaczysz również nową opcję o nazwie „Wskaźnik podmenu” w strefie ustawień.

Wskaźnik podmenu: #

• Ikona wskaźnika podmenu: Wybierz ikonę z biblioteki lub prześlij plik SVG jako ikonę wskaźnika podmenu.
• Rozmiar ikony wskaźnika: Użyj suwaka, aby określić rozmiar ikony wskaźnika podmenu.
• Wskaźnik Lewa przestrzeń: Za pomocą tego suwaka można dostosować odstęp między nazwą menu a ikoną.
• Granica: Dodaj obramowanie wokół ikony i wybierz jego kolor, styl i grubość.
• Wyściółka: Dodaj wewnętrzną przestrzeń w obramowaniu ikony.
• Promień granicy: Ustaw zaokrąglenie obramowania ikony.

Dodaj element podmenu: #

Podobnie jak w przypadku pozycji menu, kliknięcie pozycji podmenu spowoduje otwarcie ustawień na pasku bocznym po prawej stronie.

• Typ menu: Wybierz typ menu: niestandardowy lub dynamiczny. 
• Menu Label: Wprowadź nazwę swojego menu.
• Link do menu:Wstaw link, który chcesz przyciągnąć odwiedzających 
• Dodaj podmenu: Włącz tę opcję, aby dodać kolejny element menu w podmenu. Ta akcja spowoduje również otwarcie „Wskaźnik podmenu” ikona jak poprzednio.

Następnie przejdziemy do ustawień nadrzędnych elementu menu lub podmenu. Aby to zrobić, kliknij „Przejdź do rodzica” z ustawień menu lub podmenu. Ale menu i podmenu mają różne funkcje.

Podczas klikania na „Przejdź do rodzica” opcja z Podmenu element, zobaczysz różne opcje dostosowywania dla podmenu w Ustawienia & Styl karty.

Pod Ustawienia opcja:

• Szerokość kontenera: Użyj tego suwaka, aby zwiększyć szerokość podmenu po prawej stronie.

Teraz idź do Styl patka:

Pod Podmenu Wrapper:

• Wyrównanie: Określ pozycję tekstu podmenu w obrębie jego otoczki.

Pod Element podmenu:

• Odstęp między elementami: Użyj tego suwaka, aby określić odstęp między elementami podmenu.
• Typografia: Użyj tych ustawień, aby zmienić rodzinę czcionek, grubość, transformację, styl, dekorację, odstępy itp.

Możesz zastosować następujące ustawienia indywidualnie do Normalna, Unosić się, I Aktywny tryby dla podmenu.

• Tło: Podaj kolor pomiędzy jednolitym a gradientowym.
• Kolor tekstu: Wybierz kolor tekstu za pomocą próbnika kolorów.
• Granica: Wybierz kolor obramowania.
• Wyściółka: Aby zwiększyć odstępy wewnątrz obramowania, wprowadź wartość ręcznie.
• Promień granicy: Użyj tej opcji, aby określić zaokrąglenie obramowania.

Wybór „Przejdź do rodzica” opcja z Menu Pozycja przeniesie Cię do globalnych ustawień bloku (Treść/ Styl/ Zaawansowane). 

Krok 3: Skonfiguruj ustawienia menu #

W tej części zajmiemy się ustawieniami menu nadrzędnego.

Menu: #

• Punkt przerwania menu: Steruj reakcją menu, wybierając typ urządzenia lub dodając wartość niestandardową. Oznacza to, że urządzenia mniejsze niż podana wartość lub wybrany typ pokażą menu hamburgerowe lub mobilne.
• Blokada przewijania dla Offcanvas: Wyłącz przewijanie, gdy menu jest otwarte.
• Uzasadnij treść: Ustaw położenie tekstu elementu menu na podstawie sześciu różnych opcji.
• Wyrównaj elementy:Wyrównanie całego menu nawigacyjnego do różnych pozycji.

Krok 4: Skonfiguruj ustawienia menu mobilnego #

Teraz skonfigurujemy menu dla urządzeń mobilnych.

• Logo menu mobilnego: Za pomocą tej opcji możesz dodać inne logo dla urządzenia mobilnego.
• Link do menu:Dołącz domyślny link do strony głównej lub niestandardowy link z logo menu mobilnego.
• Ikona Hamburgera: Wybierz ikonę z biblioteki ikon lub prześlij plik SVG, aby dodać ikonę do menu hamburgerowego.

Krok 5: Menu nawigacyjne stylu #

Teraz przyjdź do Karta Styl. Tutaj znajdziesz wszystkie ustawienia umożliwiające dostosowanie menu nawigacyjnego. 

Opakowanie menu: #

• Tło menu: Dodaj jednolity kolor, gradient lub obraz dla tła menu.
• Tło paska bocznego: Wybierz typ tła: jednolite lub gradientowe.
• Wyrównanie zawartości menu bocznego: Wybierz pozycję tekstu menu bocznego.
• Wyściółka:Dostosuj przestrzeń wewnętrzną wokół menu nawigacyjnego.
• Promień granicy:Określ okrągłość obramowania.

Pozycje menu: #

• Odstęp między elementami menu: Dostosuj odstęp poziomy między elementami menu.
• Typografia:Uzyskaj wszystkie dostosowania typograficzne dla pozycji menu.
• Typ tła: Użyj typu tła pomiędzy kolorem a gradientem.
• Kolor tekstu: Zastosuj kolor do tekstu menu.
• Granica:Nadaj obramowanie elementowi menu i zdefiniuj jego styl, kolor i grubość.
• Promień granicy: Dostosuj zaokrąglenie obramowania.
• Wyściółka: Zwiększ odstępy wewnętrzne w obrębie obramowania menu.
• Margines: Dodaj wartość ręcznie, aby dodać spacje między elementami menu.

Krok 6: Styl menu mobilnego #

Poniższe ustawienia mają na celu dostosowanie wyglądu menu do urządzeń mobilnych.

• Pozycja ikony: Wybierz pozycję ikony hamburgera na stronie. (Let/Prawo/Ikona)
• Rozmiar ikony: Użyj tego suwaka, aby określić rozmiar ikony hamburgera.
• Szerokość ikony: Użyj tego suwaka, aby dostosować szerokość ikony hamburgera.
• Wysokość: Określ wysokość ikony hamburgera.
• Promień granicy:Określ okrągłość obramowania ikony hamburgera.

Pozostałe opcje tego obszaru ustawień dotyczą zarówno opcji Normalnej, jak i Najechania.

• Tło:Dodaj kolor tła do menu hamburgerowego.
• Kolor ikony:Nadaj kolor ikonie hamburgera.
• Granica:Pobierz ustawienia obramowania dla ikony hamburgera.

Zamknij przycisk,

• Rozmiar ikony: Użyj tego suwaka, aby określić rozmiar ikony.
• Margines:Dodaj wartość ręcznie, aby dodać spacje wokół przycisku zamykania.
• Szerokość: Użyj tej opcji, aby zwiększyć szerokość przycisku zamykania.
• Wysokość:Określ wysokość przycisku zamykania.
• Promień granicy: Użyj suwaka, aby dostosować zaokrąglenie obramowania.

Poniższe trzy opcje można zastosować zarówno Normalna I Unosić się opcje.

• Tło: Dodaj typ tła pomiędzy kolorem jednolitym a gradientowym.
• Kolor ikony:Nadaj kolor ikonie przycisku Zamknij.
• Granica: Użyj tego obszaru ustawień, aby dodać i wystylizowac obramowanie wokół przycisku Zamknij.

To był nasz poradnik pokazujący, jak w prosty sposób dodać menu nawigacyjne do edytora bloków w witrynie WordPress.