Den sirkulære telleren lar deg vise en enkelt statistikk på en estetisk tiltalende måte. Når du ruller nedover, teller tallet ned og sektordiagrammet fylles gradvis for å matche prosentverdien. Prøv å kombinere flere sirkeltellermoduler på én side for å gi din Besøkende en morsom måte å lære om virksomheten din eller dine personlige ferdigheter.
Slik legger du til en sirkulær målermodul på siden din
Før du kan legge til en sirkeltellermodul på siden din, må du først få tilgang til Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over utgiveren hver gang du oppretter en ny side.
Ved å klikke på denne knappen vil du kunne aktivere Divi Builder, som gir deg tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder å starte generatoren i visuell modus.
Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt hvis du er logget inn på WordPress-dashbordet.
Når du har inngått Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, ikke glem å legge til en rad på siden din først.
Finn sirkulærmålermodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "sirkelteller" og deretter klikke enter for automatisk å søke og legge til sirkeltellermodulen!
Når modulen er lagt til, vil du bli møtt med listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .
Bruk case for å vise prosjektmål i en casestudie
En av de beste måtene å bruke sirkeltellermodulen på er å illustrere statistikk for case-studier eller porteføljeelementer.
Bare identifiser hver sirkulær meter med en bestemt prosjektfunksjon eller mål slik at brukeren vet hvilke tjenester som er inkludert i prosjektet. I dette eksemplet bruker jeg modulen “sirkelteller” til å vise tre prosjektmål.
Som du kan se på bildet nedenfor, inneholder toppen av siden de tre målene for prosjektet ved hjelp av Bar Counter-modulen, og nederst på siden inkluderer resultatene fra casestudien ved bruk av Counter Number-modulen .
La oss begynne.
Bruk den visuelle byggmesteren til å legge til en standarddel med full bredde (1 kolonne). Deretter legger du til en sirkelmotormodul på raden.
Oppdater innstillingene for sirkeltelleren som følger:
Innholdsalternativer
Tittel: Animasjon
Antall: 80
% Sign: Ja
Bar Bakgrunnsfarge: #e07a5e
Designalternativer
Sirkelfarge: #e07a5e
Farge på tekst: Mørk
Tittel font: Standard
Tittel Skriftstørrelse: 26px
Tittel Tekst Farge: #405c60
Fontnummer: Standard
Størrelse skriftstørrelse: 46px
Antall tekstfarge: #405c60
Lagre innstillinger
Du dupliserer sirkeltellermodulen to ganger og drar hver kopi til den andre og tredje kolonnen på linjen.
Siden designelementene dine er overført til dupliserte moduler, trenger du bare å oppdatere tittelen og nummeret på sirkulærmåleren.
Det er det!
Gå til siden.
Alternativer for sirkulære tellerinnhold
I kategorien Innhold finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din vil alltid være i denne fanen.
Tittel
Skriv inn en tittel på sirkeltelleren. Dette er vanligvis et ord som representerer statistikken du ser på. Den vises under nummeret i kakediagrammet.
navn
Sett et tall for den sirkulære telleren. Hvis du velger et tall mindre enn 100, fylles sirkeldiagrammet til en prosentandel som tilsvarer tallet du skrev inn. Hvis du for eksempel skriver inn nummeret 20, fylles sirkelen 20% med aksentfargen din.
Prosent tegn
Her kan du velge om prosenttegnet skal legges til etter nummeret definert over.
Barens bakgrunnsfarge
Dette vil endre fyllfargen på linjen. Mengden av fyllfarge styres av "nummeret" valgt ovenfor. Hvis du velger tallet 50 og en blå farge, vil sirkelen din fylle 50% med en blå farge.
Administrasjonsmerke
Dette vil endre moduletiketten i generatoren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vil disse etikettene vises i modulblokken i Divi Builder-grensesnittet.
Designalternativer for sirkulære teller
I kategorien Design finner du alle modulstilvalgene, for eksempel skrifter, farger, størrelse og avstand. Denne kategorien lar deg endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å tilpasse omtrent hva som helst.
Sirkelens farge
Dette er fargen som skal brukes for den ikke utfylte delen av sirkelen (det negative rommet som ikke fylles av bakgrunnsfargen på linjen definert i Innhold-fanen).
Opacitet av fargen på sirkelen
Du kan redusere opasiteten til den fylte sirkelen med denne innstillingen.
Tekstfarge
Her kan du velge om teksten skal være lys eller mørk. Hvis du jobber med en mørk bakgrunn, bør teksten være lys. Hvis bakgrunnen er lys, bør teksten være svart.
Tittel skrifttype
Du kan endre fonten til teksten din ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av fantastiske skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din ved å bruke fete, kursive, store og understrekede alternativer.
Tittel skriftstørrelse
Her kan du justere størrelsen på tittelteksten. Du kan dra intervallglidebryteren for å øke eller redusere størrelsen på teksten, eller du kan angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Titteltekstfarge
Som standard vises alle tekstfarger i Divi i hvit eller mørk grå. Hvis du vil endre tekstfargen på tittelen din, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing av tittel bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i tittelteksten, bruker du intervallglidebryteren for å justere mellomrommet eller angir ønsket avstandsstørrelse i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Høyde på tittellinjen
Linjehøyde påvirker mellomrommet mellom hver linje med tittelteksten. Hvis du vil øke mellomrommet mellom hver rad, kan du bruke intervallglidebryteren til å justere mellomrommet eller angi ønsket avstandsstørrelse i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Politi nummer
Du kan endre fonten til teksten din ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av fantastiske skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din ved å bruke fete, kursive, store og understrekede alternativer.
Antall skriftstørrelse
Her kan du justere størrelsen på den nummererte teksten. Du kan dra intervallglidebryteren for å øke eller redusere størrelsen på teksten, eller du kan angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Farge på nummerteksten
Som standard vises alle tekstfarger i Divi i hvit eller mørk grå. Hvis du vil endre fargen på teksten din, velger du fargen du ønsker fra fargevelgeren ved hjelp av dette alternativet.
Avstand mellom nummererte bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i teksten, bruker du intervallglidebryteren til å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Høyden på tallinjen
Linjehøyde påvirker mellomrommet mellom hver linje i den digitale teksten. Hvis du vil øke avstanden mellom hver rad, bruker du skyvekontrollen for å justere mellomrommet eller skriver inn størrelsen på rommet du vil ha i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.
Avanserte sirkulære telleralternativer
I kategorien Avansert finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og ID-er til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.
CSS ID
Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En identifikator kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.
CSS klasse
Skriv inn de valgfrie CSS-klassene som skal brukes for denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse timene kan brukes i din Divi-tema Underordnet eller i tilpasset CSS som du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativer eller Divi Builder-sideinnstillinger.
Tilpasset CSS
Tilpasset CSS kan også brukes på modulen og hvilket som helst av modulens interne elementer. I Custom CSS-delen finner du et tekstfelt der du kan legge til CSS direkte til hvert element. CSS-oppføringene i disse innstillingene er allerede innebygd med stilkoder. Så du må bare oppgi CSS-regler atskilt med semikolon.
synlighet
Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.
Det er det for denne opplæringen.
