Jak utworzyć obrócony globalny nagłówek za pomocą kreatora motywów Divi

Odkąd pojawił się Divi Theme Builder, staraliśmy się przeprowadzić Cię przez proces tworzenia własnych globalnych nagłówków. Nadal będziemy to robić, pokazując, jak utworzyć obrócony globalny nagłówek, który pojawia się po lewej stronie Twoich stron i postów. Kolor tła nagłówka jest całkowicie przezroczysty, dzięki czemu treść strony/postu jest widoczna. Upewniliśmy się, że globalny nagłówek pozostaje po lewej stronie podczas przewijania, a także przekształciliśmy menu w wersję przyjazną dla urządzeń mobilnych. W tym samouczku dotyczącym przypadków użycia pokażemy, jak odtworzyć projekt od zera, a także będziesz mógł bezpłatnie pobrać szablonowy plik JSON!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon obróconego globalnego nagłówka ZA DARMO

Aby położyć ręce na obróconym szablonie globalnego nagłówka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Przejdź do Divi Theme Builder i zacznij budować globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na swojej stronie WordPress.

Zacznij budować globalny nagłówek

Kliknij „Dodaj globalny nagłówek” i wybierz „Zbuduj globalny nagłówek”.

2. Zacznij budować obrócony globalny nagłówek boczny

Dodaj nową sekcję

Kolor tła

Po wejściu do edytora szablonów możesz otworzyć sekcję, która już tam jest, i zmienić kolor tła na różnych rozmiarach ekranu.

• Kolor tła: rgba(0,0,0,0) (komputer), #FFFFFF (tablet i telefon)

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru sekcji.

• Szerokość: 5vw (komputer stacjonarny), 100% (tablet i telefon)
• Minimalna wysokość: 100vw (komputer stacjonarny), auto (tablet i telefon)

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw

Cień Pudełka

Następnie przejdź do ustawień cienia pudełka i dodaj niestandardowy cień pudełka na różnych rozmiarach ekranu.

• Pozycja pozioma cienia pudełka: 32px (komputer), 0px (tablet i telefon)
• Siła rozmycia cieni w pudełku: 49px
• Siła rozprzestrzeniania się cieni w pudełku: 0px (komputer), 19px (tablet i telefon)
• Kolor cienia: rgba(0,0,0,0.12)

Domyślny główny element

Upewnimy się również, że obrócony globalny nagłówek pozostanie po lewej stronie, dodając kilka wierszy kodu CSS do głównego elementu sekcji.

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

Unieś główny element

Upewnij się, że dodałeś te same wiersze kodu CSS również do głównego elementu najechania w sekcji.

position: fixed;
top: 0;

Widoczność domyślna

Następnie zwiększ indeks z w ustawieniach widoczności.

• Indeks Z: 99999

Widoczność najechania

Upewnij się, że ta sama wartość jest stosowana po najechaniu myszą.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Po skonfigurowaniu ustawień sekcji kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

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

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

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Ustawienia kolumny

Główny element (tablet i telefon)

Na tablecie i telefonie zamierzamy uzyskać zupełnie inny wygląd i styl. Umieścimy obok siebie trzy różne moduły. Aby to zrobić, musimy dodać trochę kodu CSS. Otwórz ustawienia kolumny, przejdź do zakładki zaawansowane i wstaw następujące wiersze kodu CSS do głównego elementu tabletu i telefonu:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

Dodaj moduł obrazu do kolumny

Prześlij logo

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł obrazu. Prześlij wybrany przez siebie półprzezroczysty plik obrazu logo.

Rozmiary

Następnie przejdź do zakładki projektowania i zmień szerokość w różnych rozmiarach ekranu.

• Szerokość: 4vw (komputer stacjonarny), 12vw (tablet), 16vw (telefon)

Skala transformacji

Zwiększ rozmiar modułu, modyfikując następnie ustawienia skali transformacji.

• Po prawej: 170% (komputer stacjonarny), 100% (tablet i telefon)
• Dół: 170% (komputer stacjonarny), 100% (tablet i telefon)

Przekształć Tłumacz

I przesuń moduł w prawo, dodając wartość tłumaczenia dolnego przekształcenia na pulpicie.

• Dół: 1vw (komputer), 0vw (tablet i telefon)

Dodaj moduł menu do kolumny

Wybierz menu

Następnym modułem, którego potrzebujemy, jest moduł menu. Wybierz wybrane menu.

Usuń kolor tła

Następnie usuń kolor tła modułu.

Układ

Następnie przejdź do zakładki projekt i zmień ustawienia układu.

• Styl: wyśrodkowany
• Menu rozwijane Kierunek: w dół

Domyślny tekst menu

Zmodyfikuj również ustawienia tekstu menu.

• Kolor aktywnego łącza: #cecece
• Czcionka menu: Montserrat
• Grubość czcionki menu: pogrubiona
• Kolor tekstu menu: #000000
• Rozmiar tekstu w menu: 0,9vw (komputer), 2vw (tablet), 2,5vw (telefon)

Tekst menu podręcznego

Zmień kolor tekstu menu po najechaniu myszą.

• Kolor tekstu menu: #afafaf

Menu rozwijane

Wprowadzamy też pewne zmiany w ustawieniach menu rozwijanego.

• Kolor linii menu rozwijanego: #000000
• Kolor tekstu menu rozwijanego: #000000

Ikony

Następnie zmień kolor ikony menu hamburgera.

• Kolor ikony menu hamburgerów: #000000

Rozstaw

I dodaj kilka niestandardowych wartości marginesów dla różnych rozmiarów ekranu.

• Górny margines: 18vw (komputer stacjonarny), 0vw (tablet i telefon)
• Margines dolny: 18vw (komputer stacjonarny), 0vw (tablet i telefon)
• Lewy margines: -13vw (komputer), 0vw (tablet i telefon)
• Prawy margines: -13vw (komputer stacjonarny), 0vw (tablet i telefon)

Przekształć Obróć

Teraz, aby stworzyć efekt obrócony, pobawimy się wartościami obrotu transformat modułu.

• Po lewej: 270 stopni (komputer stacjonarny), 0 stopni (tablet i telefon)

Dodaj moduł śledzenia mediów społecznościowych do kolumny

Dodaj sieci społecznościowe

Przejdź do modułu Social Media Follow, który jest kolejnym i ostatnim modułem, który musimy uzupełnić nasz obrócony globalny nagłówek. Dodaj wybrane sieci społecznościowe.

Zresetuj style sieci społecznościowych

Kontynuuj, resetując ustawienia każdej sieci społecznościowej indywidualnie. Pomoże nam to pozbyć się ich koloru tła.

Wyrównanie

Następnie przejdź do karty projektu modułu i zmień wyrównanie modułu na różnych rozmiarach ekranu.

• Wyrównanie: w lewo (komputer stacjonarny), w prawo (tablet i telefon)

Ustawienia ikon

Na koniec zmień również ustawienia ikon.

• Kolor ikony: #000000
• Użyj niestandardowego rozmiaru ikony: Tak
• Rozmiar czcionki ikony: 2.1vw

3. Zapisz zmiany Konstruktora i zobacz wyniki

Po ukończeniu wszystkich modułów możesz zapisać szablon, wyjść z Divi Theme Builder i wyświetlić wynik na swojej stronie!

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć obrócony globalny nagłówek za pomocą nowego Theme Buildera Divi. Przekształciliśmy również pasek menu w wersję wysoce przyjazną dla urządzeń mobilnych. O ile nie wybierzesz inaczej, utworzony przez nas globalny nagłówek pojawi się we wszystkich Twoich postach i stronach. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.