Jak stworzyć piękne przejścia w tle gradientu z Divi

Ostatnio do Divi dodano kilka dodatkowych opcji najechania, co pozwala tworzyć jeszcze fajniejsze efekty bez konieczności dotykania jednej linii kodu. Możesz teraz na przykład tworzyć niesamowite przejścia w tle gradientu. Łącząc gradienty kolumn, rzędów i przekrojów, można uzyskać niepowtarzalne projekty. W tym samouczku pokażemy Ci dokładnie, jak to zrobić. Zaczniemy od kilku ogólnych kroków. Gdy to zrobimy, skupimy się na trzech przykładach projektowych indywidualnie. Będziesz także mógł bezpłatnie pobrać plik JSON!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na trzy różne przykłady, które odtworzymy w tym samouczku.

Przykład 1

Przykład #2

Przykład #3

Pobierz sekcje bohaterów ZA DARMO

Subskrybuj nasz kanał YouTube

Aby położyć ręce na tych darmowych sekcjach bohaterów, najpierw musisz je pobrać za pomocą poniższego przycisku. 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!

Ogólne kroki

Dodaj nową sekcję

Rozstaw

Zacznijmy od kilku ogólnych kroków. Dodaj nową sekcję do strony, nad którą pracujesz, i usuń wszystkie domyślne dopełnienie. Usunięcie całego górnego i dolnego wypełnienia pomoże nam później połączyć gradientowe tła kolumn, wierszy i sekcji.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

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

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H1

Zacznijmy dodawać moduły! Pierwszym, którego potrzebujemy, jest moduł tekstowy z zawartością H1.

Ustawienia tekstu H1

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Montserrat
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 3vw (komputer), 6vw (tablet i telefon)
• Odstępy między literami nagłówka: 0,7vw

Rozmiary

Następnie otwórz ustawienia rozmiaru i zmień szerokość wraz z wyrównaniem modułu.

• Szerokość: 48% (komputer stacjonarny), 60% (tablet i telefon)
• Wyrównanie modułu: Środek

Rozstaw

Uzupełnij projekt modułu, dodając górny margines.

• Górny margines: 10vw

Dodaj moduł dzielnika do kolumny

Widoczność

Do następnego modułu! Dodaj moduł dzielnika i upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii.

• Kolor linii: #000000

Rozmiary

Przejdź do ustawień rozmiaru i zastosuj następujące ustawienia:

• Waga rozdzielacza: 0.1vw
• Szerokość: 10% (komputer), 16% (tablet), 25% (telefon)
• Wyrównanie modułu: Środek

Rozstaw

Dodaj również niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Dolna wyściółka: 2vw (komputer), 4vw (tablet), 6vw (telefon)

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Dodaj dowolną treść akapitu.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Wyrównanie tekstu: wyjustuj
• Wysokość linii tekstu: 2,3 em

Rozmiary

Następnie zmodyfikuj szerokość i wyrównanie modułu w ustawieniach rozmiaru:

• Szerokość: 30% (komputer stacjonarny), 54% (tablet), 70% (telefon)
• Wyrównanie modułu: Środek

Dodaj moduł przycisku do kolumny

Dodaj kopię

Następnym i ostatnim modułem, który potrzebujemy w kolumnie, jest moduł 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

Zmodyfikuj również ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0.8vw (komputer), 2vw (tablet), 2.8vw (telefon)
• Kolor tekstu przycisku: #000000
• Szerokość obramowania przycisku: 1px
• Promień obramowania przycisku: 1px
• Czcionka przycisku: Montserrat

Rozstaw

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

• Górny margines: 2vw (komputer stacjonarny), 8vw (tablet i telefon)
• Dolny margines: 10vw
• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)
• Prawa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)

Klonuj sekcję dwa razy

Po ukończeniu sekcji możesz ją sklonować dwukrotnie; po jednym dla każdego przykładu.

Odtwórz przejście gradientowe tła nr 1

Sekcja

Domyślne tło gradientowe

Zacznijmy tworzyć pierwsze przejście najechania! Otwórz ustawienia sekcji i dodaj następujące domyślne tło gradientowe:

• Kolor 1: #d1d1ff
• Kolor 2: #f7f7f7
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Unosić tło gradientowe

Zmodyfikuj tło gradientowe po najechaniu myszą.

• Kolor 1: #f7f7f7
• Kolor 2: #ffc1c7
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Wiersz

Domyślne tło gradientowe

Otwórz następnie ustawienia wiersza i zastosuj następujące domyślne ustawienia gradientu tła:

• Kolor 1: #7032ff
• Kolor 2: rgba (255,255,255,0)
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 10%
• Pozycja końcowa: 10%

Unosić tło gradientowe

Zmodyfikuj tło gradientowe po najechaniu myszą.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ff324a
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 90%
• Pozycja końcowa: 90%

Odtwórz przejście w tle gradientu nr 2

Sekcja

Domyślne tło gradientowe

Przejdźmy do drugiego przykładu! Otwórz ustawienia sekcji i dodaj następujące tło gradientowe:

• Kolor 1: #f7f7f7
• Kolor 2: #eceaff
• Kierunek gradientu: 156 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Unosić tło gradientowe

Dodaj inne tło gradientowe po najechaniu myszą:

• Kolor 1: #ffeaec
• Kolor 2: #f7f7f7
• Kierunek gradientu: 204 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Wiersz

Domyślne tło gradientowe

Następnie otwórz ustawienia wiersza i zastosuj następujące ustawienia gradientu tła:

• Kolor 1: #a932ff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny lewy
• Pozycja startowa: 14%
• Pozycja końcowa: 14%

Unosić tło gradientowe

Zmień odpowiednio tło gradientu wiersza po najechaniu kursorem:

• Kolor 1: #ff324a
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny lewy
• Pozycja startowa: 14%
• Pozycja końcowa: 14%

Kolumna

Domyślne tło gradientowe

Przejdź do ustawień kolumny i dodaj następujące tło gradientowe:

• Kolor 1: #a932ff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny prawy
• Pozycja startowa: 14%
• Pozycja końcowa: 14%

Unosić tło gradientowe

Zmodyfikuj tło gradientu kolumny po najechaniu myszą:

• Kolor 1: #ff324a
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dolny prawy
• Pozycja startowa: 14%
• Pozycja końcowa: 14%

Odtwórz przejście gradientu tła #3

Sekcja

Domyślne tło gradientowe

Przejdźmy do następnego i ostatniego przykładu! Otwórz ustawienia sekcji i zastosuj następujące tło gradientowe:

• Kolor 1: #ffc1c7
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 45%
• Pozycja końcowa: 45%

Unosić tło gradientowe

Zmodyfikuj tło gradientowe przekroju po najechaniu myszą.

• Kolor 1: #ffc1c7
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w lewo
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Wiersz

Domyślne tło gradientowe

Następnie otwórz ustawienia wiersza i dodaj następujące tło gradientowe:

• Kolor 1: #d3dfff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 45%
• Pozycja końcowa: 45%

Unosić tło gradientowe

Zmodyfikuj odpowiednio tło gradientowe:

• Kolor 1: #d3dfff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w prawo
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Kolumna

Domyślne tło gradientowe

Na koniec dodaj tło gradientowe kolumny i gotowe!

• Kolor 1: #f7f7f7
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 41%
• Pozycja końcowa: 41%

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi wszystkich trzech przykładów, które odtworzyliśmy w tym samouczku!

Przykład 1

Przykład #2

Przykład #3

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie korzystać z dodatkowych opcji najeżdżania w tle gradientu Divi, aby tworzyć piękne przejścia najechania kursorem tylko z wbudowanymi opcjami Divi. Zaczęliśmy od kilku ogólnych kroków i kontynuowaliśmy, odtwarzając każdy z trzech przykładów. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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.