Jak zmienić tło gradientowe po najechaniu za pomocą Divi

Tworzenie stron internetowych polega na upewnieniu się, że każdy szczegół jest poprawny. Zwracanie uwagi na drobne szczegóły w projekcie szybko zsumuje i podniesie jakość Twojej witryny. Dzięki nowym opcjom najechania Divi możesz bez wysiłku dodawać małe interakcje w swojej witrynie. Opcje aktywowania mają zastosowanie do prawie wszystkich ustawień projektu. Możesz na przykład pośrednio zmienić tło gradientowe po najechaniu kursorem, aby uzyskać ładne przejście. Dokładnie to pokażemy w tym poście na blogu. Oprócz osiągnięcia przejścia gradientowego, stworzymy również wspaniały przykład projektu od podstaw, którego możesz swobodnie używać na dowolnej stronie internetowej, którą tworzysz.

Weźmy się za to!

Zapowiedź

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

Statyczny

Unosić się

Pobierz ilustracje ZA DARMO

Aby położyć swoje ręce na darmowych ilustracjach, które pochodzą z pakietu układów gier wideo, musisz je najpierw 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 i piątek! 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!

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj sekcję #1

Rozstaw

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę lub otworzyć istniejącą i dodać do niej nową zwykłą sekcję. Otwórz ustawienia i dodaj niestandardowy górny i dolny margines.

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

Dodaj wiersz nr 1

Struktura kolumny

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

Kolumna 1 Domyślny kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj następujący domyślny kolor tła do kolumny 1:

• Kolor tła: #e7ffa0

Kolor tła po najechaniu w kolumnie 1

Zmień ten kolor tła po najechaniu myszą.

• Kolor tła: #00020c

Kolumna 1 Tło gradientowe

Dodaj również gradientowy kolor tła do kolumny 1. Zauważysz, że używamy jednego całkowicie przezroczystego koloru. Ten kolor pozwoli na prześwitywanie koloru tła, które z kolei zmienia się po najechaniu myszą.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: rgba (16,0,201,0.8)
• Kolumna 1 Typ gradientu: Liniowy
• Kolumna 1 Kierunek gradientu: 50deg
• Pozycja początkowa kolumny 1: 20%

Kolor tła kolumny 2

Dodaj również kolor tła kolumny 2.

• Kolor tła kolumny 2: #ffffff

Rozmiary

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

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

Rozstaw

Kontynuuj, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 2 Górna wyściółka: 6vw (komputer), 120px (tablet i telefon)
• Kolumna 2 dolna wyściółka: 6vw (komputer), 120px (tablet i telefon)
• Kolumna 2 po lewej stronie: 5vw (komputer), 80px (tablet), 50px (telefon)
• Kolumna 2 po prawej stronie: 5vw (komputer), 80px (tablet), 50px (telefon)

Cień Pudełka

I nadaj rzędowi subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 100px
• Siła rozprzestrzeniania się cieni w pudełku: -10px

Przejścia

Na koniec stworzymy płynne przejście gradientowe tła, zwiększając czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1100 ms

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać moduły! Dodaj moduł obrazu do pierwszej kolumny i prześlij plik „ divi-gradient-background-on-hover-illustration-1.png ”, który znajdziesz w spakowanym folderze, który pobrałeś na początku tego postu.

Tło gradientowe

Przejdź do ustawień tła tego modułu obrazu i dodaj tło gradientowe. Ponownie używamy jednego w pełni przezroczystego koloru, aby umożliwić prześwitywanie innych kolorów.

• Kolor 1: rgba (50 217 255 0,66)
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja końcowa: 57%

Rozstaw

Następnie dodaj do modułu niestandardową górną wyściółkę.

• Górna wyściółka: 14vw

Dodaj moduł tekstu tytułu do kolumny 2

Dodaj zawartość

Do drugiej kolumny! Pierwszym modułem, którego będziemy potrzebować, jest tytułowy moduł tekstowy. Śmiało i dodaj wybraną treść nagłówka.

Ustawienia tekstu nagłówka

Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany.

• Czcionka nagłówka: Abril Fatface
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 4vw (komputer), 60px (tablet), 40px (telefon)

Dodaj moduł tekstu opisu do kolumny 2

Dodaj zawartość

Drugim modułem, którego będziemy potrzebować, jest kolejny moduł tekstowy. Dodaj wybrane treści.

Ustawienia tekstu

Następnie przejdź do ustawień tekstu i zmień orientację tekstu.

• Orientacja tekstu: wyjustuj

Rozmiary

Dostosuj również szerokość w ustawieniach rozmiaru.

• Szerokość: 73% (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

Na koniec dodaj niestandardowy górny i dolny margines do modułu, aby utworzyć białe znaki.

• Górny margines: 2.5vw (komputer), 50px (tablet i telefon)
• Margines dolny: 2.5vw (komputer), 50px (tablet i telefon)

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Trzecim i ostatnim modułem, którego będziemy potrzebować w drugiej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Następnie zmodyfikuj ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1.2vw (komputer), 14px (tablet i telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor gradientu 1: #9ea6ff
• Kolor gradientu 2: rgba (16,0,201,0.8)
• Kierunek gradientu: 78 stopni
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 30px
• Odstępy między przyciskami: -1px
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 40px
• Prawe wypełnienie: 40px

Cień Pudełka

I nałóż subtelny cień pudełkowy na przycisk.

• Siła rozmycia cieni w pudełku: 40px

Dodaj sekcję #2

Rozstaw

Teraz, gdy skończyliśmy pierwszą sekcję, przejdziemy do następnej. Dodaj nową zwykłą sekcję, korzystając z następujących niestandardowych wartości dopełnienia:

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

Dodaj wiersz nr 2

Struktura kolumny

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

Kolor tła kolumny 1

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj następujący kolor tła do kolumny 1:

• Kolor tła kolumny 1: #ffffff

Kolumna 2 Domyślny kolor tła

Dodaj następujący kolor tła do kolumny 2.

• Kolor tła kolumny 2: #ffffff

Kolor tła najechania na kolumnę 2

I zmień ten kolor tła po najechaniu myszą.

• Kolor tła kolumny 2: #3d02ff

Kolumna 2 Tło gradientowe

Dodaj również gradientowe tło do kolumny.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ff7700
• Pozycja początkowa kolumny 2: 20%

Rozmiary

Następnie przejdź do ustawień rozmiaru i wprowadź zmiany.

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

Rozstaw

Kontynuuj, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 1 Górna wyściółka: 6vw (komputer), 120px (tablet i telefon)
• Kolumna 1 dolna wyściółka: 6vw (komputer stacjonarny), 120px (tablet i telefon)
• Kolumna 1 po lewej stronie: 5vw (komputer), 80px (tablet), 50px (telefon)
• Kolumna 1 po prawej stronie: 5vw (komputer), 80px (tablet), 50px (telefon)

Cień Pudełka

Dodaj również subtelny cień do tego wiersza.

• Siła rozmycia cieni w pudełku: 100px
• Siła rozprzestrzeniania się cieni w pudełku: -10px

Przejścia

Na koniec utwórz płynne przejście, zwiększając czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1100 ms

Zduplikowane moduły tekstowe i moduł przycisków rzędu nr 1

Ponieważ mamy już wszystkie moduły, których potrzebujemy w poprzedniej sekcji, zaoszczędzimy czas, klonując je.

Umieść duplikaty w kolumnie 1 rzędu #2

I umieszczenie duplikatów w pierwszej kolumnie nowego wiersza.

Zmień zawartość

Upewnij się, że zmieniłeś zawartość swoich modułów.

Zmień tło gradientowe przycisku

Zmień również tło gradientowe przycisku.

• Kolor 1: #ff653f
• Kolor 2: #0066ff
• Kierunek gradientu: 39 stopni

Moduł klonowania obrazu rzędu nr 2

Klonuj moduł obrazu, który możesz również znaleźć w pierwszej kolumnie poprzedniego wiersza.

Umieść duplikat w kolumnie 2 rzędu #2

I umieść duplikat w drugiej kolumnie nowego wiersza.

Zmień obraz

Zmień obraz na plik ' divi-gradient-background-on-hover-illustration-2.png ', który znajdziesz w spakowanym folderze, który pobrałeś na początku tego postu.

Zmień tło gradientowe

Na koniec zmień gradientowe tło modułu obrazu.

• Kolor 1: rgba (0,2,12,0.66)
• Kolor 2: rgba (255,255,255,0)
• Pozycja końcowa: 57%

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu!

Statyczny

Unosić się

Końcowe przemyślenia

W tym poście pokazaliśmy, jak zmienić tło gradientowe po najechaniu kursorem za pomocą Divi. Stworzyliśmy również wspaniały przykład projektu od podstaw, który wykorzystuje to podejście. Możesz swobodnie korzystać z projektu i ilustracji dla każdego rodzaju witryny, którą tworzysz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!