Želite li svoje funkcionalnosti ili proizvode predstaviti u obliku kartice Divi s efektom lebdjenja?
Tražite li nove kreativne načine za prikazivanje značajki i/ili proizvoda na svojim web stranicama?
Ako je tako, nastavite čitati jer ćemo vam u ovom članku pokazati kako prikazati značajke na karticama dok lebdite mišem koristeći samo ugrađene opcije Divi. Mogućnosti koje imate s ovim pristupom su beskrajne i one će vam sigurno omogućiti da razumijete Divi na dubljoj razini.
Efekt lebdenja mišem preko kartice pojavit će se samo na radnoj površini. Na manjim veličinama zaslona prikazat će se u svojim normalnim oblicima.
Idemo!
pregled
Prije nego što zaronimo u ovaj vodič, pogledajmo rezultat koji želimo postići.
Započnimo proces stvaranja s Divi
Dodajte novi odjeljak
Gradijentna pozadina
Dodajte novu stranicu ili otvorite postojeću stranicu i dodajte novi odjeljak. Otvorite postavke odjeljka i dodajte pozadinu gradijenta u odjeljak.
- Lijeva boja: #f2f2f2
- Desna boja: #ffffff
- Smjer gradijenta: 87 stupnjeva
- Lijeva pozicija: 20%
- Desna pozicija: 80%
razmak
Zatim promijenite sljedeće postavke razmaka:
- Razmak (gornji i donji dio): 0 px
Dodajte novi redak
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak pomoću sljedeće strukture stupaca:
Boja pozadine
Bez dodavanja modula, otvorite postavke retka i promijenite boju pozadine.
- Boja pozadine: #ffffff
Dimenzioniranje i poravnanje
U kartici dizajn, povucite opciju prema dolje dimenzioniranje i promijenite sljedeće postavke:
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 400 px
- Poravnanje reda: lijevo
Dimenzioniranje lebdenjem
Promjena opcije Širina u postavkama veličine lebdenja. To će omogućiti širenje linije prilikom lebdenja.
- Širina (Hover): 2 piksela
razmak
Zatim idite na postavke razmaka u opciji Razmještanje
- Razmak (gornji i donji dio): 0 px
Obrub (stolno računalo)
Dodajte '20px' u gornji desni kut retka i također dodajte lijevi obrub retka.
- Zaobljeni uglovi (stolno računalo): 20 px (gornji desni kut)
- Širina lijevog ruba: 20px
- Boja lijevog ruba: #6d44ff
Obrub na lebdenju
Uklonite gornji desni zaobljeni kut "20px" pri lebdenju tako da umjesto toga dodate "0px".
Box Shadow (stolno računalo)
Na kraju dodajte suptilnu sjenu.
- Snaga zamućenja sjene okvira: 80 px
- Snaga širenja sjene okvira: -10px
- Boja sjene: rgba(0,0,0,0.11)
Sjena lebdjenja
I promijenite boju sjene u potpuno prozirnu boju dok lebdite.
- Sjena okvira: rgba(255,255,255,0)
Dodajte Blurb modul u redak
Dodajte sadržaj
Sada kada smo završili s promjenom svih postavki retka, možemo nastaviti i dodati modul Blurb u stupac. Slobodno koristite bilo koji drugi modul po vašem izboru.
Nakon što ste dodali modul, dodajte ga sadržaj po vašem izboru.
Odaberite ikonu
Zatim odaberite ikonu po svom izboru.
Postavke ikona
I promijenite izgled ikone u postavkama ikone. Idi na karticu dizajn
- Boja ikone: #5323ff
- Položaj slike/ikone: Vrh
- Širina slike/ikone: 50 px
Postavke tekstualnog naslova (stolno računalo)
Zatim promijenite postavke naslova.
- Font naslova: Poppins
- Poravnanje teksta: centrirano
- Boja teksta naslova: #5323ff
- Veličina teksta naslova: 25px
- Razmak između slova: -1px
- Visina linije: 1 em
Postavke naslova teksta koji se nalazi iznad
I promijenite visinu retka naslova dok lebdite.
- Visina retka naslova: 1,5 em
Postavke glavnog teksta (stolno računalo)
Zatim idite na postavke teksta tijela i napravite neke promjene. To uključuje promjenu veličine teksta na '0px'. To će nam pomoći da se tekst tijela pojavi samo kada lebdite.
- Font tijela: Poppins
- Težina fonta tijela: lagana
- Poravnanje teksta: centrirano
- Boja teksta tijela: #000000
- Veličina teksta: 0px (stolno računalo), 15px (tablet i telefon)
- Visina linije: 2,2 em
Postavke teksta tijela pri lebdenju
Kako biste bili sigurni da se tijelo teksta pojavljuje prilikom prelaska pokazivačem, promijenite veličinu teksta pri lebdenju.
- Veličina teksta: 15 px
Razmak (radna površina)
Kako bismo modulu dali malo prostora, mijenjamo sljedeće parametre razmaka:
- Razmak (gornji i donji dio): 80 px
Razmak između pokazivača
Promijenit ćemo postavke razmaka lebdenja.
- Razmak (gornji i donji dio): 80 px
- Podstava (lijevo i desno): 20vw
Kloni red 3 puta
Nakon što završite s uređivanjem prvog retka i njegovog Blurb modula, možete nastaviti i klonirati red koliko god puta želite.
Modul za uređivanje linije i Blurb #2
Promjena boje obruba linije
Počnimo s promjenom boje lijevog ruba linije.
- Boja lijevog ruba: #00ffcc
Uredi Blurb sadržaj i ikonu
Zatim otvorite postavke modula Blurb i promijenite ikonu.
Promjena boje ikone modula Blurb
S bojom ikone.
- Boja ikone: #00eda6
Promjena boje naslova
I boja naslovnog teksta.
- Boja teksta naslova: #00eda6
Uredi liniju i Burb #3 modul
Boja obruba linije
Promijenimo boju obruba lijevog reda.
- Boja lijevog ruba: #afebff
Uredi Blurb sadržaj i ikonu
Promijenimo i ikonu i sadržaj prezentacijskog teksta.
Promjena boje ikone modula Blurb
Također promijenite boju ikone.
- Boja ikone: #68d9ff
Promjena boje teksta naslova
I boja naslovnog teksta također.
- Boja teksta naslova: #68d9ff
Modul za uređivanje linije i Blurb #4
Promjena boje obruba linije
U sljedećem i posljednjem modulu također promijenite boju lijevog ruba linije.
- Boja lijevog ruba: #dd87cf
Uredi Blurb sadržaj i ikonu
Otvorite modul Blurb u retku i promijenite ikonu i sadržaj du modul.
Promjena boje ikone modula Blurb
S bojom ikone.
- Boja ikone: #dd6aca
Promjena boje teksta naslova
I boja naslovnog teksta također.
- Boja teksta naslova: #dd6aca
pregled
Sad kad smo prošli kroz poduku, bacimo posljednji pogled na rezultat.
Preuzmite DIVI odmah!!!
Zaključak
U ovom članku smo vam pokazali kako koristiti ugrađene opcije Divi samo za stvaranje kartica dostupnih kada lebdite.
Ovaj pristup će vam pomoći da interaktivno dijelite sadržaj o značajkama ili proizvodima.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
