Dëshironi që anëtarët e ekipit tuaj të prezantohen në formën e një karuseli me Divi ?
Kur konfiguroni faqen tuaj Rreth, ndoshta do të dëshironi të përfshini edhe anëtarët e ekipit tuaj atje. Duke vepruar kështu, ju lejoni vizitorët për t'u lidhur me njerëzit pas biznesit tuaj.
Nëse po kërkoni një mënyrë për të animuar seksionin e anëtarëve të ekipit tuaj në rrotull, do t'ju pëlqejë ky tutorial.
Ne do të rikrijojmë një karusel të bukur të anëtarëve të ekipit me lëvizje automatike që lëviz si ju vizitorët lëvizni faqen.
Le të shkojnë.
studim
Përpara se të zhytemi në tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.
Kompjuter desktop
Versioni celular
Le të fillojmë të dizajnojmë me Divi
Lexo gjithashtu: Divi: Si të zbuloni përmbajtjen kur rri pezull mbi ndarësin e seksionit
Shto një seksion të ri
Magjistarët e brendshëm
Filloni duke shtuar një seksion të ri të rregullt në faqen në të cilën po punoni. Hapni cilësimet e seksionit dhe shtoni mbushje të personalizuara në madhësi të ndryshme të ekranit.
- Mbushja (lart dhe poshtë): 200 px (desktop), 100 px (tableti dhe telefoni)
dukshmëri
Për të siguruar që në dizajnin tonë të mos shfaqen shirita lëvizës horizontalë, ne do të fshehim tejmbushjet e seksioneve në skedën e 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 në seksion duke përdorur strukturën e mëposhtme të kolonës:
gjerësi
Pa shtuar ende asnjë modul, hapni cilësimet e linjës, kaloni në skedën Projektimi dhe ndryshoni gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.
- Gjerësia: 90%
- Gjerësia maksimale: 1 px
ndarje
Ne gjithashtu shtojmë mbushje me porosi të sipërme dhe të poshtme.
- Mbushje (lart dhe poshtë): 100 px
Shtoni një modul teksti në kolonë
Shtoni përmbajtjen e madhësisë H2
Është koha për të shtuar module, duke filluar me modulin e parë Text. Shkruani a përmbajtje Madhësia H2 sipas zgjedhjes suaj.
Cilësimet e tekstit H2
Kalo te skeda Projektimi të modulit dhe modifikoni parametrat e tekstit H2 si më poshtë:
- Fonti: Quicksand
- Pesha e shkronjave: Gjysmë e trashë
- Ngjyra e tekstit: #000000
- Madhësia e tekstit: 70px (Desktop), 50px (Tablet), 40px (Telefon)
Shtoni një modul "Ndarës" në kolonë
dukshmëri
Pastaj shtoni një modul ai që ndan. Sigurohuni që opsioni "Trego ndarjen" është i aktivizuar.
- Shfaq ndarësin: PO
Linjë
Pastaj bëni disa ndryshime në cilësimet e linjës.
- Ngjyra e linjës: #edf000
- Stili: I ngurtë
- Pozicioni i linjës: Top
sizing
Dhe plotësoni parametrat e modulit duke modifikuar parametrat e madhësisë në përputhje me rrethanat:
- Pesha e ndarësit: 20 px
- Gjerësia: 11%
- Moduli i shtrirjes: majtas
- Lartësia: 20 px
Shtoni rreshtin 2
Struktura e kolonës
Rreshti tjetër! Përdorni strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:
- Përdorni gjerësinë e ulluqit të personalizuar: Po
- Gjerësia e kanalit: 2
- Gjerësia: 100%
- Gjerësia maksimale: 100%
Hapësira (vetëm tableti dhe telefoni)
Më pas, shtoni mbushje majtas dhe djathtas vetëm në madhësi të vogla të ekranit.
- Mbushje (majtas dhe djathtas): 5% (vetëm për tablet dhe telefon)
Parametrat e kolonës (5x)
Tani, në tre hapat e ardhshëm të këtij tutoriali, ne do të bëjmë disa ndryshime në kolonat. Aplikoni tre hapat në secilën prej kolonave në rreshtin tuaj.
Gradienti i Sfondit
Së pari, shtoni një sfond gradient në secilën kolonë.
- Ndalesat e gradientit (25%): rgba (255,255,255,0)
- Ndalesat e gradientit (86%): rgba (0,0,0,0.84)
- Lloji: Linear
- Gradient katror mbi sfond Imazhi: PO
Historiku i sfondit
Pastaj ngarkoni një imazh sfond të zgjedhur nga ju. Ky imazh në sfond përfaqëson çdo anëtar të ekipit, kështu që përdorni një imazh të ndryshëm për secilën kolonë.
- Madhësia e imazhit në sfond: Kopertina
- Pozicioni i imazhit në sfond: Qendër
U shtua CSS e personalizuar (vetëm tableti)
Plotësoni cilësimet e kolonës duke shtuar CSS të personalizuar në elementin kryesor (Për pamje Tabletë vetëm) të secilës kolonë.
Këto rreshta të kodit CSS do të na ndihmojnë të vendosim kolonat njëra nën tjetrën në tablet, në vend që të kemi dy krah për krah.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Shtoni një modul 'Person' në kolonë
Shto përmbajtje
Për të ndarë informacionin e anëtarëve të ekipit, ne do të përdorim një modul person.
Shtoni modulin e parë Person në kolonën 1 dhe përdorni përmbajtje e zgjedhjes suaj.
Fshi imazhin
Pastaj fshini imazhin. Në vend të kësaj, ne përdorim imazhin e sfondit të kolonës.
Historiku i sfondit
Më pas, ne do të shtojmë një mbivendosje imazhi si imazhin e sfondit për modulin.
- Madhësia e imazhit në sfond: Kopertina
- Pozicioni i imazhit në sfond: në qendër
Cilësimet e tekstit të titullit
Kalo te skeda Projektimi modul dhe ndryshoni cilësimet e tekstit të titullit si më poshtë:
- Niveli i titullit: H3
- Fonti i titullit: Quicksand
- Pesha e shkronjave: Bold
- Ngjyra e tekstit të titullit: #ffffff
- Madhësia e tekstit të titullit: 230%
Cilësimet e tekstit të trupit
Ndryshoni gjithashtu cilësimet e tekstit të trupit.
- Font Body: Open Sans
- Ngjyra e tekstit: #ffffff
- Lartësia e linjës: 2,2 em
Cilësimet e tekstit të postimit të anëtarëve të ekipit
Më pas, bëni disa ndryshime në cilësimet e tekstit të pozicionit të mbajtur nga anëtari i ekipit.
- Fonti i pozicionit: Hap pa
- Ngjyra e tekstit të pozicionit: #edf000
ndarje
Dhe plotësoni cilësimet e modulit duke shtuar vlerat e personalizuara të mbushjes në cilësimet e hapësirës.
- Mbushja: 70% (sipër), 10% (poshtë, majtas dhe djathtas)
Klononi modulin "Person" katër herë
Pasi të keni përfunduar modulin e Personit, mund ta kloni tërë modulin katër herë.
Vendosni dublikatat në kolonat e mbetura
Vendosni module të kopjuara në katër kolonat e mbetura të rreshtit.
Gjithashtu sigurohuni që të ndryshoni përmbajtje.
Kthejeni një rresht në një karusel me lëvizje automatike
Shih gjithashtu: Divi: Si të krijoni një rrjet kolone fluide në hover
Ndrysho madhësinë e rreshtit #2
Tani, për ta kthyer këtë rresht në një karusel me lëvizje automatike, do të na duhet të rihapim cilësimet e linjës dhe të ndryshojmë gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.
- Gjerësia: 180%
- Gjerësia maksimale: 220% (Desktop), 100% (Tablet dhe telefon)
Shtoni lëvizjen horizontale në rreshtin 2
Plotësoni cilësimet e linjës duke shtuar lëvizje horizontale te cilësimet e efektit të lëvizjes në skedë Avancuar nën opsion Efektet lëvizni dhe mbarove!
- Aktivizo lëvizjen horizontale: Po
- Kompensimi i fillimit:
- Desktop: 2,5
- Tableti dhe telefoni: 0
- Kompensimi i mesëm: 0 (deri në 40%)
- Kompensimi përfundimtar:
- Desktop: -25 (deri në 62%)
- Tableti dhe telefoni: 0
- Shkaktësi i efektit të lëvizjes: Mesi i elementit
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.
Kompjuter desktop
Shkarkoni DIVI Tani!!!
Pamje celulare
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju kemi treguar se si të bëheni krijues me efektet e integruara të lëvizjes së Divi.
Konkretisht, ne rikrijuam një karusel të bukur me anëtarë të ekipit me lëvizje automatike. Kur vizitorët lëvizni faqen, shfaqet një pjesë tjetër e karuselit.
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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe 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.
...
