Dëshironi të krijoni skeda me efekt hover nga rreshtat me Divi ?

Skedat janë padyshim të dobishme për të vënë në dispozicion informacione të rëndësishme në një zonë koncize të tuajën Site Web. Kjo zvogëlon nevojën që përdoruesi të lëvizë nëpër përmbajtje të një faqeje të gjatë. Moduli i skedës së Divi është e lehtë për t'u përdorur dhe ideale për të shfletuar a përmbajtje e thjeshtë me një klikim.

Por në këtë tutorial do t'ju tregojmë se si të konvertoni rreshtat Divi skeda dhe shfaqen në hover. 

Ne do t'ju tregojmë gjithashtu se si të krijoni skeda horizontale dhe vertikale. Kjo do të zhbllokojë fuqinë e Divi për të krijuar paraqitje të plota me module të shumta për secilën zonë të përmbajtje skedën. 

Nuk nevojiten shtojca!

Le të fillojë.

studim

Këtu është një përmbledhje e skedave që do të krijojmë së bashku në këtë tutorial.

Shkarkoni DIVI Tani!!!

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.

Linjat divi të konvertuara në skeda

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)

Linjat divi të konvertuara në skeda

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Krijimi i skedave Horizontale Hover duke përdorur "Rreshtat Divi"

Në seksionin e paracaktuar të pranishëm, shtoni një rresht me dy kolona.

Sfondi i linjës, mbushja e kutisë dhe hije

Përpara se të shtojmë modulet tona, le të personalizojmë pak cilësimet e rreshtit. Hapni Cilësimet e linjës dhe përditësoni sa vijon:

  • Ngjyra e gradientit të majtë: #284f91
  • Ngjyra e gradientit të djathtë: #4646c4
  • Mbushja: 50 px (lart dhe poshtë), 50 px (majtas dhe djathtas)
  • Box Shadow: shikoni pamjen e ekranit
  • Ngjyra e hijes së kutisë: rgba (70,70,196,0.66)

Shtoni përmbajtje në rresht

Tani do të shtojmë përmbajtje mbajtëse vendesh në rreshtin tonë. Në kolonën 1, shtoni një imazh sipas zgjedhjes suaj me një modul Image. Këtu kemi përdorur një imazh nga paketa e paraqitjes « Paketa e paraqitjes së konferencës së dizajnit« .

Në kolonën e djathtë, shtoni një modul Thirrje për veprim dhe përditësoni sa vijon:

  • URL-ja e lidhjes së butonit: # (vetëm për të shfaqur butonin tani për tani)
  • Përdorni ngjyrën e sfondit: JO
  • Rreshtimi i tekstit: majtas
  • Fonti i titullit: Lato
  • Madhësia e tekstit të titullit: 60 px (desktop), 50 px (telefon)

Krijimi i skedës

Për të krijuar skedën aktuale mbi të cilën përdoruesit do të kalojnë për të zbuluar përmbajtjen e atij rreshti, ne duhet të krijojmë një modul Teksti dhe ta pozicionojmë atë lart djathtas me disa CSS të personalizuara.

Shkoni përpara dhe shtoni një modul të ri teksti poshtë imazhit në kolonën 1 dhe përditësoni sa vijon:

  • Trupi: "Tab 1"
  • Sfondi: #284f91 (kjo duhet të përputhet me ngjyrën e gradientit të majtë të rreshtit)
  • Rreshtimi i tekstit: në qendër
  • Ngjyra e tekstit: #ffffff
  • Gjerësia: 100 px
  • Lartësia: 50 px
  • Margjina: -100 px (lart), -50 px (majtas)
  • Mbushja: 14 px (sipër)

Së fundi, shtoni css-në e mëposhtme të personalizuar në elementin kryesor për t'i dhënë atij një pozicion absolut në krye të rreshtit.

position: absolute !important;
top: 0;

Lartësia dhe hapësira e seksionit

Tani për tani, hapni cilësimet e seksionit dhe përditësoni sa vijon:

  • Lartësia minimale: 500 px (Desktop), 900 px (Tablet), 750 px (Telefon)
  • Marzhi: 100 px (lart dhe poshtë)
  • Mbushja: 0 px (lart dhe poshtë)

Krijimi i rreshtit të dytë

Për të krijuar rreshtin e dytë, dublikojeni rreshtin që keni krijuar më parë. Zhvendoseni modulin e tekstit në kolonën 1 dhe imazhin në kolonën 2. Më pas përditësoni imazhin me një të ri. Kjo do t'ju ndihmojë të merrni një ide se si duket përmbajtje e ndryshme në secilën skedë.

Pastaj hapni cilësimet e modulit Teksti i përdorur për të krijuar skedën në kolonën 1 dhe zhvendoseni skedën djathtas, në mënyrë që aty ku ky rresht mbivendoset me rreshtin e mësipërm, të mund ta shihni skedën direkt në të djathtë të skedës së rreshtit të parë.

  • Margjina: 50 px (majtas)

U shtua efekti i pezullimit

Hapni cilësimet e rreshtit dhe shtoni filtrin e mëposhtëm:

  • Opaciteti: 70% (e parazgjedhur), 100% (rrit pezull)

Më pas shtoni një kohëzgjatje tranzicioni dhe një kurbë shpejtësie për efektin e pezullimit të filtrit të errësirës.

  • Koha e tranzicionit: 500 ms
  • Kurba e shpejtësisë së tranzicionit: lineare

Krijimi i skedës së tretë

Tani mund të shtojmë skedën tonë të fundit. Për ta bërë këtë, kopjoni rreshtin e dytë që sapo keni krijuar. Më pas zhvendoseni modulin e tekstit në kolonën 1 dhe imazhin në kolonën 2. Dhe përditësoni modulin e imazhit me një imazh të ri.

Përditësoni cilësimet e linjës me një gradient të ri të sfondit.

  • Ngjyra e gradientit të sfondit të majtë: #333333
  • Ngjyra e gradientit të sfondit të djathtë: #4646c4

Pastaj hapni cilësimin e modulit Tekst që përdoret për të krijuar skedën në kolonën 1 dhe përditësoni ngjyrën dhe margjinën.

  • Sfondi: #333333
  • Margjina: 150 px (majtas)

Ja se si duhet të duket faqja juaj përpara se të vendosim linjat tona të mbivendosen.

Linjat e mbivendosura me pozicionim absolut

Për të mbivendosur linjat tona, duhet të përdorim pozicionimin absolut. Së pari, përditësoni lartësinë e të tre rreshtave në 100%.

  • lartësia: 100%

Pastaj shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor të të tre rreshtave:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Kështu duken skedat tona për momentin.

Ndryshimi i rendit të rreshtit në lëvizje me indeksin Z

Në këtë moment mund të keni vënë re se rreshti/skeda e tretë është në plan të parë. Pra, ne duhet të riorganizojmë rreshtat duke përdorur Z Index në mënyrë që skeda e parë të shfaqet së pari derisa të rri pezull mbi një skedë tjetër.

Lexo gjithashtu: Si të krijoni mbivendosje të personalizuara të imazhit në Divi

Për ta bërë këtë, hapni cilësimet e rreshtit të parë dhe përditësoni indeksin z si më poshtë:

Z-indeksi: 10

Pastaj vendosni indeksin Z të dy rreshtave të tjerë në hover.

Z-Indeksi: 11 (Hover)

Ajo është bërë ! Le të shohim rezultatin përfundimtar.

Rezultati përfundimtar

Shkarkoni DIVI Tani!!!

Krijimi i skedave vertikale

Nëse dëshironi të shtoni skeda vertikale në rreshta, ja çfarë duhet të bëni.

Vazhdoni dhe dublikojeni seksionin që përmban skedat e pezullimit që sapo krijuam, në mënyrë që të keni një dizajn të ri për të punuar.

Pastaj hapni cilësimet e seksionit dhe përditësoni sa vijon:

  • Mbushje: 10% (majtas dhe djathtas)

Përditësoni cilësimet e mëposhtme për të tre rreshtat e seksionit të kopjuar me sa vijon:

  • Gjerësia: 70% (Desktop), 70% (Tablet), 80% (Telefon)
  • Gjerësia maksimale: 980 px

Më pas, përditësoni drejtimin e gradientit në 90 gradë për të tre linjat.

  • Drejtimi i gradientit: 90 gradë

Tani është koha për të vendosur skedat tona të modulit Tekst në të majtë të rreshtave tanë për të marrë skedat vertikale të dëshiruara.

Shih gjithashtu: Si të krijoni një meny të rrotës rrotulluese në Hover në Divi

Hapni cilësimin e skedës së modulit të tekstit në rreshtin e parë dhe përditësoni sa vijon:

  • Margjina (Desktop): -50 px (lart), -150 px (Majtas)

Më pas, hapni cilësimet e skedës së modulit të tekstit të rreshtit të dytë dhe përditësoni sa vijon:

  • Margjina (Desktop): 0px (lart), -150px (Majtas)

Dhe për skedën e fundit në rreshtin e tretë, përditësoni sa vijon:

  • Margjina (desktop): 50 px lart, -150 px majtas
Divi

Rezultati përfundimtar

Tani le të shohim rezultatin përfundimtar.

Shkarkoni DIVI Tani!!!

Përfundim

Me pak kreativitet dhe fuqinë e Divi, mund të krijoni disa skeda mjaft të lezetshme të personalizuara duke përdorur linjat Divi. Ka disa kufizime për atë që mund të shfaqni. 

Për shembull, me këtë konfigurim, të gjitha rreshtat duhet të kenë të njëjtën lartësi si seksioni. Por, për të mos pasur nevojë të përdorni një shtojcë, kjo është një zgjidhje e shkëlqyeshme. 

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.

...