Dëshironi t'i jepni një tjetër dimension tuajit Faqja e internetit me një maskë sfondi Divi Ngjitës?

Opsionet ngjitëse të Divi ju lejon të krijoni një ton dizajnesh të ndryshme për faqet tuaja të internetit. Tutoriali i sotëm shton listën e gjërave që mund të bëni. Shpresojmë se kjo do të ndihmojë në ndezjen e kreativitetit tuaj. 

Ne do t'ju tregojmë se si të krijoni një maskë të sfondit ngjitës.

Ky tutorial kombinon opsionet ngjitëse të Divi me mënyrat e përzierjes së filtrit. 

studim

Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.

zyrë

Maska e sfondit Divi Sticky

Telefon

Maska e sfondit Divi Sticky

Krijo një dizajn në Divi

Shto një seksion të ri

Imazhi i sfondit

Filloni duke shtuar një seksion të ri në faqen në të cilën po punoni. 

  • Ngarko një imazh të sfondit të zgjedhjes suaj.
  • Madhësia e imazhit në sfond: Kopertina
Divi

ndarje

Kalo te skeda Dizajni i seksionit dhe hiq parametrat e paracaktuar të ndarjes më poshtë:

  • Mbushje (lart dhe poshtë): 0 px

Përmbytjet

Pastaj fshihni tejmbushjet e seksionit në skedën Avancuar.

  • Vërshimi horizontal: I fshehur
  • Vërshimi vertikal: I fshehur

Shtoni rreshtin numër 1

Struktura e kolonës

Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:

sizing

Pa shtuar asnjë modul, hapni cilësimet e linjës dhe ndryshoni parametrat e madhësisë në përputhje me rrethanat:

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

ndarje

Hiqni gjithashtu të gjitha kufijtë e paracaktuar.

  • Mbushje (lart dhe poshtë): 0 px

Filters

Ne gjithashtu shtojmë një modalitet përzierjeje në këtë linjë. Kjo mënyrë e përzierjes do të na ndihmojë të krijojmë një maskë më vonë në tutorial.

  • Modaliteti i përzierjes: Ekrani

Z-indeksi

Për t'u siguruar që ky rresht të qëndrojë poshtë rreshtit të dytë që do të shtojmë në seksion, ne ndryshojmë indeksin z në skedën Avancuar.

  • Z Indeksi: 9

Parametrat e kolonës

Tjetra, ne do të hapim cilësimet e kolonës.

Ngjyrë e sfondit

Ne përdorim një ngjyrë të sfondit plotësisht të bardhë.

  • Ngjyra e sfondit: #ffffff

Elementi kryesor CSS

Ne gjithashtu shtojmë një vlerë lartësie në elementin kryesor në skedën Avancuar.

height: 100vh;

Shtoni një modul "Tekst" në rresht

Lëreni zonën e zbrazët

Pasi të keni mbaruar me cilësimet e rreshtit, shtoni një modul Teksti në kolonën e tij. 

Largohu nga zona përmbajtje bosh. Në vend të kësaj, ne përdorim këtë modul për të krijuar një formë që zbulon një pjesë të imazhit të sfondit të seksionit.

Ngjyrë e sfondit

Ne do të përdorim një ngjyrë më të errët të sfondit për këtë modul.

  • Ngjyra e sfondit: #0b3835

sizing

Më pas do të hyjmë në skedën Projektimi dhe modifikoni parametrat e madhësisë si më poshtë:

  • Gjerësia:
    • Desktop: 20vw
    • Tableti dhe telefoni: 70 vw
  • Lartësia:
    • Desktop: 30vh
    • Tableti dhe telefoni: 10vh

ndarje

Ne gjithashtu shtojmë një diferencë të lartë.

  • Marzhi (lart): 3vh

Kufiri

Dhe ne do të përfshijmë qoshet e rrumbullakosura.

  • Këndet e rrumbullakosura: 15 px

Shtoni rreshtin 2

Struktura e kolonës

Vazhdoni duke shtuar një rresht tjetër në seksion duke përdorur strukturën e mëposhtme të kolonës:

sizing

Hapni cilësimet e linjës dhe bëni ndryshimet e mëposhtme në opsionet sizing në vijim:

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

Z-indeksi

Rritni gjithashtu indeksin z të rreshtit. Kjo do të ndihmojë të sigurohet që përmbajtje i vijës mbetet mbi vijën e mëparshme.

  • Indeksi Z: 12

Shtoni një modul "Tekst" në rresht

Shto përmbajtje H2

Është koha për të shtuar module, duke filluar me një modul të parë Teksti që përmban përmbajtje H2 sipas zgjedhjes suaj.

Cilësimet e tekstit H2

Personalizoni cilësimet e tekstit H2 si më poshtë:

  • Fonti: Playfair Display
  • Rreshtimi i tekstit: në qendër
  • Ngjyra e tekstit: #0b3835
  • Madhësia:
    • Desktop: 150 px
    • Tableti dhe telefoni: 45 px
  • Lartësia e linjës: 1,2 em

sizing

Më pas, lundroni te cilësimet e madhësisë dhe aplikoni cilësimet e mëposhtme:

  • Gjerësia maksimale: 980 px
  • Moduli i shtrirjes: Qendra

ndarje

Përfshini gjithashtu një diferencë negative të sipërme.

Shtoni një modul "Button" në rresht

Shtoni përmbajtje në butonin

Moduli tjetër dhe i fundit që na nevojitet në këtë rresht është moduli Button. Shtoni përmbajtje sipas zgjedhjes suaj.

Shtrirja e butonave

Kalo te skeda Projektimi të modulit dhe modifikoni shtrirjen e butonit.

  • Shtrirja e butonave: në qendër

Cilësimet e butonit

Më pas, shkoni te cilësimet e butonit dhe aplikoni stilet e mëposhtme:

  • Përdorni stile të personalizuara për butonin: Po
  • Madhësia e tekstit të butonit: 15 px
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: #000000
  • Gjerësia e kufirit të butonit: 0 piksel
  • Rrezja e kufirit të butonit: 100 px
  • Fonti i butonit: Montserrat
  • Pesha e shkronjave të butonit: Gjysmë e trashë
  • Stili i shkronjave: TT

ndarje

Ne gjithashtu shtojmë vlera të personalizuara të marzhit dhe mbushjes në cilësimet e ndarjes.

  • Marzhi (poshtë): 60vh
  • Mbushje (lart dhe poshtë): 15 px
  • Mbushje (majtas dhe djathtas): 40 px

Aplikoni efekte ngjitëse

Hapni rreshtin numër 1

Tani që kemi ndërtuar bazën e dizajnit tonë, është koha për të aplikuar stilet ngjitëse. Hapni cilësimet e rreshtit të parë.

maskë e poshtme ngjitëse

Aplikoni opsionet ngjitëse

Shko te skeda Avancuar dhe aplikoni cilësimet e mëposhtme të vazhdueshme:

  • Pozicioni ngjitës: Ngjit në krye
  • Kufiri i poshtëm ngjitës: Seksioni
  • Kompensimi nga elementët ngjitës përreth: PO
  • Stilet e parazgjedhura dhe ngjitëse të tranzicionit: PO

Opsionet ngjitëse të modulit të tekstit

Tani që rreshti është Sticky, ne mund të aplikojmë stile në modulin Tekst brenda rreshtit. Hapni cilësimet e modulit.

maskë e poshtme ngjitëse

Madhësia ngjitëse

Më pas, shkoni te cilësimet e madhësisë dhe aplikoni vlerat e mëposhtme të madhësisë:

  • Gjerësia (Ngjitës): 80 vw
  • Lartësia (Ngjitës): 90vh
Divi

Koha e tranzicionit

Më në fund, lundroni te skeda Avancuar dhe të rrisë kohëzgjatjen e tranzicionit.

  • Kohëzgjatja e tranzicionit: 500 ms

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

zyrë

Maska e sfondit Divi Sticky

Shkarkoni DIVI Tani!!!

Telefon

Maska e sfondit Divi Sticky

Shkarkoni DIVI Tani!!!

Përfundim

Në këtë artikull, ne ju kemi treguar edhe një herë se si të bëheni krijues me opsionet ngjitëse të Divi. 

Në mënyrë të veçantë, ne ju kemi treguar se si të kombinoni cilësimet e filtrit të Divi dhe opsionet ngjitëse.

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.

...