Kalo te përmbajtja kryesore

Si të krijoni një karusel lëvizës të një anëtari të ekipit me Divi

Divi: tema më e lehtë për t'u përdorur nga WordPress

Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62. [Rekomanduar]

Kur krijoni faqen tuaj About, ju ndoshta do të dëshironi të prezantoni edhe anëtarët e ekipit tuaj. Duke vepruar kështu, ju lejoni vizitorët të ndërveprojnë me njerëzit që qëndrojnë pas biznesit tuaj. Nëse jeni duke kërkuar një mënyrë për të gjallëruar pjesën e anëtarëve të ekipit tuaj në rrotull, ky udhëzues mund të jetë për ju. Ne do të krijojmë një karusel të anëtarit të ekipit të lëvizjes automatike që lëviz ndërsa vizitorët tuaj lëvizin në faqe. 

demonstrim

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Shkoni anëtarin e ekipit divi

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)
Konfigurimi i parametrit

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
Konfigurimi i tejmbushjes

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:

Zgjidhni paraqitjen divi

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
Parametri i vijës Divi

ndarje

Ne gjithashtu shtojmë mbushje me porosi të sipërme dhe të poshtme.

  • Mbushja e sipërme: 100px
  • Mbushja e poshtme: 100px
Konfigurimi i ndarjes së vijës

Shtoni një modul teksti në kolonë

Shto përmbajtje H2

Timeshtë koha për të shtuar module, duke filluar me një modul të parë teksti. Futni përmbajtjen H2 sipas zgjedhjes suaj.

Njihuni me ekipin

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)
Hapësira e tekstit Divi

Shtoni një modul ndarjeje në kolonë

dukshmëri

Pastaj shtoni një modul ndarjeje. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni me lehtësi çdo dizajn të faqes në internet me një pamje profesionale. Ndaloni të paguani shtrenjtë për ato që mund të bëni vetë. [Pa]

  • Trego ndarësin: Po
Trego ndarësin divi

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
Stili i ndarjes së divit

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
Madhësia e modulit të vijës divi

Shtoni një rresht # 2

Struktura e kolonës

Në rreshtin tjetër! Përdorni strukturën e mëposhtme të kolonës:

Konfigurimi i kolonës Divi

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%
Konfigurimi i gjerësisë së ullukut

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)
Konfigurimi i stilit të ndarjes së vijave

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.

Parametri divi i konfigurimit të linjës

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
Konfigurimi i kolonës së pasme Divi

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ë.

A po kërkoni temat më të mira të WordPress dhe shtojcat?

Shkarkoni shtojcat më të mira dhe temat e WordPress në Envato dhe krijoni lehtësisht faqen tuaj te internetit. Tashmë më shumë se shkarkimet e 49.720.000. [EXCLUSIVE]

  • Madhësia e imazhit në sfond: Kopertina
  • Pozicioni i imazhit të sfondit: Qendra
Shto imazhin e sfondit të kolonës divi

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;
Kodi kolonë div css

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ë të personit në kolonën 1 dhe përdorni çfarëdo përmbajtje që dëshironi.

Emri i personit Divi

Fshi imazhin

Pastaj fshini imazhin. Ne përdorim imazhin sfond të kolonës në vend.

Hiq imazhin divi

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
Konfigurimi i sfondit të modulit të personit

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%
Përshtatja e titullit të modulit Divi

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
Përshtatja e trupit Divi

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
Pozicioni Divi

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%
Hapësira e modulit të personit Divi

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 modulet e kopjuara në katër kolonat e mbetura të rreshtit. Sigurohuni që të redaktoni edhe përmbajtjen.

Lehtë të krijoni Dyqanin tuaj Online

Shkarko pa pagesë WooCommerce, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe digjitale në WordPress. [Rekomanduar]

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)
Hapësira e modifikimit të divit

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
Konfigurimi i animacionit duke lëvizur Divi

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ë

Shkoni anëtarin e ekipit divi

Mendimet e fundit

Në këtë manual, ne ju kemi treguar se si të bëheni krijues me efektet e zhvendosura të Divi-t. Në mënyrë të veçantë, ne kemi rikrijuar një karusel të bukur, anëtar anëtari të ekipit që lëviz. Ndërsa vizitorët lëvizin poshtë faqes, shfaqet një pjesë tjetër e karuselit.

Ky artikull përmban komente 0

Lini një koment

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *

Kjo faqe përdor Akismet për të zvogëluar padëshiruar. Mësoni më shumë për mënyrën se si përdoren të dhënat e komenteve tuaja.

Kthehu në fillim
0 aksionet
pjesë
cicërimë
Regjistrohem