Kur dizajnoni faqen tuaj të shërbimeve, dëshironi të siguroheni që ju vizitorët vini re të gjitha shërbimet e ndryshme që ofroni. Në shumë raste do të jetë vetëm një shërbim specifik që ata kërkojnë, por nëse ofroni një mënyrë të thjeshtë në strukturën e shërbimit tuaj, ka më shumë gjasa që vizitorët merreni me të gjitha.
Në këtë tutorial, ne do t'ju tregojmë se si të bëheni krijues me efektet e rrotullimit të Divi dhe krijoni një tranzicion shërbimi pa probleme. Ju gjithashtu do të jeni në gjendje të shkarkoni skedarin JSON falas!
Le të shkojnë.
Rezultati i mundshëm
Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.
1, rikrijoni strukturën e elementeve
Shtoni seksionin # 1
ndarje
Filloni duke shtuar një seksion të ri në faqen ku po punoni. Hapni cilësimet e seksionit dhe ndryshoni vlerat e mbushjes në madhësi të ndryshme të ekranit.
- Mbushja e sipërme: 80px (desktop dhe tablet), 0px (telefon)
- Mbushja e poshtme: 80px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar më shumë module, hapni parametrat e linjës dhe zbatoni ndryshimet e mëposhtme në parametrat e dimensionimit:
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 90%
- Gjerësia maksimale: 1580px
ndarje
Pastaj shtoni një diferencë të sipërme dhe të poshtme.
- Marzhi i sipërm: 200px
- Marzhi i poshtëm: 200px
Shtoni një modul teksti në kolonën 1
Shto përmbajtje H2
Është koha për të shtuar module, duke filluar me një modul teksti në kolonën 1. Futni përmbajtje H2 sipas zgjedhjes suaj.
Cilësimet e tekstit H2
Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H2 si më poshtë:
- Titulli 2 Policia: Tremujori
- Titulli 2 Madhësia e tekstit: 80px (desktop), 50 px (tabletë), 40px (telefon)
- Lartësia e rreshtit 2 të kokës: 1.2em
ndarje
Pastaj shtoni një diferencë më të ulët në tabletë dhe telefon.
- Marzhi i poshtëm: 50 pixel (vetëm tablet dhe telefon)
Shtoni një modul teksti në kolonën 2
Shto përmbajtje
Le të kalojmë në kolonën e dytë. Atje moduli i parë që na nevojitet është një modul teksti me një të caktuar përmbajtje përshkrim.
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:
- Shkronja e tekstit: kabina
- Stili i shkronjave të tekstit: shkronja të mëdha
- Ngjyra e tekstit: # 000000
- Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
- Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
- Lartësia e vijës së tekstit: 3em
Shtoni një modul ndarjeje në kolonën 2
dukshmëri
Moduli tjetër dhe i fundit që na duhet në këtë kolonë është një modul i ndarjes. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Linjë
Pastaj ndryshoni ngjyrën e linjës së modulit.
- Ngjyra e linjës: # 000000
sizing
Pastaj bëni disa ndryshime në parametrat e madhësisë.
- Pesha e ndarësit: 3px
- Gjerësia: 28%
ndarje
Ne gjithashtu shtojmë një diferencë të lartë.
- Marzhi i sipërm: 10px
Shtoni seksionin # 2
ndarje
Le të kalojmë në seksionin tjetër të rregullt. Hiqni mbushjen e parazgjedhur të sipërme nga seksioni.
- Mbushja e sipërme: 0px
përplot
Fshihni edhe rrjedhjet e tejmbushura.
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të parë duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar më shumë module, hapni parametrat e linjës, hyrni në parametrat e dimensionimit dhe bëni modifikimet e mëposhtme:
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 1
- Barazoni lartësitë e kolonave: Po
- Gjerësia: 90%
- Gjerësia maksimale: 1580px
ndarje
Pastaj hiqni të gjithë mbushjen e paracaktuar të sipërme dhe të poshtme.
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
Cilësimet e kolonës 1
Ngjyrë e sfondit
Pastaj hapni cilësimet për kolonën 1 dhe ndryshoni ngjyrën e sfondit.
- Ngjyra e sfondit: # f7f7f7
ndarje
Përfundoni cilësimet e kolonës duke shtuar vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.
- Mbushja e sipërme: 200px (tavolinë), 100 px (tablet dhe telefon)
- Mbushja e poshtme: 200px (tavolinë), 100 px (tabletë dhe telefon)
- Mbushja e majtë: 8%
- Mbushja e duhur: 8%
Cilësimet e kolonës 2
ndarje
Vazhdoni duke hapur cilësimet në kolonën 2. Shkoni te skeda e përparuar dhe shtoni vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.
- Mbushja kryesore: 100px (desktop), 50 px (tablet dhe telefon)
- Mbushja e poshtme: 200px
- Mbushja e majtë: 150 px (tavolinë), 0 px (tablet dhe telefon)
Shtoni një modul ndarjeje në kolonën 1
dukshmëri
Në kolonën e parë, moduli i parë që na duhet është një modul ndarës. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Linjë
Pastaj ndryshoni ngjyrën e linjës së modulit.
- Ngjyra e linjës: # 000000
sizing
Bëni gjithashtu ndryshime në parametrat e madhësisë.
- Pesha e ndarësit: 3px
- Gjerësia: 50%
Shtoni një modul teksti në kolonën 1
Shto përmbajtje H3
Moduli tjetër që na nevojitet në kolonën 1 është një modul teksti me të përmbajtje H3
Cilësimet e tekstit H3
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit H3:
- Titulli 3 Policia: Tremujori
- Ngjyra e tekstit të artikullit 3: # 000000
- Pika 3 Madhësia e tekstit: 50px (desktop), 40px (tabletë), 35px (telefon)
- Lartësia e rreshtit 3 të kokës: 1.1em
Shtoni një modul teksti në kolonën 2
Shto përmbajtje
Në kolonën e dytë, moduli i parë që na duhet është një modul teksti me disa përmbajtje përshkrimi.
Cilësimet e tekstit
Ndryshoni cilësimet e tekstit të modulit si më poshtë:
- Shkronja e tekstit: kabina
- Stili i shkronjave të tekstit: shkronja të mëdha
- Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
- Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
- Lartësia e vijës së tekstit: 3em
Shtoni një modul butoni në kolonën 2
Shto një kopje
Moduli tjetër dhe i fundit që na duhet është një modul butoni. Vendosni një kopje të zgjedhjes suaj.
Cilësimet e butonit
Pastaj stilo butonin.
- Përdorni stilet me porosi për butonin: Po
- Madhësia e tekstit të butonit: 20 piksele
- Ngjyra e tekstit të butonit: #ffffff
- Ngjyra e sfondit të butonit: # 000000
- Gjerësia e kufirit të butonit: 0px
- Font Butoni: Tremujor
- Pesha e shkronjave të butonit: e theksuar
ndarje
Shtoni gjithashtu mbushjen me porosi.
- Mbushja e sipërme: 50px
- Mbushja e poshtme: 50px
- Mbushja e majtë: 100px
- Mbushja e duhur: 100px
pozitë
Dhe ripoziciononi butonin në përputhje me rrethanat:
- Pozicioni: Absolut
- Vendndodhja: majtas
Klononi rreshtin sa herë të jetë e nevojshme
Pasi të keni përfunduar të gjithë rreshtin dhe të gjitha modulet e saj, mund të klononi të gjithë rreshtin tri herë.
Ndryshoni të gjithë përmbajtjen
Sigurohuni që të redaktoni të gjithë përmbajtjen në rreshta të kopjuar.
2. Aplikoni efektet lëvizëse
Efektet lëvizëse të rreshtit të parë
Lëvizja horizontale
Pasi të keni përfunduar të gjitha linjat në seksionin tuaj, është koha të shtoni efektet e lëvizjes. Hapni vijën e parë të seksionit dhe shtoni lëvizje horizontale.
- Aktivizoni lëvizjen horizontale: Po
- Fillimi i kompensimit: -5
- Kompensimi mesatar: 0 (me 26%)
- Përfundimi i kompensimit: 0
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Zbehet brenda dhe jashtë
Përdorni gjithashtu një efekt venitje dhe hyrëse.
- Aktivizoni zbehet brenda dhe jashtë: Po
- Opaciteti fillestar: 100%
- Opaciteti mesatar: 100% (me 50%)
- Hapësia e mbarimit: 0% (në 53%)
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Efektet lëvizëse të rreshtit të mesëm
Lëvizja vertikale
Tjetra, ne do të shtojmë efektet e lëvizjes në të gjitha linjat midis rreshtit të parë dhe të fundit të seksionit. Së pari përdorni një lëvizje vertikale:
- Aktivizoni lëvizjen vertikale: Po
- Fillimi i kompensimit: -4
- Kompensimi mesatar: 0 (me 26%)
- Përfundimi i kompensimit: 0
- Efekti i shkatjes së lëvizjes: mesi i elementit
Zbehet brenda dhe jashtë
Aktivizoni gjithashtu një efekt brenda dhe jashtë zbehet.
- Aktivizoni zbehet brenda dhe jashtë: Po
- Opaciteti fillestar: 0%
- Opaciteti mesatar: 100% (nga 27% në 50%)
- Përfundimi i kompensimit: 0 (me 53%)
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Efektet lëvizëse të linjës së fundit
Lëvizja vertikale
Pastaj hapni rreshtin e fundit të seksionit dhe shtoni lëvizjen vertikale të mëposhtme:
- Aktivizoni lëvizjen vertikale: Po
- Fillimi i kompensimit: -4
- Kompensimi mesatar: 0 (me 26%)
- Përfundimi i kompensimit: 0
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Zbehet brenda dhe jashtë
Me një efekt venitje dhe dalëse dhe ju jeni mbaruar!
- Aktivizoni zbehet brenda dhe jashtë: Po
- Opaciteti fillestar: 0%
- Opaciteti mesatar: 100% (nga 27% në 50%)
- Hapësia e mbarimit: 100% (në 53%)
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Rezultati përfundimtar
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.
Mendimet e fundit
Në këtë artikull, ne ju treguam se si të krijoni një tranzicion të bukur të shërbimit me efektet e rrotullimit të Divi. Edhe përpara se një shërbim të zhduket, tjetri fillon të shfaqet, duke dhënë një tranzicion të këndshëm që është i lehtë për syrin. Kjo qasje do t'ju ndihmojë të nënvizoni çdo shërbim në një nivel individual. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
