Dëshironi të keni përmbajtje e cila zbulohet kur rri pezull mbi skedat e këndit të zgjerueshëm në Divi ?
Është gjithmonë argëtuese të zbulosh mënyra të reja, kreative për të bashkëvepruar me përdoruesit duke përdorur efektet hover. Një mënyrë e shkëlqyer për ta bërë këtë është të zbuloni përmbajtje në rri pezull duke përdorur skedat e zgjatshme të qosheve. Kjo i lejon përdoruesit të qëndrojë pezull mbi një skedë në cep të një kolone ose imazhi për të zgjeruar një mbivendosje me a përmbajtje dobishmëri shtesë për përdoruesin.
Në këtë tutorial, ne do të krijojmë një plan urbanistik Divi krejtësisht unike që do të zbulojë përmbajtjen në lëvizje duke përdorur skedat e këndit të zgjerueshëm. Në fakt, ne do t'ju tregojmë se si të dizajnoni një mitër qoshe të zgjatur për të katër qoshet e një kolone në Divi.
Le të fillojmë!
studim
Ja një vështrim i shpejtë i paraqitjes së skedave qoshe të zgjerueshme që do të ndërtojmë së bashku. Vini re se sa bukur simetrike janë efektet dhe përmbajtja hover.
Krijo një faqe të re me Divi Builder
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijimi i paraqitjes së mbivendosjeve të përmbajtjes së zgjeruar në Divi
Dizajnimi i një mitri qoshe të zgjatur nga pozicioni i poshtëm djathtas
Për të filluar, shtoni një rresht me dy kolona në seksionin e rregullt.
Përpara se të shtoni një modul, përditësoni parametrat e linjës si më poshtë:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Gjerësia e kanalit: 4
Për këtë element të parë të treguar, ne do të krijojmë një imazh të sfondit të kolonës që do të ketë një skedë qoshe (duke përdorur një modul njoftim) në fund djathtas të kolonës e cila zgjerohet dhe mbulon të gjithë kolonën/imazhin në hover.
Lexoni gjithashtu udhëzuesin tonë Divi: Si të krijoni një rrjet kolone fluide në hover
Le të fillojmë duke shtuar një modul Blurb.
Shtoni modulin Blurb në kolonën 1
Cilësimet e kolonës 1
Pasi të jetë vendosur turbullira, hapni cilësimet e rreshtit, përditësoni sa vijon:
- Imazhi i sfondit [fut imazhin]
- Madhësia e imazhit në sfond: Madhësia aktuale
SHËNIM: Për këtë shembull ne po përdorim imazhet transparente të sfondit të birrës të marra nga paketa e paraqitjes "Fabrika e birrës“. Ato janë 128 piksele me 359 piksele, kjo është arsyeja pse ne përdorim madhësinë aktuale të imazhit.
Kufiri i kolonës 1
- Këndet e rrumbullakosura: 10 pikselë poshtë djathtas
- Gjerësia e kufirit (djathtas dhe poshtë): 2 px
- Ngjyra e kufirit (djathtas dhe poshtë): #e94558
CSS me porosi dhe tejmbushje
Nën skedën e avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:
height: 400px;
Opsioni i zbritjes 'Dukshmëri' dhe bëni ndryshimet e mëposhtme:
- Vërshimi horizontal: I fshehur
- Vërshimi vertikal: I fshehur
Shtoni përmbajtje në modulin Blurb
Tani jemi gati të fillojmë të personalizojmë modulin Blurb brenda kolonës 1. Hapni cilësimet e modulit dhe përditësoni sa vijon:
- Titulli: Mango IPA
- Trupi:
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>
- Imazhi: Shtoni të njëjtin imazh të përdorur për sfondin e kolonës
Personalizimi i Modulit Blurb
Jepini turbullirës një ngjyrë të sfondit të pezulluar si më poshtë:
- Sfondi (Desktop): transparent
- Desktop (Hover): rgba (255,255,255,0.9)
Nën skedinë Projektimi, përditësoni sa vijon:
- Vendosja e imazhit/ikonës: djathtas
- Fonti i titullit: Oswald
- Pesha e shkronjave: Gjysmë e trashë
- Stili i shkronjave: TT
- Madhësia e tekstit: 40 px
- Ngjyra e tekstit të trupit (Desktop): transparente
- Ngjyra e tekstit të trupit (Hover): #121212
- Gjerësia e imazhit/ikonës: 100 px (desktop), 64 px (telefon)
- Gjerësia e përmbajtjes: 100%
- lartësia: 100%
- Mbushje (Desktop): 15% (lart dhe poshtë), 8% (majtas dhe djathtas)
- Mbushje (Hover): 8% (lart, poshtë, majtas dhe djathtas)
- Këndet e rrumbullakosura (Desktop): 20 px lart majtas
- Këndet e rrumbullakosura (Hover): 10 pikselë lart majtas
- Gjerësia e kufirit (lart dhe majtas): 4 px (Desktop), 2 px (Hover)
- Ngjyra e kufirit (lart dhe majtas): #e94558
Opsioni i transformimit (Desktop)
- Shkalla e transformimit (X dhe Y): 50%
- Transformo Përkthe
- Boshti Y: 50%
- boshti X: 30%
Lexoni gjithashtu udhëzuesin tonë në: Divi: Si të krijoni një footer ngjitës me efektin "Reveal".
- Origjina e transformimit: poshtë dhe djathtas
Opsionet e transformimit (rrit pezull)
- Shkalla e transformimit (Y dhe X) (Hover): 100%
- Transformo Translate (Y dhe X) (Hover): 0%
Për të kthyer imazhin e paraqitur në anën e djathtë, shtoni CSS-në e mëposhtme të personalizuar në zonë Blurb Përmbajtja :
direction: rtl
SHËNIM: "rtl" qëndron për "E djathta në të majtë", i cili ndryshon rendin e paracaktuar të përmbajtjes (nga e majta në të djathtë).
Rezultat
Le të shohim rezultatin përfundimtar të skedës sonë të qoshes duke u zgjeruar nga pozicioni poshtë djathtas. Vini re se si zgjerohet për të mbushur të gjithë kolonën në hover.
Dizajnimi i një mitri qoshe të zgjatur nga pozicioni i poshtëm majtas
Kolona dublikatë
Për të krijuar skedën e këndit që zgjerohet nga pozicioni i poshtëm majtas, ne mund të rinisim dizajnin duke dublikuar të gjithë kolonën. Hapni cilësimet e rreshtit dhe kopjoni kolonën 1. Më pas fshini kolonën shtesë në mënyrë që të keni vetëm dy dublikatë ekzakte.
Përditësoni cilësimet e kolonës 2
Më pas, hapni cilësimet e kolonës 2 dhe përditësoni sa vijon:
- Këndet e rrumbullakosura: 10 px poshtë majtas
- Gjerësia e kufirit (djathtas): 0 px
- Gjerësia e kufirit (majtas): 2 px
- Ngjyra: #e94558
Përditësoni parametrat e modulit Blurb
Më pas, përditësoni cilësimet Blurb si më poshtë:
- Rreshtimi i tekstit: djathtas
- Këndet e rrumbullakosura (Desktop): 20 px lart djathtas
- Këndet e rrumbullakosura (Hover): 10 pikselë lart djathtas
- Gjerësia e kufirit të majtë: 0 px
- Gjerësia e kufirit djathtas: 4 pikselë (desktop), 2 px (varros)
- Ngjyra e kufirit të djathtë: #e94558
- Transformo Translate (X-Axis) (Desktop): -30%
- Transformimi i origjinës (Desktop): poshtë majtas
Pastaj sigurohuni që të hiqni CSS-në e personalizuar në zonën e përmbajtjes Blurb.
Rezultat
Këtu është rezultati. Vini re se si kjo është simetrike me të parën dhe rritet nga pozicioni i poshtëm majtas i kolonës.
Dizajnimi i një mitri qoshe të zgjatur nga pozicioni i sipërm djathtas
Tani jemi gati të fillojmë dy dizajnet tona të fundit në zgjerim të mitrës qoshe. Për të filluar, le të dublikojmë të gjithë rreshtin që përmban turbullimin që kemi projektuar tashmë.
Përditësoni cilësimet e kolonës 1
Pastaj hapni cilësimet për rreshtin e kopjuar, më pas hapni cilësimet për kolonën 1 dhe përditësoni sa vijon:
- Këndet e rrumbullakosura: 10 px lart djathtas
- Gjerësia e kufirit të poshtëm: 0 px
- Gjerësia e kufirit të sipërm: 2 px
- Ngjyra e sipërme e kufirit: #e94558
Përditësoni parametrat e modulit Blurb
Më pas, hapni cilësimin e modulit Blurb dhe përditësoni sa vijon:
- Këndet e rrumbullakosura (Desktop): 20 pikselë poshtë majtas
- Këndet e rrumbullakosura (Hover): 10 px poshtë majtas
- Gjerësia e kufirit të sipërm: 0 px
- Gjerësia e kufirit të poshtëm: 4 px (Desktop), 2 px (Hover)
- Gjerësia e kufirit të poshtëm: #e94558
- Transformo Translate (boshti Y) (Desktop): -50%
- Origjina e transformimit: lart djathtas
Custom CSS
Tani për tani ne mund të shohim vetëm pjesën e poshtme të majtë të modulit të prezantimit, i cili nuk shfaq titullin tonë si dy prezantimet e tjera në rreshtin e mësipërm. Për të shfaqur titullin në skedën, duhet ta ripozicionojmë titullin në fund të majtë të turbullimit me CSS të personalizuar.
Shtoni CSS-në e mëposhtme të personalizuar në zonë Titulli i bllokimit :
position: absolute;
bottom: 0;
left: 15px;
Pastaj shtoni CSS-në e mëposhtme në zonën e përmbajtjes Blurb Përmbajtja :
direction: rtl;
height: 100%;
Dizajnimi i një mitri qoshe të zgjatur nga pozicioni i sipërm majtas
Për efektin tonë të katërt dhe të fundit të shtrirjes së skedës së këndit, ne do ta pozicionojmë atë në këndin e sipërm majtas për të përfunduar dizajnin simetrik të të gjithë paraqitjes së rrjetës.
Përditësoni cilësimet e kolonës 2
Nën cilësimet e rreshtit, hapni cilësimet e kolonës 2 dhe përditësoni sa vijon:
- Këndet e kufijve: 10 px lart majtas
- Gjerësia e kufirit të poshtëm: 0 px
- Gjerësia e kufirit të sipërm: 2 px
- Ngjyra e sipërme e kufirit: #e94558
Përditësoni parametrat e modulit Blurb
Më pas, hapni cilësimet e tekstit të modulit Blurb në kolonën 2 dhe përditësoni sa vijon:
- Këndet e rrumbullakosura (Desktop): 20 pikselë poshtë djathtas
- Këndet e rrumbullakosura (Hover): 10 pikselë poshtë djathtas
- Gjerësia e kufirit të sipërm: 0 px
- Gjerësia e kufirit të poshtëm: 4 pikselë (desktop), 2 px (rrit pezull)
- Ngjyra e kufirit të poshtëm: #e94558
Pastaj përditësoni opsionet e transformimit:
- Transformo Translate (Axis Y) (Desktop): -50%
- Origjina e transformimit: lart majtas
Custom CSS
Pastaj shtoni CSS-në e mëposhtme të personalizuar në zonë Titulli i bllokimit :
position: absolute;
bottom: 0%;
right: 0%;
Shtoni gjithashtu CSS-në e mëposhtme në kuti Blurb Përmbajtja :
height: 100%;
Përfundoni dizajnimin e paraqitjes
Ngjyra e sfondit të seksionit
Shtoni një ngjyrë të sfondit të seksionit si më poshtë:
- Sfondi: #efefef
Shto titullin
Për të krijuar titullin, shtoni një rresht në një kolonë në mes të dy rreshtave
Pastaj shtoni një modul Teksti.
Shtoni përmbajtjen: "Sezonale".
Më pas përditësoni cilësimet e mëposhtme:
- Fonti: Merriweather
- Pesha e shkronjave: Bold
- Stili: TT
- Rreshtimi i tekstit: në qendër
- Ngjyra e tekstit: #999999
- Madhësia: 50 px (Desktop), 30 px (Tablet), 24 px (Telefon)
- Hapësira e shkronjave: 1em
- Mbushja (majtas): 50 pikselë (Desktop), 30 px (Tablet), 24 px (Telefon)
Rezultati përfundimtar
Shikoni rezultatin përfundimtar të paraqitjes duke zgjeruar skedat e qosheve.
Dhe këtu është dizajni në celular.
Shkarkoni DIVI Tani!!!
Përfundim
Skedat e qosheve të paraqitura në këtë tutorial do të funksionojnë patjetër për çdo lloj përmbajtjeje që dëshironi të shfaqni në tuaj Site Web Divi
Ju gjithashtu nuk keni nevojë të përdorni të katër qoshet. Për shembull, mund të krijoni një plan urbanistik për imazhet duke përdorur vetëm skedat e këndit të sipërm djathtas për të zbuluar përmbajtjen në lëvizje.
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.
...