Jak zastąpić główny pasek menu modułem Divi o pełnej szerokości?

Główny pasek menu sprawia, że ​​nawigacja dla odwiedzających jest bezproblemowa. Oprócz domyślnego podstawowego paska menu, do którego jesteśmy przyzwyczajeni w WordPress, prawdopodobnie natknąłeś się również na moduł menu o pełnej szerokości, który oferuje Divi. Zwykle służy do wyświetlania innych menu w witrynie, które różnią się od menu głównego, które znajduje się u góry każdej strony.

Ale możesz również łatwo użyć modułu menu o pełnej szerokości, aby zastąpić główny pasek menu. Daje to swobodę umieszczania menu w dowolnym miejscu na stronie bez konieczności duplikowania menu u góry strony. Możesz także użyć wbudowanych opcji Divi, aby wystylizować menu tak, jak chcesz, co oznacza, że ​​możesz tworzyć oszałamiające rezultaty, na przykład za pomocą opcji obramowania i dzielnika.

W tym samouczku pokażemy, jak zastąpić główny pasek menu modułem menu o pełnej szerokości za pomocą pakietu Divi's Carpenter Layout Pack. Jest to część naszej ciągłej inicjatywy projektowej Divi. Możesz wybrać, czy chcesz, aby ta metoda miała zastosowanie do wszystkich stron, czy tylko do kilku z nich. Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek dotyczący przypadków użycia, rzućmy okiem na wynik końcowy na różnych rozmiarach ekranu.

Wyłącz stały pasek nawigacyjny

Przejdź do opcji motywu Divi

Pierwszą rzeczą, którą musimy zrobić, to wyłączyć opcję stałej nawigacji w opcjach motywu Divi. Robimy to, aby pozbyć się podstawowego obszaru menu u góry naszej strony. Aby to zrobić, przejdź do pulpitu WordPress> Divi> Opcje motywu.

Wyłącz stały pasek nawigacyjny

Otwórz kartę Ogólne i wyłącz opcję Stały pasek nawigacyjny.

Utwórz menu główne

Przejdź do menu

Następną rzeczą, którą zrobimy, jest stworzenie naszego głównego menu. Użyjemy tego menu podstawowego zarówno dla domyślnego paska menu głównego u góry, jak i modułu menu o pełnej szerokości. Aby dodać swoje menu, przejdź do pulpitu nawigacyjnego WordPress> Wygląd> Menu.

Dodaj nowe menu główne

Dodaj nowe menu, nadaj nazwę swojemu menu i ustaw je jako Menu Główne.

Dodaj strony i zapisz menu

Na koniec dodaj wszystkie swoje strony i zapisz menu.

Styl głównego paska menu w konfiguratorze motywów

Przejdź do dostosowywania motywów

W zależności od tego, czy chcesz ukryć domyślny podstawowy pasek menu na wszystkich stronach, czy nie, możesz najpierw zmienić styl domyślnego podstawowego paska menu. Musisz to zrobić tylko wtedy, gdy planujesz używać go na niektórych stronach. Jeśli chcesz wszędzie usunąć główny pasek menu, możesz pominąć ten krok.

Ustawienia głównego paska menu

Aby dopasować pakiet układu, wprowadziliśmy następujące zmiany:

• Styl czcionki: pogrubienie i wielkie litery
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: #f25b3a
• Kolor tła menu rozwijanego: #f25b3a

Ukryj główny pasek menu

Jedna strona

Przejdź do strony wyboru i włącz Visual Builder

Aby ukryć główny pasek menu u góry naszych stron, musimy użyć niewielkiej ilości kodu CSS. Pamiętaj, że ważne jest, aby wyłączyć opcję Stały pasek nawigacyjny (jeden z poprzednich kroków). W przeciwnym razie miejsce zajmowane przez podstawowy pasek menu będzie białe i nie zniknie całkowicie. Jeśli zamierzasz ukryć główny pasek menu na jednej stronie, w szczególności przejdź do tej strony i włącz Visual Builder.

Otwórz ustawienia strony

Otwórz ustawienia strony, klikając następującą ikonę u dołu strony:

Dodaj kod CSS

Przełącz się na kartę Zaawansowane i dodaj następujący kod CSS do pola Niestandardowy CSS:

#main-header {
display: none;
}

Cała strona internetowa

Przejdź do opcji motywu Divi

Jeśli chcesz pozbyć się głównego paska menu z całej witryny, możesz to również zrobić. Nie musisz ręcznie dodawać kodu do każdej strony. Zamiast tego możesz po prostu przejść do pulpitu WordPress> Divi> Opcje motywu.

Dodaj kod CSS

Kontynuuj, przewijając w dół, aż natrafisz na pole Niestandardowy CSS i dodaj tam ten sam kod CSS:

#main-header {
display: none;
}

Dodaj główny pasek menu do strony

Otwórz stronę docelową za pomocą Visual Builder

Teraz, gdy ukryliśmy główny pasek menu, możemy zacząć dodawać moduł menu o pełnej szerokości do naszej strony. Aby to zrobić, przejdź na przykład do strony docelowej i włącz Visual Builder.

Dodaj sekcję o pełnej szerokości

Kontynuuj, dodając sekcję pełnej szerokości tuż pod sekcją bohatera.

Górna granica

Możesz użyć wszystkich wbudowanych opcji Divi, aby stworzyć dokładnie taki projekt, jaki chcesz. Zamierzamy utrzymać to w czystości. Jedyne, co dodamy do naszych opcji sekcji, to górna ramka:

• Szerokość górnej krawędzi: 7px
• Kolor górnej granicy: #f25b3a

Dodaj moduł menu o pełnej szerokości

Następnie dodaj do swojej sekcji moduł menu o pełnej szerokości.

Wybierz Menu główne

Wybierz menu główne jako menu, które chcesz wyświetlić.

Kolor tła

Kontynuuj, nadając swojemu modułowi czarny kolor tła.

Ustawienia linków

Następnie otwórz ustawienia Linków i zastosuj następujące zmiany:

• Kolor aktywnego łącza: #FFFFFF
• Kolor tekstu menu rozwijanego: #FFFFFF
• Kolor tekstu w menu mobilnym: #FFFFFF
• Orientacja tekstu: w lewo
• Kolor tekstu: jasny

Rozwijane ustawienia menu

Następnie zmień ustawienia menu rozwijanego:

• Kolor tła menu rozwijanego: #000000
• Kolor linii menu rozwijanego: #000000
• Kolor tła menu mobilnego: #000000

Ustawienia tekstu menu

Na koniec dostosujemy ustawienia tekstu do pakietu układu:

• Grubość czcionki menu: Ultra Bold
• Styl czcionki menu: wielkie litery

Ustaw sekcję o pełnej szerokości jako globalną i używaj jej również na innych stronach

Zapisz jako sekcję globalną

Skończyliśmy tworzenie naszego nowego menu głównego! Jeśli planujesz używać go również na innych stronach, dodaj go do swojej biblioteki Divi jako element globalny.

Dodaj do innych stron bez głównego paska menu

Możesz teraz łatwo dodać to menu o pełnej szerokości do innych stron. Możesz wybrać jego pozycję i swobodnie bawić się wbudowanymi opcjami projektowymi, które są z nim związane!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadku użycia pokazaliśmy, jak zastąpić główny pasek menu u góry stron modułem menu o pełnej szerokości. Zastosowanie tej metody daje swobodę umieszczania menu w dowolnym miejscu na stronie. Co więcej, możesz również użyć wbudowanych opcji Divi, aby go stylizować. Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.