Kur krijoni faqen tuaj Rreth, ndoshta do të dëshironi të prezantoni anëtarët e ekipit tuaj atje. Duke vepruar kështu, ju lejoni vizitorët ndërveproni me njerëzit pas biznesit tuaj. Nëse jeni duke kërkuar për një mënyrë për të animuar seksionin e anëtarëve të ekipit tuaj në rrotull, mund ta gjeni të dobishëm këtë tutorial. Ne do të krijojmë një karusel të anëtarëve të ekipit me lëvizje automatike që lëviz kur ju jeni vizitorët lëvizni faqen.
demonstrim
Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.
Fillimi i konceptimit
Shto një seksion të ri
ndarje
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 e sipërme: 200px (tavolinë), 100 px (tablet dhe telefon)
- Mbushja e poshtme: 200px (tavolinë), 100 px (tabletë dhe telefon)
përplot
Për t'u siguruar që nuk shfaqet asnjë shirit lëvizës horizontale në modelin tonë, ne do të fshehim tejmbushjet e seksioneve në skedën e përparuar.
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
Shtoni rreshtin # 1
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:
sizing
Pa shtuar akoma ndonjë modul, hapni cilësimet e rreshtit, kaloni në skedën e dizajnit dhe ndryshoni gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.
- Gjerësia: 90%
- Gjerësia maksimale: 1580px
ndarje
Ne gjithashtu shtojmë mbushje me porosi të sipërme dhe të poshtme.
- Mbushja e sipërme: 100px
- Mbushja e poshtme: 100px
Shtoni një modul teksti në kolonë
Shto përmbajtje H2
Është koha për të shtuar module, duke filluar me modulin e parë të tekstit. Futni atë 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 i fontit 2: Quicksand
- Titulli i fontit 2: gjysëm i guximshëm
- Ngjyra e tekstit të artikullit 2: # 000000
- Kreu 2 Madhësia e tekstit: 70px (desktop), 50 px (tabletë), 40px (telefon)
Shtoni një modul ndarjeje në kolonë
dukshmëri
Pastaj shtoni një modul ndarjeje. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Linjë
Pastaj bëni disa ndryshime në cilësimet e linjës.
- Ngjyra e linjës: # edf000
- Stili i linjës: i fortë
- Pozicioni i linjës: Në krye
sizing
Dhe plotësoni parametrat e modulit duke modifikuar parametrat e dimensionimit në përputhje me rrethanat:
- Pesha e ndarësit: 20px
- Gjerësia: 11%
- Shtrirja e modulit: majtas
- Lartësia: 20px
Shtoni një rresht # 2
Struktura e kolonës
Në rreshtin tjetër! Përdorni strukturën e mëposhtme të kolonës:
sizing
Pa shtuar më shumë module, hapni parametrat e linjës dhe modifikoni parametrat e madhësisë si më poshtë:
- Përdorni një gjerësi të ulluqeve me porosi: Po
- Gjerësia e zorrës së trashë: 2
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni mbushjen e majtë dhe të djathtë vetëm në ekranet më të vogla.
- Mbushja e majtë: 5% (vetëm tablet dhe telefon)
- Mbushja e duhur: 5% (vetëm 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ë kolona. Zbatoni të tre hapat në secilën nga kolonat në rreshtin tuaj.
Sfondi i gradientit
Së pari, shtoni një sfond gradient në secilën kolonë.
- Ngjyra 1: rgba (255,255,255,0)
- Ngjyra 2: rgba (0,0,0,0,84)
- Lloji i gradientit: linear
- Pozicioni i fillimit: 25%
- Pozicioni i fundit: 86%
- Vendosni gradientin sipër imazhit të sfondit: Po
Imazhi 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 të sfondit: Qendra
Elementi kryesor
Përfundoni cilësimet e kolonës duke shtuar CSS të personalizuar në elementin kryesor të tabletës të secilës kolonë. Këto rreshta të kodit CSS do të na ndihmojnë të vendosim kolonat njëra poshtë tjetrës në tabletë, në vend që të kemi dy krah për krah.
gjerësia: 100%! e rëndësishme; diferenca: 50px 0px 50px 0px! e rëndësishme;
Shtoni një modul personi në kolonë
Shto përmbajtje
Për të ndarë informacione rreth 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. Ne përdorim imazhin sfond të kolonës në vend.
Imazhi i sfondit
Tjetra ne do të shtojmë një mbivendosje të imazhit si imazhin e sfondit të modulit. Mund ta gjeni atë që po përdorim duke shkarkuar dosjen në fillim të këtij udhëzimi.
- Madhësia e imazhit në sfond: Kopertina
- Pozicioni i imazhit të sfondit: Qendra
Cilësimet e tekstit të titullit
Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit të titullit si më poshtë:
- Niveli i titullit: H3
- Shkronja e titullit: Quicksand
- Pesha e fontit të titullit: e guximshme
- 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.
- Tipi i Trupit: Open Sans
- Ngjyra e tekstit të trupit: #ffffff
- Lartësia e vijës së trupit: 2,2 em
Cilësimet e cilësimeve të tekstit
Pastaj bëni disa ndryshime në cilësimet e tekstit të pozicionit.
- Pozicioni i shkronjave: Sans Open
- 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.
- Mbushje e sipërme: 70%
- Mbushje e poshtme: 10%
- Mbushja e majtë: 10%
- Mbushja e duhur: 10%
Kopjoni modulin e Personit 4 herë
Pasi të keni përfunduar modulin e Personit, mund ta kloni tërë modulin katër herë.
Vendosni kopje në kolonat e mbetura
Vendosni module të kopjuara në katër kolonat e mbetura të rreshtit. Sigurohuni që të ndryshoni gjithashtu përmbajtje.
Kthejeni Row në një Carousel Scroll Auto
Ndryshoni madhësinë e rreshtit # 2
Tani për ta kthyer këtë rresht në një karusel anëtar të ekipit të lëvizjes automatike, duhet të rihapim cilësimet e rreshtit dhe të ndryshojmë gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.
- Gjerësia: 180%
- Gjerësia maksimale: 220% (tavolinë), 100% (tabletë dhe telefon)
Shtoni lëvizjen horizontale të rreshtit # 2
Përfundoni cilësimet e linjës duke shtuar lëvizjen horizontale te cilësimet e efektit të lëvizjes në skedën e përparuar dhe keni mbaruar!
- Aktivizoni lëvizjen horizontale: Po
- Fillimi i kompensimit:
- Zyra: 2,5
- Tableta dhe telefoni: 0
- Kompensimi mesatar: 0 (me 40%)
- Fundi i kompensimit:
- Zyra: -25 (me 62%)
- Tableta dhe telefoni: 0
- Efekti i lëvizjes së këmbëzës: 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.
zyrë
Mendimet e fundit
Në këtë tutorial, ne ju kemi treguar se si të bëheni krijues me efektet e integruara të lëvizjes së Divi. Në mënyrë të veçantë, ne rikrijuam një karusel të bukur të anëtarëve të ekipit me lëvizje automatike. Kur vizitorët lëvizni faqen, shfaqet një pjesë tjetër e karuselit.
