Dëshironi të dini se si të zbuloni përmbajtje kur rri pezull mbi ndarësin e seksionit në Divi ?

Ndarësit e seksioneve vazhdojnë të jenë një element dizajni Divi popullore. Ka shumë stile ndarësish për të zgjedhur me opsione të dobishme që e bëjnë të lehtë shtimin e tranzicioneve dhe sfondeve unike në faqen tuaj.

Në këtë tutorial, ne do t'i përdorim ndarësit e seksioneve pak më ndryshe. Divi ju lejon të rregulloni lartësinë dhe paraqitjen e secilit ndarës. Kjo na lejon të pozicionojmë ndarësit mbi zona të caktuara ose përmbajtje të seksionit. 

Duke përdorur opsionin hover për lartësinë e ndarësit, ne mund të shtojmë efekte unike të pezullimit që zbulojnë a përmbajtje pjesërisht e fshehur. Kjo funksionon shkëlqyeshëm për të tërhequr vëmendjen ndaj një thirrjeje të veçantë për veprim ose butonit mbi të cilin dëshironi që njerëzit të klikojnë. vizitorët klikoni.

studim

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.

Ndarësi i seksioneve në Divi

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.

Dizajnimi i efektit të pezullimit të ndarjes së seksionit në Divi

Krijimi i seksionit dhe rreshtit

Krijo një seksion të rregullt me ​​një rresht me dy kolona.

Përpara se të shtoni një modul, hapni cilësimet e seksionit dhe përditësoni sa vijon:

Gradienti i sfondit (majtas): #73ba57
Gradienti i sfondit (djathtas): #2a4c23
Gjerësia: 80%
Gjerësia maksimale: 1 px
Rreshtimi i seksionit: Qendër

efekti i pezullimit të ndarësit të seksionit

Shto titullin e seksionit

Për të shtuar titullin e seksionit, krijoni një modul Teksti dhe futni tekstin e mëposhtëm:

<h2>The Juice</h2>

Më pas, përditësoni dizajnin si më poshtë:

Fonti: Lato
Madhësia e tekstit: 80 px
Hapësira e shkronjave: -5 px
Marzhi: -50 px (lart), -40 px (poshtë)
Z Indeksi: -1

Marzhi i personalizuar dhe z-indeksi do të lejojnë që teksti të qëndrojë pas imazhit që do të shtojmë në hapin tjetër.

Shtoni imazhin

Nën modulin Tekst me titullin në kolonën 1, shtoni një modul Image. Pastaj ngarkoni një imazh me një sfond transparent. Ne përdorim një imazh nga paketa e paraqitjes Dyqani i lëngjeve 240 piksele me 300 piksele.

Rregullimi i shtrirjes së imazhit në qendër.

Shtoni një modul "Thirrje për Veprim" në kolonën 2

Në kolonën 2, shtoni një modul Call To Action.

Shtoni një URL të lidhjes së butonit për të siguruar që butoni të shfaqet.

Sfondi CTA dhe stilimi i tekstit të titullit

Më pas, përditësoni cilësimet e mëposhtme të dizajnit:

Sfondi: #ffffff
Ngjyra e tekstit: e errët
Fonti i titullit: Lato
Pesha e shkronjave të titullit: E rëndë
Stili i shkronjave: TT
Madhësia e tekstit të titullit: 18 px

Personalizo butonin CTA

Përditësoni modelin e butonit si më poshtë:

  • Përdorni stile të personalizuara për butonin: PO
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: #73ba57
  • Gjerësia e kufirit: 0 px

Personalizo kufirin e modulit CTA

Pastaj shtoni një kufi për të kornizuar modulin si më poshtë:

Gjerësia e kufirit: 10 px
Ngjyra e kufirit: rgba (115,186,87,0.15)

U shtua efekti i pezullimit në ndarës për të zbuluar modulin "Thirrje për veprim".

Tani është koha për të shtuar efektin hover në ndarjen e seksionit për të zbuluar modulin "Thirrje për veprim". Për ta bërë këtë, së pari duhet të krijojmë ndarjet tona të seksioneve.

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

Shtimi i ndarësit të sipërm

Hapni parametrat e seksionit dhe ndarësin e sipërm me parametrat e mëposhtëm.

Stili i ndarjes së sipërme: shikoni pamjen e ekranit
Ngjyra e sipërme e ndarjes: #73ba57
Lartësia e ndarësit: 70% (e parazgjedhur), 0% (rrit pezull)
Kthimi i ndarjes së sipërme: horizontale

Vini re se lartësia e ndarësit fillon me një lartësi të paracaktuar prej 70%, më pas ndryshon në një lartësi prej 0% kur rri pezull.

Shtuar ndarjen e poshtme

Pastaj shtoni një ndarës më të ulët të ngjashëm me seksionin me parametrat e mëposhtëm.

  • Stili i ndarjes së poshtme: shikoni pamjen e ekranit
  • Ngjyra e ndarjes së poshtme: #73ba57
  • Lartësia e ndarësit: 70% (e parazgjedhur), 0% (rrit pezull)
  • Përmbysja e ndarjes: horizontale
  • Rregullimi: Në krye të përmbajtjes së seksionit

Ky ndarës i poshtëm gjithashtu fillon me një lartësi prej 70%, e cila bie në 0% kur rri pezull. Megjithatë, meqenëse opsioni i rregullimit të ndarësit është vendosur mbi përmbajtjen, ndarësi i seksionit fsheh pjesën e poshtme të modulit "Thirrje për Veprim" në kolonën 1. Më pas, kur rri pezull, pjesa tjetër e modulit zbulohet.

Shikoni rezultatin deri më tani.

Shkarkoni DIVI Tani!!!

U shtua efekti i pezullimit të hijes së kutisë për tranzicion dhe dizajn unik

Për një tranzicion dhe dizajn unik në hover, ne mund të shtojmë një efekt të pezullimit të hijes së kutisë që do të ndodhë njëkohësisht me efektin e pezullimit të ndarësit. Për ta bërë këtë, shtoni hijen e mëposhtme të kutisë në seksion.

  • Box Shadow: shikoni pamjen e ekranit
  • Pozicioni horizontal: 0px
  • Pozicioni vertikal: 0px
  • Forca e përhapjes së hijes së kutisë: 0 pikselë (e parazgjedhur), 150 pikselë (varros)
  • Ngjyra e hijes: #73ba57

Ngadalësoni kohëzgjatjen e tranzicionit

Për një hap të fundit, le të ngadalësojmë kohëzgjatjen e tranzicionit.

Kohëzgjatja e tranzicionit: 700 ms

Rezultati përfundimtar

Tani që kemi kaluar nëpër të gjitha hapat, le të shohim rezultatin përfundimtar.

Ndarësi i seksioneve në Divi

Shkarkoni DIVI Tani!!!

Përfundim

Shpresojmë që ky artikull t'ju ketë dhënë frymëzim për të krijuar efekte unike të ndarjes së seksioneve për të zbuluar përmbajtjen. 

Në fakt, rregullimi i ndarësit të pezullimit mund të jetë më vete një veçori e shkëlqyer e dizajnit. Për më tepër, modelet e mostrës duhet t'ju ndihmojnë të filloni eksplorimin dhe planet tuaja.

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.

...