Musisz utworzyć globalny nagłówek dla swojego strona internetowa z Divim?
Globalny nagłówek pojawi się wszędzie na twoim Witryna internetowa, chyba że do strony lub posta przypisano inny nagłówek.
Zacznijmy!
badanie
Oto podgląd globalnego nagłówka, który zamierzamy zaprojektować.
Skonfiguruj swoje menu główne
Zacznij od utworzenia menu w ustawieniach wyglądu witryny WordPress.
Uzyskaj dostęp do opcji Theme Builder w Divi
W opcjach Motyw Divi, kliknij Kreator motywów. Tam zauważysz a szablon strony internetowej domyślnie.
Dodaj i utwórz globalny nagłówek
Le szablon strony internetowej default to miejsce, w którym możesz rozpocząć tworzenie niestandardowego globalnego nagłówka, globalnej treści i globalnej stopki. Kliknij „Dodaj globalny nagłówek” i kontynuuj, klikając „Utwórz globalny nagłówek”, aby rozpocząć proces.
Ustawienia sekcji
zaklejania
Otwórz ustawienia sekcji, które znajdziesz na stronie, w zakładce Styl zmień wymiary na różnych rozmiarach ekranu.
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 1280px (dla PC i tabletu), 100% (dla urządzeń mobilnych)
rozstaw
Usuń wszystkie górne i dolne marginesy wewnętrzne
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Granica
Teraz dodaj promień obramowania do lewego i prawego dolnego narożnika sekcji.
- Dolny lewy: 50px
- Dolny prawy: 50px
Pole cienia
Dodajmy też subtelny cień pudełkowy.
- Siła rozmycia cieni w pudełku: 60px
- Kolor czcionki napisów: rgba(0,0,0,0.13)
widoczność
- Przepełnienie poziome: Widoczne
- Przepełnienie pionowe: Widoczne
Poświęć nową linię na nagłówek
Teraz, gdy zakończyliśmy ogólne ustawienia sekcji, możemy zacząć dodawać wiersze. W sumie będziemy potrzebować dwóch linii; jeden, który jest dedykowany do nagłówka i taki, który umożliwia wyświetlanie elementów menu. Zaczniemy od nagłówka, dodając nowy wiersz przy użyciu następującej struktury kolumn:
Ustawienia linii
Ustawienia tła
Bez dodawania żadnych modułów do linii otwórz ustawienia linii i zmień kolor tła.
- Tło: #38383F
zaklejania
Następnie zmodyfikuj parametry rozmiaru linii.
- Użyj niestandardowej szerokości rynny: TAK
- Rozstaw kolumn: 1
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
Przedstawiamy
Teraz upewnijmy się, że kolumny pojawiają się obok siebie na mniejszych ekranach, dodając ten wiersz kodu CSS do głównego elementu wiersza.
01
display: flex;
Dodaj moduł obrazu w kolumnie 1
Pobierz logo
Po zakończeniu ustawień wierszy czas zacząć dodawać moduły. Dodaj moduł obrazu do kolumny 1 i prześlij swoje logo.
wyrównanie
Przejdź do zakładki Styl i wyrównaj obraz do lewej.
zaklejania
Zmodyfikuj także szerokość modułu.
rozstaw
Dodaj również niestandardowe wartości marginesów.
Dodaj moduł śledzenia mediów społecznościowych w kolumnie 2
Dodaj sieci społecznościowe
Przejdźmy do drugiej kolumny. Tam przyda nam się moduł śledzenia mediów społecznościowych. Dodaj wybrane sieci społecznościowe. Możesz dodać tyle mediów społecznościowych, ile chcesz.
Kolor tła sieci społecznościowej
Następnie otwórz każdą sieć społecznościową indywidualnie i zmień kolor tła na całkowicie przezroczysty.
- Kolor tła: rgba (0,0,0,0)
wyrównanie
Wróć do normalnych ustawień modułu, a następnie zmień pełne wyrównanie modułu.
ikona
Zmień również ustawienia ikon.
- Kolor ikony: #FFFFFF
- Użyj niestandardowego rozmiaru ikony: Tak
- Rozmiar czcionki ikony: 16px (komputer i tablet), 12px (telefon)
rozstaw
Dodaj górny margines.
Dodaj moduł przycisku w kolumnie 3
Przejdź do trzeciej kolumny i dodaj moduł Button zawierający wybrany przez Ciebie tekst.
wyrównanie
Zmień wyrównanie przycisków na karcie Styl.
Ustawienia przycisków
Dostosuj ustawienia przycisków w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 12px (komputer), 10px (tablet), 8px (telefon)
- Kolor tekstu przycisku: #ffffff
- Przycisk tła: #ffae25
- Szerokość obramowania przycisku: 0 pikseli
- Przycisk promienia obramowania: 0 pikseli
- Odstępy między literami przycisków: 5 px (komputer), 3 px (tablet i telefon)
- Przycisk Czcionka: Otwórz Brak
- Przycisk miękkiego światła: pogrubiony tekst
- Kopiuj styl przycisku: TT
rozstaw
Dostosuj wartości marginesów.
Poświęć nową linię na pasek menu
Po wypełnieniu wiersza poświęconego globalnemu nagłówkowi możesz dodać kolejny wiersz tuż poniżej.
Ustawienia linii
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii i zmień ustawienia rozmiaru w zakładce Styl.
rozstaw
Następnie usuń wszystkie dolne i górne marginesy.
Dodaj moduł Menu do kolumny
Wybierz menu
Następnie dodaj moduł Menu do kolumny i wybierz menu utworzone w pierwszej części tego samouczka.
Usposobienie
Przejdź do zakładki Styl i zmień ustawienia układu w następujący sposób:
Połączenia
Zmień także kolor aktywnego łącza na karcie Styl.
- Kolor aktywnego linku: #ffae25
Rozwijane menu
Zrób to samo dla koloru linii menu rozwijanego w ustawieniach menu rozwijanego.
- Kolor wiersza rozwijanego: #ffae25
ikona
- Kolor ikony menu hamburgerów: #ffae25
Tekst menu
Z ustawieniami tekstu menu.
- Czcionka menu: Prata
- Kolor tekstu menu: #000000
Niech nagłówek i pasek menu pozostaną na górze
Otwórz ustawienia sekcji
Po wypełnieniu drugiej linii wszystko, co musisz zrobić, to upewnić się, że sekcja pozostaje na górze naszych stron i postów. Aby to zrobić, ponownie otworzymy ustawienia sekcji.
Dodaj niestandardowy CSS do głównego elementu
Następnie przejdziemy do zakładki zaawansowane i dodamy kilka linijek kodu CSS do głównego elementu sekcji.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Zapisz opcje globalnego nagłówka i kreatora motywów
Po ukończeniu całego projektu globalnego nagłówka pamiętaj, aby zapisać projekt przed wyjściem z układu szablonu. Gdy wyjdziesz z układu szablonu, zapisz wszystkie zmiany w konstruktorze motywów i gotowe!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni wynikowi.
Wnioski
W tym artykule pokazaliśmy, jak utworzyć niestandardowy globalny nagłówek za pomocą nowego narzędzia do tworzenia motywów Divi. W tym samouczku pokazano, jak łatwo można utworzyć piękne nagłówki i zastosować je w całości Witryna internetowa lub określone niestandardowe typy postów.
Mamy nadzieję, że pomoże Ci to w dostosowaniu Twojej witryny za pomocą Theme Builder.
Jeśli masz jakieś pytania lub sugestie, zostaw nam komentarz w sekcja komentarzy poniżej.
...
