Chcesz zaprezentować swoje funkcjonalności lub produkty w formie zakładki Divi z efektem najechania?
Szukasz nowych kreatywnych sposobów prezentowania funkcji i/lub produktów na swoich stronach internetowych?
Jeśli tak, czytaj dalej, ponieważ w tym artykule pokażemy, jak wyświetlać funkcje w zakładkach po najechaniu kursorem, używając tylko wbudowanych opcji Divi. Możliwości, jakie masz dzięki temu podejściu, są nieograniczone i z pewnością pozwolą ci zrozumieć Divi na głębszym poziomie.
Efekt najechania na kartę pojawi się tylko na komputerze. Na mniejszych ekranach pojawią się w normalnych kształtach.
Chodźmy!
badanie
Zanim zagłębimy się w ten samouczek, przyjrzyjmy się wynikowi, jaki chcemy osiągnąć.
Zacznijmy proces tworzenia z Divi
Dodaj nową sekcję
Tło gradientowe
Dodaj nową stronę lub otwórz istniejącą stronę i dodaj nową sekcję. Otwórz ustawienia sekcji i dodaj do sekcji tło gradientowe.
- Lewy kolor: #f2f2f2
- Właściwy kolor: #ffffff
- Kierunek gradientu: 87 stopni
- Lewa pozycja: 20%
- Właściwa pozycja: 80%
rozstaw
Następnie zmień następujące ustawienia odstępów:
- Dopełnienie (góra i dół): 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
Kolor tła
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.
- Kolor tła: #ffffff
Rozmiar i wyrównanie
W zakładce Wnętrze, rozwiń opcję Dobór i zmień następujące ustawienia:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 400px
- Wyrównanie wierszy: do lewej
Rozmiar po najechaniu kursorem
Zmień opcję Szerokość w ustawieniach rozmiaru po najechaniu kursorem. Umożliwi to rozszerzenie linii podczas najeżdżania.
- Szerokość (najechanie): 2 pikseli
rozstaw
Następnie przejdź do ustawień odstępów w opcji Rozstaw
- Dopełnienie (góra i dół): 0px
Ramka (komputer stacjonarny)
Dodaj „20px” w prawym górnym rogu linii, a także dodaj lewą ramkę do linii.
- Zaokrąglone rogi (komputer): 20px (prawy górny róg)
- Szerokość lewej krawędzi: 20px
- Kolor lewej krawędzi: #6d44ff
Obramowanie po najechaniu
Usuń zaokrąglony prawy górny róg „20px” po najechaniu myszą, dodając zamiast tego „0px”.
Cień pudełka (komputer stacjonarny)
Na koniec dodaj subtelny cień.
- Siła rozmycia cieni w pudełku: 80px
- Siła rozprzestrzeniania się cieni w pudełku: -10px
- Kolor cienia: rgba(0,0,0,0.11)
Unoszący się cień
I zmień kolor cienia na całkowicie przezroczysty po najechaniu myszą.
- Cień pudełka: rgba (255,255,255,0)
Dodaj moduł Blurb do wiersza
Dodaj treść
Teraz, gdy skończyliśmy zmieniać wszystkie ustawienia wierszy, możemy śmiało dodać moduł Blurb do kolumny. Zachęcamy do skorzystania z dowolnego innego wybranego modułu.
Po dodaniu modułu dodaj trochę treść do wyboru.
Wybierz ikonę
Następnie wybierz wybraną ikonę.
Ustawienia ikon
I zmień wygląd ikony w ustawieniach ikon. Przejdź do zakładki Wnętrze
- Kolor ikony: #5323ff
- Umieszczenie obrazu/ikony: góra
- Szerokość obrazu/ikony: 50px
Ustawienia tytułu tekstu (komputer)
Następnie zmień ustawienia tytułu.
- Czcionka tytułu: Poppins
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu tytułu: #5323ff
- Rozmiar tekstu tytułu: 25px
- Odstępy między literami: -1px
- Wysokość linii: 1 em
Ustawienia tytułu tekstu po najechaniu kursorem
I zmień wysokość wiersza tytułu po najechaniu myszą.
- Wysokość wiersza tytułu: 1,5 em
Ustawienia tekstu podstawowego (komputer)
Następnie przejdź do ustawień tekstu podstawowego i wprowadź pewne zmiany. Obejmuje to zmianę rozmiaru tekstu na „0px”. Pomoże nam to sprawić, by tekst główny pojawiał się tylko po najechaniu myszą.
- Czcionka ciała: Poppins
- Waga czcionki ciała: lekka
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu ciała: #000000
- Rozmiar tekstu podstawowego: 0px (komputer), 15px (tablet i telefon)
- Wysokość linii: 2,2 em
Ustawienia tekstu podstawowego po najechaniu myszą
Aby upewnić się, że tekst główny pojawia się po najechaniu kursorem, zmień rozmiar tekstu po najechaniu kursorem.
- Rozmiar tekstu ciała: 15px
Odstępy (komputer stacjonarny)
Aby nadać modułowi trochę miejsca, modyfikujemy następujące parametry rozstawu:
- Dopełnienie (góra i dół): 80px
Odstępy najechania
Zamierzamy zmienić ustawienia odstępów najechania kursorem.
- Dopełnienie (góra i dół): 80px
- Wyściółka (lewa i prawa): 20vw
Klonuj rząd 3 razy
Po zakończeniu edycji pierwszego wiersza i jego modułu Blurb możesz sklonować wiersz tyle razy, ile chcesz.
Moduł edycji linii i rozmycia nr 2
Zmień kolor obramowania linii
Zacznijmy od zmiany koloru lewej krawędzi linii.
- Kolor lewej krawędzi: #00ffcc
Edytuj zawartość i ikonę Blurb
Następnie otwórz ustawienia modułu Blurb i zmień ikonę.
Zmień kolor ikony modułu rozmycia
Z kolorem ikony.
- Kolor ikony: #00eda6
Zmień kolor tytułu
I kolor tekstu tytułowego.
- Kolor tekstu tytułu: #00eda6
Edycja linii i modułu Burb #3
Kolor obramowania linii
Zmieńmy kolor obramowania lewego rzędu.
- Kolor lewej krawędzi: #afebff
Edytuj zawartość i ikonę Blurb
Zmieńmy także ikonę i treść tekstu prezentacji.
Zmień kolor ikony modułu rozmycia
Zmień także kolor ikony.
- Kolor ikony: #68d9ff
Zmień kolor tekstu tytułu
A także kolor tekstu tytułowego.
- Kolor tekstu tytułu: #68d9ff
Moduł edycji linii i rozmycia nr 4
Zmień kolor obramowania linii
W kolejnym i ostatnim module zmień również kolor lewego obramowania linii.
- Kolor lewej krawędzi: #dd87cf
Edytuj zawartość i ikonę Blurb
Otwórz moduł Blurb w wierszu i zmień ikonę oraz treść modułu.
Zmień kolor ikony modułu rozmycia
Z kolorem ikony.
- Kolor ikony: #dd6aca
Zmień kolor tekstu tytułu
A także kolor tekstu tytułowego.
- Kolor tekstu tytułu: #dd6aca
badanie
Teraz, gdy przeszliśmy przez samouczek, przyjrzyjmy się po raz ostatni wynikowi.
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak korzystać z wbudowanych opcji Divi tylko do tworzenia kart dostępnych po najechaniu myszą.
Takie podejście pomoże Ci w interaktywnym udostępnianiu treści dotyczących funkcji lub produktów.
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.
...
