Divi: Si të zbuloni përmbajtjen kur rri pezull mbi skeda

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.

...