Dëshironi të përdorni efektet e hijes dhe të pezullimit në Divi te krijosh përmbajtje interaktive dhe të dalloni tuajat Site Web ?
Sigurohuni që ju Site Web të dallosh nga faqet e internetit të ngjashme mund të jetë e vështirë. Por sapo të arrish atje, pothuajse gjithmonë ia vlen përpjekja dhe mendimi që ka bërë.
Ne do t'ju tregojmë se si të krijoni përmbajtje interaktive kur krijoni faqe interneti me Divi.
Le të shkojmë!
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin që mund të prisni.
Kompjuter desktop
Telefon
Le të fillojmë realizimin me Divi!
Shiko gjithashtu: Divi: Si të krijoni një meny të rrotave rrotulluese në hoverl
Shto një seksion të ri
Ngjyrë e sfondit
Krijoni një faqe të re ose hapni një ekzistuese dhe shtoni një seksion të rregullt në të. Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit.
- Sfondi: #03006d
ndarje
Pastaj shkoni te cilësimet e ndarjes së seksioneve dhe ndryshoni si më poshtë:
- Mbushje (lart dhe poshtë): 50 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri në seksion duke përdorur strukturën e kolonës vijuese.
sizing
Pastaj shkoni te cilësimet e madhësisë dhe lëreni rreshtin të mbushë gjerësinë e plotë të ekranit.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 1
- Gjerësia: 100%
ndarje
Le të ndryshojmë gjithashtu cilësimet e mëposhtme të ndarjes:
- Mbushje (djathtas): 9vw (desktop), 5vw (tableti dhe telefoni)
- Mbushje (djathtas): 5vw (tableti dhe telefoni)
Shtoni një modul teksti në kolonën 1
Shto përmbajtje
Pasi të keni mbaruar me modifikimin e cilësimeve të rreshtit, shtoni modulin e parë të tekstit në kolonën 1.
Shto karakterin e parë si tekst paragrafi. Pastaj përmbajtje që dëshironi të shfaqet si tekst i listës.
Cilësimet e tekstit (Desktop)
Pastaj shkoni te skeda Projektimidhe ndryshoni cilësimet e parazgjedhura të tekstit të paragrafit. Sigurohuni që të përdorni të njëjtën ngjyrë për tekstin dhe sfondin e seksionit.
- Pesha e shkronjave: Ultra Bold
- Ngjyra e tekstit: #03006d
- Madhësia e tekstit: 27vw (desktop), 0vw (tableti dhe telefoni)
- Lartësia e linjës: 1,1 em
- Hija e tekstit: Shih kapjen
- Fuqia e turbullimit të hijes: 0,01em
- Ngjyra e hijes: #ffffff
- Rreshtimi i tekstit: majtas
Zhvendos cilësimet e tekstit
Për të krijuar efektin e këndshëm të pezullimit, do të na duhet të ndryshojmë këto cilësime të tekstit të paragrafit të pezullimit.
- Ngjyra e tekstit (Hover): #ffffff
- Ngjyra e hijes (Hover): rgba (255,255,255,0)
Cilësimet e listës (Desktop)
Vazhdoni duke shkuar te cilësimet e listimit.
- Pesha e shkronjave: E lehtë
- Ngjyra e tekstit të listës: #ffffff
- Madhësia e tekstit të listës: 0 px (desktop), 18 px (tableti dhe telefoni)
- Pozicioni i stilit: Rrethi
- Pozicioni i stilit të listës së parregulluar: Jashtë
- Artikulli i parenditur i listës Prirja: 0 px
Lista e cilësimeve të tekstit në lëvizje (Hover)
Ne duam që teksti i listës të shfaqet në hover. Kjo është arsyeja pse ne do të ndryshojmë madhësinë e tekstit në hover.
- Madhësia e tekstit të listës së parregulluar (Hover): 18 px
ndarje
Vazhdoni duke shkuar te cilësimet e ndarjes së moduleve dhe bëni disa ndryshime edhe atje.
- Marzhi (poshtë): 50 px (Tableti dhe telefoni)
- Margjina (djathtas): -4vw (desktop), 0vw (tableti dhe telefoni)
Klononi modulin e tekstit 4 herë dhe vendosni dublikatat në kolonat e mbetura
Tani që kemi përfunduar modifikimin e modulit të parë në kolonën 1, klononi modulin katër herë. Pastaj vendosni secilën prej dublikatave në kolonat e mbetura. Ne do të modifikojmë secilën prej dublikatave për të përputhur me atë që duam.
Ndryshoni modulin e tekstit në kolonën 2
Ndrysho përmbajtjen
Hapni kopjimin në kolonën 2 dhe modifikoni përmbajtjen.
Ndrysho ndarjen
Tjetra, shkoni te cilësimet e ndarjes dhe ndryshoni vlerat e marzhit të personalizuar.
- Marzhi (poshtë): 50 px (Tableti dhe telefoni)
- Margjina (majtas dhe djathtas): -2vw (desktop), 0vw (tableti dhe telefoni)
- Margjina e djathtë: -2vw (desktop), 0vw (tableti dhe telefoni)
Ndryshoni modulin e tekstit në kolonën 3
Ndrysho përmbajtjen
Ndryshoni gjithashtu përmbajtjen e kopjimit në kolonën 3.
Ndrysho ndarjen
Me cilësimet e ndarjes në skedën e dizajnit.
- Margjina (majtas): 2,5 vw
- Marzhi (djathtas): 1,5 vw
Ndryshoni modulin e tekstit në kolonën 4
Ndrysho përmbajtjen
Vazhdoni duke hapur cilësimet e modulit të tekstit në kolonën 4 dhe modifikoni përmbajtjen gjithashtu atje.
Ndrysho ndarjen
Tjetra, shkoni te skeda Dizajn dhe modifikoni vlerat e marzhit të personalizuar në cilësimet e ndarjes.
- Margjina (majtas): -6vw
- Margjina (djathtas): 2vw
Ndryshoni modulin e tekstit në kolonën 5
Përmbajtje
Hapni rrugën për kopjimin e fundit. Redaktoni përmbajtjen në zonën e përmbajtjes.
Ndrysho ndarjen
Me cilësime të personalizuara të ndarjes.
- Margjina (majtas): -7vw
- Margjina (djathtas): 3vw
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Lexo gjithashtu: Divi : Si të personalizoni ikonat e karrocës dhe kërkimit të modulit "Menyja me gjerësi të plotë".
zyrë
Telefon
Shkarkoni DIVI Tani!!!
Përfundim
Ne e dimë se sa e rëndësishme është të sigurohemi që ju Site Web dallon nga faqet e tjera të internetit. Me opsionet e integruara të Divi, mund të jeni aq krijues sa të dëshironi.
Ky artikull është një shembull se si mund të krijoni përmbajtje interaktive hover.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
