Jak obramować menu nawigacyjne za pomocą dzielników sekcji

Twoje menu nawigacyjne jest jedną z pierwszych rzeczy, których szukają odwiedzający, gdy przechodzą do Twojej witryny. Z tego powodu strony internetowe zapewniają im podstawową nieruchomość (u góry strony), na którą zasługuje. Ale jeśli chcesz, aby Twoje menu nawigacyjne wyróżniało się nieco bardziej, możesz je urozmaicić niestandardowymi projektami tła. Za pomocą programu Divi's Visual Builder możesz tworzyć niesamowite projekty tła z opcjami tła Divider dostępnymi w każdej sekcji strony. A przy odrobinie kreatywności możesz użyć tła rozdzielającego, które posłuży jako unikalna ramka do menu nawigacyjnego. Możesz nawet stworzyć unikalne tło menu dla każdej strony swojej witryny.

W tym samouczku pokażę, jak łatwo jest oprawić menu nawigacyjne pięknymi projektami tła przy użyciu teł rozdzielających sekcje. Użyję pakietu układu apteki jako przykładowej witryny do tworzenia tych projektów.

Zacznijmy!

zapowiedź

Oto zajawka tego, co można osiągnąć dzięki tej technice projektowania.

Czego potrzebujesz

W tym samouczku wszystko, czego naprawdę potrzebujesz, to:

• Motyw Divi (zainstalowany i aktywny)
• Pakiet układu apteki (bezpłatny gotowy pakiet układu dostępny w Divi Builder)

Konfigurowanie głównego menu w konfiguratorze motywów

W tym samouczku mam świeżą instalację Divi z moim głównym menu zawierającym sześć stron pakietu układu apteki. Oto jak domyślnie wygląda menu.

Jak widać nagłówek ma białe tło i znajduje się nad pierwszą sekcją strony. Podczas przewijania w dół nagłówek przekształca się w stały pasek menu nawigacji.

Ale w tym samouczku chcę, aby tło nagłówka było przezroczyste, abym mógł dodać własne niestandardowe tło. Aby to zrobić, musimy przejść do dostosowywania motywów. Z pulpitu WordPress przejdź do Divi > Theme Customizer. Następnie z menu dostosowywania przejdź do Nagłówek i nawigacja > Główny pasek menu.

Zmień kolor tła, aby był całkowicie przezroczysty, przeciągając suwak przezroczystości do końca lub wprowadź kod koloru rgba(255,255,255,0).

Jak widać, białe tło nagłówka zniknęło, a pierwsza sekcja przeskoczyła na górę strony, aby służyć jako tło nagłówka i menu głównego.

Ponieważ zamierzamy dodać kolorowe tło, aby obramować nasze menu nawigacyjne, zaktualizujmy również następujące opcje tekstowe menu.

Czcionka: Montserrat
Styl czcionki: pogrubienie (B)
Kolor tekstu: biały
Kolor aktywnego łącza: biały

Wróć o jeden poziom w menu dostosowywania i kliknij kartę Stała nawigacja. Jeśli zamierzasz zachować funkcjonalność stałej nawigacji, możesz nadać jej niestandardowy kolor, który będzie pasował do koloru niestandardowego tła, które zbudujesz w kreatorze wizualnym. Możesz też nadać mu bardziej ogólny kolor, aby można było obramować menu główne różnymi kolorami dla każdej strony. Na razie zamierzam użyć bardziej ogólnego schematu kolorów do mojej stałej nawigacji. Zaktualizuj następujące elementy:

Główny kolor tła menu: #ffffff
Kolor głównego łącza menu: rgba (0,0,0,061)
Kolor aktywnego łącza głównego menu: #ff5473

Teraz jesteśmy gotowi! Upewnij się, że publikujesz swoje zmiany.

Obramowanie menu nawigacyjnego tłem podziału sekcji

Przykład 1

Przejdź do strony głównej apteki i wdróż konstruktor wizualny. Następnie dodaj nową zwykłą sekcję bez żadnych wierszy, kolumn ani modułów (nie potrzebujesz ich) i przeciągnij sekcję na górę strony (łatwiej jest mi zmienić kolejność sekcji w trybie szkieletowym, ponieważ są to większe bloki).

Teraz wróć do trybu pulpitu, aby ukończyć projekt.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Styl Top Divider: patrz zrzut ekranu
Kolor dzielnika: #ff5473
Wysokość dzielnika: 150px
Powtarzanie w poziomie dzielnika: 0,8x
Margines niestandardowy:-80px dół
Niestandardowe dopełnienie: 0px góra, 0px dół

Kolor rozdzielacza to ten sam różowy kolor, który zastosowano w układzie. Ustawiłem poziome powtórzenie dzielnika na 0,8x, aby nieco spłaszczyć dzielnik. Dolny margines -80px przesuwa sekcję w dół strony, aby ukryć białe tło sekcji. Powoduje to, że rozdzielacz otaczający nawigację po prawej stronie. Przegroda rozciąga się w lewo, aby dodać ładne tło do Twojego logo.

Oto jak to wygląda na stronie na żywo.

Przykład #2

W następnym przykładzie zamierzam ustawić sekcję tak, aby tło rozdzielające tylko obramowało menu nawigacyjne, zamiast rozciągać się również na logo. Aby to zrobić, musimy nadać naszej sekcji niestandardową szerokość i wyrównać ją do prawej, aby pasowała do menu nawigacyjnego.

Przejdź do ustawień sekcji i zaktualizuj następujące elementy:

(Uwaga: może być konieczne otwarcie ustawień w trybie szkieletowym, ponieważ niestandardowy margines sekcji może uniemożliwić kliknięcie menu sekcji. Po otwarciu ustawień w trybie szkieletowym można przełączyć się z powrotem do trybu widoku pulpitu.)

Szerokość: 75%
Wyrównanie sekcji: do prawej
Styl dzielnika: patrz zrzut ekranu
Powtarzanie poziome dzielnika: 1x

Oto jak to wygląda:

Przy włączonej stałej nawigacji możesz zobaczyć, jak aktywuje się nagłówek stałego menu, gdy menu zaczyna opuszczać ramkę.

Jeśli chcesz wyłączyć stałą nawigację, przejdź do Divi> Opcje motywu i wyłącz opcję Stały pasek nawigacji w Ustawieniach ogólnych.

Bez włączonej stałej nawigacji menu pozostanie zablokowane w projekcie ramki jako przewijanie.

Czuły

Ramka będzie wyglądać dobrze nawet na telefonie komórkowym.

Ale zawsze możesz ukryć ramkę, nadając swojej sekcji niestandardową wysokość podziału na zero dla komputerów stacjonarnych i mobilnych. A następnie dostosuj swoje menu mobilne w konfiguratorze motywów.

Używaj różnych kolorowych ramek na różnych stronach

Jeśli chcesz, możesz dodać różne kolory i wzory dla każdej strony. Wszystko, co musisz zrobić, to zapisać swoją sekcję w bibliotece Divi i dodać ją do innej strony swojej witryny. Następnie możesz dostosować kolor lub wzór, jak chcesz. Możliwości są nieskończone.

Końcowa myśl

Dodanie niestandardowego tła do menu nawigacyjnego jest całkiem łatwe dzięki Divi Builder. Wszystko, co musisz wiedzieć, to jak ustawić sekcję, aby służyła jako tło dla Twojego menu. Dzięki tej konfiguracji możesz przetestować różne style dzielników, aby utworzyć wszelkiego rodzaju unikalne ramki do menu nawigacyjnego. A ponieważ używasz sekcji, masz wszystkie opcje projektowania sekcji, aby zaprojektować swoją ramę. Możesz nawet użyć prostego tła lub gradientu sekcji i dostosować położenie sekcji w dowolnym miejscu.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!