Jak uwzględnić główny pasek menu w projekcie strony Divi?

Nawigacja jest istotną częścią doświadczenia użytkownika w Twojej witrynie. Ważne jest, aby upewnić się, że odwiedzający mogą płynnie poruszać się po Twojej witrynie bez konieczności rezygnowania z estetyki. Domyślnie główny pasek menu WordPressa jest umieszczony u góry każdej strony i jest uważany za odrębny od projektu strony, którą wybierzesz. Jednak w wielu przypadkach uwzględnienie menu w ogólnym projekcie strony może przynieść oszałamiające rezultaty. Zapewni to Twojej witrynie bardziej spójny wygląd i styl.

W tym poście pokażemy, jak uwzględnić główny pasek menu w projekcie strony Divi. Jest to prosta, ale dynamiczna zmiana sposobu, w jaki zwykle wyświetlane jest menu główne, nadając niepowtarzalny wygląd każdemu projektowi Divi.

Weźmy się za to!

Subskrybuj nasz kanał YouTube

Zapowiedź

Zacznijmy od przyjrzenia się wynikowi końcowemu na różnych rozmiarach ekranu:

Ustawienia dostosowywania motywów

Przejdź do dostosowywania motywów

Zanim zaczniemy tworzyć nasz projekt, zacznijmy od kilku zmian w dostosowywaniu motywów. Przejdź do pulpitu WordPress > Wygląd > Dostosuj .

Zapisz obraz tła

Ponieważ zamierzamy odłączyć główny pasek menu od góry, będziemy potrzebować czegoś, co zakryje miejsce, które normalnie zajmuje. Użyjemy następującego obrazu tła, więc śmiało zapisz go na swoim komputerze:

Prześlij obraz tła do ustawień ogólnych

Następnie przejdź do Ustawienia ogólne > Tło i prześlij obraz do tła swojej witryny.

• Rozciągnij obraz tła: włączony
• Pozycja tła: Naprawiono

Ustawienia głównego paska menu

Zamierzamy również połączyć podstawowy pasek menu z naszym projektem Divi. Aby to zrobić, musimy najpierw zmodyfikować ustawienia głównego paska menu. Przejdź do Nagłówek i nawigacja > Główny pasek menu i użyj następujących ustawień:

• Maksymalna wysokość logo: 100
• Rozmiar tekstu: 18
• Odstępy między literami: -1
• Czcionka: Poppins
• Kolor tekstu: #333333
• Kolor aktywnego łącza: #f55c83
• Kolor tła: rgba (255,255,255,0)
• Kolor tła menu rozwijanego: #FFFFFF

Dodaj nową stronę

Niestandardowy CSS strony

Aby główny pasek menu pokrywał się z naszym projektem strony, potrzebujemy trochę kodu CSS. Możesz wybrać, czy chcesz, aby nakładanie się dotyczyło całej witryny, czy tylko konkretnej strony. Jeśli zdecydujesz się dodać go tylko do jednej strony, dodaj następujący kod CSS do ustawień strony:

#main-header {
margin-top: 140px;
}

Dodaj nową sekcję

Kolor tła

Zacznijmy od projektu! Dodaj nową stronę, przełącz się na Visual Builder i dodaj swoją pierwszą sekcję. Otwórz następnie ustawienia sekcji i dodaj „rgba(255,255,255,0.81)” jako kolor tła. Umożliwi to wyświetlenie obrazu tła naszej witryny.

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów i dodaj następujący niestandardowy margines i dopełnienie:

• Margines górny i dolny: 100px
• Margines lewy i prawy: 60px
• Górna wyściółka: 135px
• Dolna wyściółka: 0px

Zaokrąglone rogi

Dodaj również „30px” do każdego z rogów sekcji.

Granica

Następnie dodaj górną ramkę do swojej sekcji:

• Szerokość górnej krawędzi: 35px
• Kolor górnej granicy: #333333

Cień Pudełka

Na koniec dodaj bardzo subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 61px
• Siła rozprzestrzeniania się cieni w pudełku: -13px

Dodaj wiersz nr 1

Struktura kolumny

Czas zacząć dodawać wiersze i moduły! Dodaj pierwszy wiersz, używając dwóch kolumn o jednakowej wielkości.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Dodaj trochę niestandardowego dopełnienia dalej:

• Górna wyściółka: 250px (komputer), 50px (tablet i telefon)
• Dolna wyściółka: 200px (komputer), 100px (tablet), 50px (telefon)
• Dopełnienie kolumny 1 po lewej stronie: 50px (komputer), 0px (tablet i telefon)

Dodaj moduł tekstu tytułu do kolumny 1

Ustawienia tekstu H1

Możemy teraz zacząć dodawać moduły. Zaczniemy od pierwszej kolumny, dodając nowy tytułowy moduł tekstowy.

• Czcionka nagłówka: Poppins
• Grubość czcionki nagłówka: średnia
• Rozmiar tekstu nagłówka: 120px (komputer), 80px (tablet), 58px (telefon)

Dodaj inny kolor do części kopii

Możesz łatwo zmienić kolor słowa w tytule, przełączając się na kartę Tekst i dodając kolor do wybranego słowa za pomocą znaczników span.

Dodaj moduł tekstu opisu do kolumny 1

Ustawienia tekstu

Tuż pod poprzednim modułem tekstowym śmiało dodaj opis modułu tekstowego, korzystając z następujących ustawień tekstu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Regularna
• Rozmiar tekstu: 20px (komputer), 15px (tablet i telefon)
• Wysokość linii tekstu: 2em

Rozstaw

Potrzebujemy dodatkowego marginesu dla tego modułu tekstowego:

• Margines górny i dolny: 50px

Dodaj moduł przycisku do kolumny 1

Ustawienia przycisków

Ostatnim modułem w tej kolumnie jest moduł przycisku. Po dodaniu kopii CTA zmień style przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #FFFFFF
• Kolor gradientu 1: #f45085
• Kolor gradientu 2: #f88c7e
• Kierunek gradientu: 137 stopni
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 40px
• Czcionka przycisku: Poppins
• Waga czcionki przycisku: Regularna
• Styl czcionki: wielkie litery

Rozstaw

Otwórz ustawienia odstępów dalej i dodaj margines i dopełnienie do przycisku:

• Margines dolny: 100px (komputer), 20px (tablet i telefon)
• Górna i dolna wyściółka: 15px
• Wypełnienie lewego i prawego: 50px

Cień Pudełka

Na koniec użyjemy bardzo subtelnego cienia pudełkowego, aby nadać naszej stronie większą głębię:

• Siła rozmycia cieni w pudełku: 55px
• Siła rozprzestrzeniania się cieni w pudełku: -4px
• Kolor cienia: rgba (84,84,84,0.25)

Dodaj moduł obrazu do kolumny 2

Zapisz i prześlij obraz

Druga kolumna zawiera tylko moduł obrazu. Używamy makiety, która jest częścią pakietu Divi's Digital Marketing Layout Pack. Śmiało i zapisz poniższy obraz na swoim komputerze. Po wykonaniu tej czynności dodaj go do modułu obrazu w drugiej kolumnie.

Dodaj wiersz nr 2

Struktura kolumny

Czas dodać drugi rząd! Wybierz dla niego następującą strukturę kolumn:

Kolor tła kolumny 1

Następnie otwórz ustawienia wiersza i dodaj „#FFFFFF” jako kolor tła kolumny 1.

Kopiuj tło gradientowe przycisku

Zaoszczędzimy sobie trochę czasu i skopiujemy gradient, którego już użyliśmy dla modułu przycisku. Aby to zrobić, otwórz moduł przycisku, przejdź do ustawień przycisku, kliknij prawym przyciskiem myszy tło gradientowe i skopiuj je.

Wklej tło gradientowe w kolumnie 2

Następnie wróć do ustawień wiersza i wklej gradientowe tło w drugiej kolumnie.

Kolumna 3 Kolor tła

W trzeciej kolumnie używamy koloru tła „#FFFFFF”.

Rozmiary

Przejdź do sekcji Ustawienia rozmiaru i zmień ustawienia:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 2600px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Potrzebujemy też dodatkowej wyściółki:

• Górna i dolna wyściółka: 0px
• Dopełnienie górnej i dolnej kolumny: 30px

Cień Pudełka

Na koniec użyjemy subtelnego cienia pudełkowego:

• Siła rozmycia cieni w pudełku: 61px
• Siła rozprzestrzeniania się cieni w pudełku: -20px

Dodaj moduł rozmycia nr 1

Wybierz ikonę

W sumie będziemy potrzebować trzech modułów Blurb. Zaczniemy od jednego, a następnie sklonujemy go, aby zaoszczędzić czas. Śmiało i dodaj nowy moduł Blurb do pierwszej kolumny. Po dodaniu treści wybierz wybraną ikonę.

Ustawienia ikon

Zmień odpowiednio ustawienia swojej ikony:

• Kolor ikony: #f55c83
• Umieszczenie ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 88 pikseli (komputer stacjonarny i tablet), 50 pikseli (telefon)

Ustawienia tekstu tytułu

Następnie otwórz ustawienia tekstu tytułu i wprowadź zmiany:

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: Średnia
• Rozmiar tekstu tytułu: 34 piks. (komputer i tablet), 23 piks. (telefon)

Ustawienia tekstu podstawowego

Treść treści również musi zostać zmodyfikowana:

• Czcionka ciała: Poppins
• Waga czcionki ciała: Regularna
• Rozmiar tekstu podstawowego: 16 pikseli (komputer), 14 pikseli (tablet i telefon)
• Wysokość linii ciała: 2em

Rozstaw

Aby stworzyć bardziej estetyczny projekt, dodaj trochę wyściółki:

• Górna wyściółka i dolna wyściółka: 100px
• Wypełnienie lewego i prawego: 50px (komputer i tablet), 10px (telefon)

Clone Blurb Module dwukrotnie i umieść w pozostałych kolumnach

Śmiało i dwukrotnie sklonuj swoje moduły Blurb. Po wykonaniu tej czynności umieść je w pozostałych kolumnach.

Zmień moduł Blurb w kolumnie 2

Zmień kolor ikony

Trzeci Blurb Module nie wymaga żadnych zmian, drugi już jednak. Zacznij od zmiany koloru ikony na biały.

Zmień kolor tekstu

Następnie otwórz Ustawienia tekstu i zmień kolor tekstu na „Jasny”.

Wyłącz ustaloną nawigację

Aby mieć pewność, że główny pasek menu zachowa swoje miejsce w projekcie, musimy również wyłączyć stały pasek nawigacyjny. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress> Divi> Opcje motywu> Wyłącz opcję „Stały pasek nawigacyjny” i zapisz ustawienia .

Zapowiedź

Teraz, gdy wykonaliśmy już wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie włączyć główny pasek menu do ogólnego projektu strony Divi. Takie podejście pomoże Ci stworzyć bardziej spójny wygląd i styl na Twojej stronie. Stworzyliśmy również przykład od podstaw. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!