Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Animerte sirkeltellere er en populær måte å presentere informasjon (som statistikk eller beregning) på en webside med morsom interaksjon. Faktisk er du kanskje allerede kjent med Divis sirkeltellermodul, noe som gjør det raskt og enkelt å legge sirkelteller til Divi-nettstedet ditt. 

I denne opplæringen skal vi imidlertid vise deg hvordan du lager fullstendig tilpassede sirkelteller som animeres mens du ruller! Vi trenger ikke noen ekstern tilpasset CSS for å opprette dem. Trikset er å utnytte Layers-funksjonen til Divi til å administrere flere overliggende og animerte moduler med presisjon.

Mulig utfall

Her er en rask oversikt over animasjonssirkeldeler som vi vil lage i denne opplæringen.

animerte sirkelteller på bla

Opprettelse av de fire sirkeltellerne som blir levende når du blar med Divi

Seksjon og linjekonfigurasjon

Først legger du til en rad med fire kolonner i standarddelen.

animerte sirkelteller på bla

Deretter åpner du seksjonsinnstillingene og legger til en topp- og bunnmargin slik at vi har nok plass til å teste rulleeffektene til sirkeltellerne som vi skal lage.

  • Marginen: 85vh høy, 85vh lav
animerte sirkelteller på bla

Åpne deretter linjeinnstillingene og oppdater følgende:

  • Rennesteinsbredde: 1
  • Bredde: 100%
  • Maks bredde: 1200px
animerte sirkelteller på bla

Bruke lagvisningen

Før du begynner å lage de animerte sirkeltellerne, må du sørge for å distribuere Divi Layers-funksjonen. Du kan gjøre dette ved å klikke på ikonet for de grå lagene i innstillingsmenyen nederst.

animerte sirkelteller på bla

Fordi vi skal lage mange overlappende elementer (eller lag), vil lagboksen definitivt være nyttig for å administrere lagene våre i fremtiden.

Opprettelse av animert sirkelteller # 1 (25%)

Denne første animerte sirkeltelleren animerer opptil 25% av sirkelen på rullen og har den prosentvise teksten som tilsvarer sentrum som vil blande seg inn i rullen. For å bygge det komplette sirkeldiskdesignet, vil vi bruke flere overlappende tekstdelere og moduler. Slik gjør du det.

Ryggen

For å lage baksirkelen skal vi bruke en skillemodul som vi skal forme som en sirkel og gi den en bakgrunnsfarge.

Legg til en separasjonsmodul
animerte sirkelteller på bla

Trekk skillelinjen opp i lagvisningen, og endre etiketten for å lese "baksirkel". Åpne deretter innstillingene til separasjonsmodulen og oppdater følgende:

  • Vis skillelinje: NO
  • Bakgrunnsfarge: # c3e0e5
animerte sirkelteller på bla

Oppdater designparametrene som følger:

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • Bredde: 250px
  • Høyde: 250px
  • Margin: 25 piksler øverst, 25 piksler nederst, 25 piksler til venstre
  • Avrundede hjørner: 50%
animerte sirkelteller på bla

Den roterende fargebjelken

Den neste delen av sirkeltelleren vil være den roterende fargelinjen. Dupliser den forrige skillelinjen (baksirkelen) for å starte designet på nytt. Oppdater deretter den nye separatoren med etiketten "fargelinje".

animerte sirkelteller på bla

For å skape den roterende fargelinjeeffekten, må vi gjøre denne skillelinjen om til en halvsirkel med fargen vi vil bruke til stolpen.

Åpne innstillingene for fargebjelkeutskiller og oppdater følgende:

  • Bakgrunnsfarge: ingen
  • Bakgrunnen for venstre fargelenging: # 121b55
  • Bakgrunnsfarge på gradient til høyre: rgba (255,255,255,0)
  • Gradientretning: 90deg
  • Startposisjon: 50%
  • Sluttposisjon: 0%
animerte sirkelteller på bla

I noen nettlesere er det et lite overlappende problem som viser uønsket farge gjennom lagene. For å unngå dette, skal vi gjøre denne halvsirkelen litt mindre og justere forskyvningen deretter.

  • Bredde: 248px
  • Høyde: 248px
animerte sirkelteller på bla

For å få sirkelen til fargebjelken til å overlappe baksirkelen, gi deleren en absolutt posisjon som følger:

  • Posisjon: absolutt
  • Vertikal forskyvning: 26 piksler
  • Horisontal forskyvning: 26 piksler
animerte sirkelteller på bla

Deretter legger du til følgende rulleeffekt for å rotere den sirkulære linjen 90 grader (eller 25% av sirkelen).

Under kategorien Rotary Effects ...

  • Startrotasjon: 0deg (ved 15% av vinduet)
  • Gjennomsnittlig rotasjon: 90 grader (ved 20% -25% av visningsområdet)
  • Rotasjons slutt: 90 grader (ved 30% av visningsområdet)
animerte sirkelteller på bla

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

Prosentandelen og verdiene for rotasjon her ser kanskje ikke ut til å være fullstendig fornuftig på dette tidspunktet. Vi gjør det lettere å oppdatere rotasjonen senere når vi bygger neste sirkelteller som ender ved 180 grader (50% av sirkelen). Det viktige på dette punktet er at rotasjonen ender på 90 grader (eller 25%).

Skjoldet

Det neste elementet i sirkeltelleren vår er det jeg kaller skjoldet, som er en annen halvcirkel som skjuler venstre side av fargelinjesirkelen når den spinner.

 For å lage skjoldet, dupliser den første Back Circle-delermodulen vi opprettet tidligere. Dra den deretter under "Color Bar" skillemodulen og oppdater etiketten til "skjold" for enkel referanse.

animerte sirkelteller på bla

Åpne skjermdelingsinnstillingene og oppdater følgende:

  • Bakgrunnsfarge: ingen
  • Bakgrunnsfarge på venstre gradient: # c3e0e5 (samme som ryggen)
  • Bakgrunnsfarge på gradient til høyre: rgba (255,255,255,0)
  • Gradientretning: 90deg
  • Startposisjon: 50%
  • Sluttposisjon: 0%
animerte sirkelteller på bla

Gi nå modulen en absolutt posisjon som følger:

  • Posisjon: absolutt
  • Vertikal forskyvning: 25px
  • Horisontal forskyvning: 25 piksler
animerte sirkelteller på bla

Den fremre sirkelen

Den neste delen av sirkeltelleren er den fremre sirkelen, som vil skjule den midterste delen av de forrige lagene og utsette ytterkanten.

For å opprette den, dupliser den bakre sirkeldeleren, slipp den under skjermdelermodulen og oppdater etiketten til "front sirkel".

animerte sirkelteller på bla

Åpne innstillingene for frontsirkelseparasjonsmodulen og oppdater følgende:

  • Bakgrunnsfarge: #ffffff
  • Bredde: 200px
  • Høyde: 200px
animerte sirkelteller på bla

Legg deretter til den absolutte posisjonen som følger:

  • Posisjon: absolutt
  • Vertikal forskyvning: 50px
  • Horisontal forskyvning: 50px
animerte sirkelteller på bla

Antall misfarging

Det siste stykket av denne første sirkeltelleren er antallet misfarging som tilsvarer verdien som er angitt av rotasjonsstangen.

For å bygge den, legger du til en ny tekstmodul under separasjonsmodulen foran sirkelen.

animerte sirkelteller på bla

I Lag-boksen, navngi den nye tekstmodulen "num1". Åpne deretter innstillingene og oppdater kroppen til å lese "25%".

animerte sirkelteller på bla

Oppdater følgende under designinnstillingene:

  • Skrifttypevekt på teksten: fet skrift
  • Tekststørrelse: 25px
  • Høyde på tekstlinjen: 2em
  • Justering av teksten: senter
animerte sirkelteller på bla
  • Bredde: 200px
  • Høyde: 200px
  • Avrundede hjørner: 50%
animerte sirkelteller på bla
  • Polstring: over 75px
  • Posisjon: absolutt
  • Vertikal forskyvning: 50px
  • Horisontal forskyvning: 50px
animerte sirkelteller på bla

Nå skal teksten være perfekt sentrert i sirkeltelleren.

For å legge til blekningseffekten, oppdater følgende rulleeffekter:

Under kategorien Fade In og Fade Out ...

  • Aktiver fade inn og ut: JA
  • Opprinnelig opacitet: 0% (10% av vinduet)
  • Gjennomsnittlig opacitet: 100% (ved 20% av vinduet)
  • Slutt opasitet: 100% (ved 100% av visningen)
animerte sirkelteller på bla

Det er det for sirkulærmåleren. Oppdag resultatet.

animerte sirkelteller på bla

Alt du trenger å gjøre nå er å duplisere det vi har gjort hittil på de andre kolonnene og endre de forskjellige verdiene for å gjøre telleren unik.

1 aksjer
del1
tweet
Enregistrer