Czy chciałbyś mieć gradient tła w? Divi to się zmienia po najechaniu?
Tworzenie stron internetowych polega na upewnieniu się, że każdy szczegół jest poprawny. Zwracanie uwagi na drobne szczegóły Twojego projektu szybko podniesie jakość Twojego Witryna internetowa.
Dzięki nowym opcjom najechania Divi, możesz łatwo dodawać małe interakcje na swoim Witryna internetowa. Opcje aktywowania mają zastosowanie do prawie wszystkich parametrów projektowych. Możesz na przykład pośrednio zmienić tło gradientowe po najechaniu kursorem, aby stworzyć ładne przejście.
Dokładnie to pokażemy w tym samouczku. Oprócz przejścia gradientu, stworzymy od podstaw oszałamiający przykład projektu, który będziesz mógł swobodnie wykorzystać do dowolnego rodzaju Witryna internetowa które tworzysz.
Chodźmy!
badanie
Zanim zagłębimy się w samouczek, przyjrzyjmy się efektowi końcowemu.
Zacznijmy projektować z Divi
Zobacz też: Divi: Jak stworzyć responsywny suwak akordeonu
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 niestandardowe górne i dolne marginesy.
- Dopełnienie (góra i dół): 100px
Dodaj wiersz 1
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
Domyślny kolor tła (pulpit) kolumny 1
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj następujący domyślny kolor tła do kolumny 1:
- Tło (komputer): #e7ffa0
Kolor tła kolumny 1 po najechaniu myszą
Zmień ten kolor tła po najechaniu myszą.
- Tło: #00020c
Gradient tła kolumny 1
Dodaj również gradientowy kolor tła do kolumny 1. Zauważ, że używamy całkowicie przezroczystego koloru. Ten kolor pozwoli prześwitywać kolor tła, który z kolei zmienia się po najechaniu myszą.
- Kolor 1 (20%): rgba (255,255,255,0)
- Kolor 2 (100%): rgba (16,0,201,0.8)
- Typ gradientu: liniowy
- Kierunek gradientu: 50 stopni
Kolor tła kolumny 2
Dodaj również kolor tła do kolumny 2.
- Tło: #ffffff
zaklejania
Następnie przejdź do zakładki Wnętrze i zmień ustawienia rozmiaru w opcji Dobór.
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 2000px
rozstaw
Kontynuuj, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.
- Dopełnienie (góra i dół): 0px
Odstępy (kolumna 2)
- Wypełnienie (góra i dół): 6vw (komputer), 120px (tablet i telefon)
- Dopełnienie (lewy i prawy): 5vw (komputer), 80px (tablet), 50px (telefon)
Cień Pudełka
A także nadaj rzędowi subtelny 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 w tle, zwiększając czas trwania przejścia w zakładce Zaawansowane.
- Czas trwania przejścia: 1100ms
Dodaj moduł obrazu do kolumny 1
Prześlij obraz
Czas zacząć dodawać moduły! Dodaj moduł obrazu do pierwszej kolumny.
Tło gradientowe
Przejdź do ustawień tła tego modułu obrazu i dodaj tło gradientowe. Ponownie używamy całkowicie przezroczystego koloru, aby umożliwić prześwitywanie innych kolorów.
- Kolor 1 (57%): rgba (50,217,255,0.66 XNUMX XNUMX XNUMX)
- Kolor 2 (100%): rgba (255,255,255,0 XNUMX XNUMX XNUMX)
- Typ gradientu: Okrągły
- Pozycja gradientu: górna
rozstaw
Następnie dodaj do modułu niestandardową górną wyściółkę.
- Wyściółka (góra): 14vw
Dodaj moduł tekstowy do kolumny 2
Dodaj treść
Przejdźmy do drugiej kolumny! Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy tytułu. Śmiało, dodaj a treść tytuł do wyboru.
Ustawienia tekstu nagłówka
Następnie przejdź do ustawień tekstu nagłówka i wprowadź zmiany.
- Czcionka: Abril Fatface
- Kolor tekstu: #000000
- Rozmiar tekstu: 4 vw (komputer), 60 px (tablet), 40 px (telefon)
Dodaj drugi moduł tekstowy do kolumny 2
Dodaj treść
Drugim modułem, którego będziemy potrzebować, jest kolejny moduł tekstowy. Dodaj trochę treść z wyboru.
Ustawienia tekstu
Następnie przejdź do ustawień tekstu i zmień wyrównanie tekstu.
- Wyrównanie tekstu: wyjustowane
zaklejania
Dostosuj również szerokość w ustawieniach rozmiaru.
- Szerokość: 73% (komputer stacjonarny), 100% (tablet i telefon)
rozstaw
Na koniec dodaj niestandardowe górne i dolne marginesy do modułu, aby utworzyć spacje.
- Margines (góra i dół): 2,5 vw (komputer), 50 pikseli (tablet i telefon)
Dodaj moduł przycisku do kolumny 2
Dodaj opis
Trzecim i ostatnim modułem, który będziemy potrzebować w drugiej kolumnie, jest moduł Button. Dodaj wybraną kopię.
Ustawienia przycisków
Następnie zmień ustawienia przycisków.
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku: 1,2 vw (komputer stacjonarny), 14 pikseli (tablet i telefon)
- Kolor tekstu przycisku: #ffffff
- Gradient zatrzymuje się 1 (0%): #9ea6ff
- Przystanki gradientu 2 (100%): rgba (16,0,201,0.8)
- Kierowanie: 78 stopni
- Szerokość obramowania przycisku: 0 pikseli
- Promień graniczny: 30px
- Odstępy między literami: -1px
- Grubość czcionki: Ultra Bold
- Styl czcionki: TT - (wielkie litery)
rozstaw
Dodaj także niestandardowe wartości wypełnienia.
- Dopełnienie (góra i dół): 10px
- Dopełnienie (lewy i prawy): 40px
Cień Pudełka
I nałóż subtelny cień pudełkowy na przycisk.
- Siła rozmycia cieni w pudełku: 40px
Czytaj także: Jak dostosować moduł „Odliczanie czasu” za pomocą GIF
Dodaj sekcję # 2
rozstaw
Teraz, gdy zakończyliśmy pierwszą sekcję, przejdziemy do następnej. Dodaj nową zwykłą sekcję, korzystając z następujących niestandardowych wartości dopełnienia:
- Dopełnienie (góra i dół): 100px
Dodaj wiersz do dwóch kolumn
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
Tło kolumny 1
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj następujący kolor tła do kolumny 1:
- Tło: #ffffff
Tło kolumny 2 (komputer)
Dodaj następujący kolor tła do kolumny 2.
- Tło (komputer): #ffffff
Kolor tła kolumny 2 po najechaniu myszą
I zmień ten kolor tła po najechaniu myszą.
- Tło (najechanie): #3d02ff
2-kolumnowe tło gradientowe
Dodaj również gradientowe tło do kolumny.
- Gradient zatrzymuje 1 (20%): rgba (255,255,255,0)
- Gradient zatrzymuje się 2 (100%): #ff7700
zaklejania
Następnie przejdź do ustawień rozmiaru i wprowadź zmiany.
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 2000px
Odstęp (linia)
Kontynuuj, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.
- Dopełnienie (góra i dół): 0px
Odstępy (kolumna 1)
Zmień ustawienia odstępów kolumny 1
- Wypełnienie (góra i dół): 6vw (komputer), 120px (tablet i telefon)
- Dopełnienie (lewy i prawy): 5vw (komputer), 80px (tablet), 50px (telefon)
Cień Pudełka
A także dodaj 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 linii 1
Ponieważ mamy już wszystkie moduły, których potrzebujemy w poprzedniej sekcji, zaoszczędzimy czas, klonując je.
Umieść duplikaty w kolumnach wiersza 2
I umieść duplikaty w nowej linii w następujący sposób:
Edytuj treść
Pamiętaj o zmianie treść swoich modułów.
Zmień tło gradientu przycisku
Zmień także gradient tła przycisku.
- Gradient zatrzymuje się 0%: #ff653f
- Gradient zatrzymuje się 100%: #0066ff
- Kierowanie: 39 stopni
Zmień obraz
Zastąp obraz.
Zmień gradient tła
Na koniec zmodyfikuj gradient tła modułu Image.
- Gradient zatrzymuje się 0%: rgba (0,2,12,0.66)
- Gradient zatrzymuje się 57%: rgba (255,255,255,0)
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni efektowi końcowemu.
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak zmienić tło gradientowe po najechaniu kursorem Divi. Stworzyliśmy także od podstaw świetny przykład wykorzystujący to podejście.
Możesz swobodnie korzystać z projektu i grafiki dla dowolnego rodzaju tworzonej witryny.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
