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ë
Telefon
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
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ë.
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.
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
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ë
Shkarkoni DIVI Tani!!!
Telefon
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.
...