Dëshironi të krijoni një rrëshqitës të ekranit të plotë me Divi ?

Një rrëshqitës me ekran të plotë mund të funksionojë shumë mirë si titulli i faqes tuaj fillestare. Site Web

Aspekti i ekranit të plotë ruan sistematikisht përmbajtje e rëndësishme mbi dele. Dhe funksionaliteti i rrëshqitësit i lejon përdoruesit të shohin përmbajtje shtesë pa pasur nevojë të lëvizni faqen.

Krijoni një rrëshqitës me ekran të plotë me Divi është çuditërisht e lehtë për t'u bërë. Gjëja kryesore është t'i jepni rrëshqitësit një lartësi në lidhje me lartësinë e shfletuesit, më pas të hiqni qafe çdo kufizim shtesë të diferencës dhe gjerësisë në rreshtin ose seksionin prind. 

Në vetëm pak minuta, mund të krijoni një rrëshqitës në ekran të plotë që zgjerohet për të mbushur të gjithë ekranin në ngarkimin e faqes dhe duket i shkëlqyeshëm në të gjitha pajisjet.

Le të fillojë.

studim

Këtu është një përmbledhje e shkurtër e rrëshqitësit që do të krijojmë në këtë tutorial.

Krijo një faqe të re me Divi Builder

Në pultin e WordPress, shkoni te Faqet> Shto të Reja

Jepni një titull të përshtatshëm për ju dhe klikoni 'përdorim Divi Ndërtues'

Në fund, klikoni 'Fillo ndërtimin'

Pas kësaj, do të keni një faqe të zbrazët për të filluar dizajnimin në Divi.

Krijoni një rrëshqitës të ekranit të plotë në Divi

Konfigurimi i seksionit dhe linjës

Për të filluar, shtoni një rresht me një kolonë në seksion.

Divi rrëshqitës me ekran të plotë

margjina e seksionit

Para se të shtoni një modul, hapni cilësimet e seksionit, shkoni te skeda Projektimi, tërhiqni opsionin ndarje dhe ndryshoni cilësimet si më poshtë:

  • Mbushje (lart dhe poshtë): 0 px

Cilësimet e linjës

Tjetra, hapni cilësimet e linjës dhe përditësoni sa vijon në skedën Projektimi :

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
  • Mbushje (lart dhe poshtë): 0 px

Me të gjitha këto cilësime në vend, tani mund të kalojmë në krijimin e rrëshqitësit aktual.

Krijimi i rrëshqitësit të ekranit të plotë

Për të krijuar rrëshqitësin në ekran të plotë, shtoni një modul të ri Slider në rresht.

Shtoni imazhe në çdo rrëshqitje

Përpara se të përditësoni cilësimet e përgjithshme të rrëshqitjes, hapni cilësimet e paracaktuara të rrëshqitjes së parë

Shtoni një imazh dhe një imazh të sfondit në rrëshqitje. Për këtë shembull, ne po përdorim të njëjtin imazh për imazhin e rrëshqitjes dhe imazhin e sfondit (rreth 1920px me 1500px).

Pastaj hapni cilësimet për rrëshqitjen e dytë

Shtoni një imazh dhe imazh të sfondit të ndryshëm nga ai i mëparshmi në rrëshqitje.

Vini re se mund të shtoni sa më shumë rrëshqitje që dëshironi.

Përditëso cilësimet e rrëshqitësit

Tani që çdo rrëshqitës individual ka një imazh unik dhe imazh të sfondit, ne jemi gati të përditësojmë cilësimet e rrëshqitësit në përgjithësi.

Kthehuni te cilësimet e rrëshqitësit dhe përditësoni sa vijon nën skedën Projektimi :

Mbulesë
  • Përdorni mbivendosjen e sfondit: PO
  • Ngjyra e mbivendosjes së sfondit: rgba (27,18,38,0.74)
Hija e Kutisë
  • Stili i hijes së kutisë: Shiko kapjen (1)
  • Box Shadow (Horizontal dhe Vertical) Pozicioni: -8vw
  • Forca e përhapjes së hijes së kutisë: -6,5 vw
  • Ngjyra e hijes: #cf1259
Teksti i titullit

Ndrysho cilësimet e titullit

  • Fonti i titullit: Montserrat
  • Pesha e shkronjave të titullit: Ultra e trashë
  • Madhësia e tekstit: 5vw (desktop), 40px (tableti dhe telefoni)

teksti i trupit

Ndryshoni cilësimet e tekstit të përshkrimit si më poshtë:

  • Pesha e shkronjave të trupit: Gjysmë e trashë
  • Madhësia e tekstit në trup: 16 px
  • Lartësia e linjës: 1.8 em

Stilet e butonave

  • Përdorni stile të personalizuara për butonin: PO
  • Madhësia e tekstit të butonit: 16 px
  • Sfondi: #cf1259
  • Gjerësia e kufirit: 0 px
  • Rrezja e kufirit: 0 px
  • Pesha e shkronjave: Bold
  • Stili i shkronjave: TT
  • Mbushje (lart dhe poshtë): 15 px
  • Mbushje (majtas dhe djathtas): 30 px

Lartësia e rrëshqitësit dhe gjerësia e përmbajtjes

  • Gjerësia maksimale e përmbajtjes: 90%
  • Lartësia minimale: 100 Vh

Dhënia e rrëshqitësit një lartësi minimale prej 100 vh do të sigurojë që rrëshqitësi të shtrijë lartësinë e plotë të dritares së shfletuesit. Ky është çelësi për të krijuar një rrëshqitës me ekran të plotë. 

Rrëshqitësi tashmë do të shtrijë gjerësinë e plotë të dritares së shfletuesit, sepse gjerësia e linjës është 100%.

Shigjetat rrëshqitëse

Nën skedën Advanced, përditësoni madhësinë dhe pozicionin e shigjetave Slider duke shtuar CSS-në e mëposhtme të personalizuar në zonën CSS Shigjetat e rrëshqitjes :

font-size: 8vw !important;
margin-top: -4vw;

Kjo do të zmadhojë shigjetat Slider në madhësi të mëdha të ekranit dhe do t'i zvogëlojë ato në një madhësi më të vogël në celular.

Zbrisni lartësinë e kokës nga lartësia e rrëshqitësit

Nëse keni një kokë në faqe, rrëshqitësi i ekranit të plotë do të shtrihet pak më poshtë dritares së shfletuesit. 

Kjo ndodh sepse lartësia e kokës ul rrëshqitësin i cili aktualisht ka një lartësi prej 100vh (100% e lartësisë së dritares/shfletuesit). Për të parandaluar shtyrjen e rrëshqitësit nën portën e shikimit të shfletuesit, mund të shtoni një funksion CSS kalc () për të zbritur lartësinë e kokës nga lartësia e rrëshqitësit.

Ju do të duhet të dini lartësinë e kokës (desktop dhe celular) që kjo të funksionojë. Nëse jeni duke përdorur kokën e paracaktuar të Divi, lartësia e kokës do të jetë 80 px. Kështu, lartësia e rrëshqitësit duhet të jetë 100vh – 80px.

Për të shtuar lartësinë e personalizuar, hapni cilësimet e Slider dhe shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor të Slider dhe gjithashtu për secilën rrëshqitje:

min-height: calc(100vh - 80px)!important;

Rezultati përfundimtar

Këtu është rezultati përfundimtar.

rrëshqitës me ekran të plotë me Divi

Shkarkoni DIVI Tani!!!

Dhe kështu duket dizajni në tablet dhe telefon.

rrëshqitës me ekran të plotë me Divi
rrëshqitës me ekran të plotë me Divi

Përfundim

Hapat kryesorë për të krijuar një rrëshqitës të ekranit të plotë në Divi janë të konfiguroni seksionin dhe rreshtin për të shtrirë gjerësinë e plotë të shfletuesit, më pas t'i jepni rrëshqitësit një lartësi minimale prej 100 vh. 

Nëse po përdorni një kokë, mund të shtoni një fragment të personalizuar CSS që do të zbresë lartësinë e kokës për të siguruar që rrëshqitësi i ekranit të plotë të mos shtrihet në fund të shfletuesit. 

Me këto hapa kyç në vend, ju mund të personalizoni më tej rrëshqitësin (dhe rrëshqitëset) sido që dëshironi duke përdorur të gjitha veçoritë e fuqishme të përfshira në Divi Builder.

Përdoreni atë për të krijuar rrëshqitës të bukur dhe efektivë që mbushin çdo ekran në çdo pajisje.

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.

...