Jak animować swój globalny nagłówek za pomocą Divi

Twój nagłówek jest jedną z najważniejszych części Twojej witryny. Łączy Twoje strony, posty i wezwania do działania. Jest to również jedna z rzeczy, których użytkownicy automatycznie szukają, więc nie tracą czasu na szukanie tego, czego szukają. Jeśli szukasz sposobu na podkreślenie swojego nagłówka, spodoba ci się ten post. Pokażemy Ci, jak animować swój niestandardowy globalny nagłówek za pomocą Kreatora motywów Divi. Możliwości są nieograniczone, ale pokażemy Ci dwa przykłady animacji, od których możesz zacząć od razu. Będziesz mógł również bezpłatnie pobierać pliki JSON!

Weźmy się za to.

Zapowiedź

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

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Pobierz animowany globalny nagłówek ZA DARMO

Aby położyć swoje ręce na darmowym animowanym globalnym nagłówku, 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!

Subskrybuj nasz kanał YouTube

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 w swoim zapleczu WordPress.

Zbuduj globalny nagłówek od podstaw

Kliknij „Dodaj globalny nagłówek” i kontynuuj, wybierając „Zbuduj globalny nagłówek”.

2. Zbuduj globalny projekt bloku nagłówka

Ustawienia sekcji

Rozstaw

Gdy znajdziesz się w edytorze szablonów, możesz rozpocząć tworzenie globalnego nagłówka. Upewniamy się, że mamy projekt „blokowy”, abyśmy mogli później dodać animacje do dwóch różnych kontenerów; kolumna + moduł. Otwórz sekcję, którą możesz zauważyć w edytorze szablonów i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Cień Pudełka

Następnie dodaj cień do pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (13,60,216,0.24)

Indeks Z

I upewnij się, że zwiększyłeś również indeks z sekcji na karcie Zaawansowane. Zapewni to, że globalna treść nagłówka pojawi się na górze całej zawartości strony/postu.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Widoczność

Upewnij się, że przepełnienia wiersza również są „widoczne”.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Ustawienia kolumn (wszystkie trzy)

Kolor tła

Po skonfigurowaniu ustawień wierszy musisz również nadać styl kolumnom. Otwórz każdą z kolumn i odpowiednio zmień ich kolor tła:

• Kolor tła kolumny 1: #efefef
• Kolor tła kolumny 2: #ffcb0f
• Kolor tła kolumny 3: #2848ff

Rozstaw

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

• Górna wyściółka: 0.5vw (komputer stacjonarny), 1vw (tablet i telefon)
• Dolna wyściółka: 0,5vw (komputer stacjonarny), 1vw (tablet i telefon)

Główny element

Aby upewnić się, że cała zawartość kolumny jest wyśrodkowana w pionie, dodamy trzy wiersze kodu CSS do głównego elementu każdej kolumny.

display: flex;
flex-direction: column;
justify-content: center;

Kolumna 1 Indeks Z

Na koniec otwórz ustawienia kolumny 1 i zwiększ indeks z w ustawieniach widoczności.

• Indeks Z: 10

Dodaj moduł menu do kolumny 1

Wybierz menu

Czas dodać moduły, zaczynając od modułu menu w kolumnie 1. Wybierz żądane menu.

Prześlij logo

Następnie prześlij swoje logo.

Usuń tło

Kontynuuj, usuwając kolor tła modułu.

Układ

Przejdź do karty projektu i upewnij się, że do układu mają zastosowanie następujące ustawienia:

• Styl: wyrównany do lewej
• Menu rozwijane Kierunek: w dół

Ustawienia tekstu menu

Następnie dostosuj ustawienia tekstu:

• Czcionka menu: Montserrat
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 0,7vw (komputer), 2vw (tablet), 3vw (telefon)

Rozwijane ustawienia menu

Wraz z ustawieniami menu rozwijanego.

• Kolor linii menu rozwijanego: #ffffff

Ustawienia ikon

I zmień też kolor ikony menu hamburgera.

• Kolor ikony menu Hamburger: #2848ff

Rozmiary

Kontynuuj, zmieniając maksymalną szerokość logo na różnych rozmiarach ekranu.

• Maksymalna szerokość logo: 6vw (komputer stacjonarny), 9vw (tablet), 13vw (telefon)

Rozstaw

I uzupełnij ustawienia modułu, dodając trochę lewego i prawego marginesu.

• Lewy margines: 2vw
• Prawy margines: 2vw

Dodaj moduł kodu do kolumny 1

Wstaw kod CSS dla responsywności VW

Teraz w module menu użyliśmy jednostki szerokości okienka ekranu dla naszych wartości rozmiaru tekstu i odstępów. Zrobiliśmy to, aby upewnić się, że możesz umieścić do 8 elementów menu na różnych rozmiarach ekranu pulpitu, bez dzielenia ich na dwie linie. Musimy upewnić się, że przestrzeń między pozycjami menu jest również tworzona za pomocą jednostki vw. Aby to zrobić, dodamy moduł kodu do kolumny 1 i wstawimy następujące wiersze kodu CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

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

Dodaj sieci społecznościowe

W następnej kolumnie, tam, będziemy potrzebować modułu śledzącego w mediach społecznościowych. Dodaj wybrane sieci społecznościowe.

Resetuj style sieci społecznościowych indywidualnie

Kontynuuj, resetując ustawienia każdej sieci.

Wyrównanie

Uzupełnij ustawienia modułu, zmieniając wyrównanie modułu.

• Wyrównanie modułu: Środek

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

Przejdź do następnej i ostatniej kolumny. Tam będziemy potrzebować tylko modułu przycisku. Dodaj wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Uzupełnij ustawienia modułu, stylizując przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 1.2vw (tablet), 2vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 0px
• Czcionka przycisku: Montserrat
• Grubość czcionki przycisku: Ultra Bold
• Styl czcionki przycisku: wielkie litery

3. Dodaj pasującą animację do elementów

Kombinacja animacji globalnego nagłówka nr 1

Animacja kolumny 1

Teraz, gdy zbudowaliśmy globalny nagłówek, czas dodać animacje! Aby odtworzyć pierwszą animację, otwórz ustawienia kolumny 1 i dodaj następującą animację:

• Styl animacji: Zoom
• Kierunek animacji: w górę
• Początkowe krycie animacji: 100%

Kolumna 2 Animacja

Dodaj następujące ustawienia animacji do kolumny 2 dalej:

• Styl animacji: Zoom
• Kierunek animacji: w dół
• Opóźnienie animacji: 500 ms
• Początkowe krycie animacji: 100%

Kolumna 3 Animacja

Uzupełnij ustawienia kolumny, przypisując następującą animację do kolumny 3:

• Styl animacji: Zoom
• Kierunek animacji: w górę
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%

Animacje modułów (wszystkie trzy moduły)

Po skonfigurowaniu ustawień kolumn otwórz każdy z modułów osobno i użyj dla nich następującej animacji:

• Styl animacji: zanikanie
• Opóźnienie animacji: 1500 ms

Kombinacja animacji globalnego nagłówka nr 2

Animacja kolumny 1

Chcesz zamiast tego odtworzyć drugi zestaw animacji? Otwórz ustawienia kolumny 1 i dodaj następującą animację:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Początkowe krycie animacji: 100%

Kolumna 2 Animacja

Użyj następujących ustawień animacji dla kolumny 2 dalej:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Opóźnienie animacji: 500 ms
• Początkowe krycie animacji: 100%

Kolumna 3 Animacja

I uzupełnij ustawienia kolumny, stosując następujące ustawienia animacji do kolumny 3:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%

Animacje modułów (wszystkie trzy moduły)

Następnie otwórz każdy moduł osobno i dodaj następującą animację:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Opóźnienie animacji: 1500 ms

4. Zapisz zmiany Konstruktora i zobacz wyniki

Po zakończeniu ustawień animacji możesz zapisać globalny nagłówek, wyjść z Kreatora motywów i wyświetlić wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni przykładom na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak animować globalny nagłówek za pomocą wbudowanych opcji Divi i Theme Buildera. To świetny sposób na zwrócenie uwagi na nagłówek Twojej witryny. Dzięki wbudowanym opcjom animacji Divi możliwości są nieograniczone. Aby pomóc Ci zacząć, pokazaliśmy Ci dwa różne przykłady. Udało Ci się również pobrać pliki JSON za darmo!

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.