Den cirkulære tæller giver dig mulighed for at vise en enkelt statistik på en æstetisk tiltalende måde. Når du ruller ned, tæller tallet ned, og cirkeldiagrammet fyldes gradvist for at matche procentværdien. Prøv at kombinere flere cirkeltællermoduler på én side for at give din besøgende en sjov måde at lære om din virksomhed eller dine personlige færdigheder.
Sådan tilføjes et cirkulær meter-modul til din side
Før du kan tilføje et cirkeltællermodul til din side, skal du først tilgå Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over udgiveren, hver gang du opretter en ny side.
Ved at klikke på denne knap vil du kunne aktivere Divi Builder, som giver dig adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand.
Du kan også klikke på knappen Brug Visual Builder når du gennemser dit websted, hvis du er logget ind på dit WordPress-dashboard.
Når du er indtastet i Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du først glemme at tilføje en række til din side.
Find det cirkulære målermodul på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "cirkeltæller" og derefter klikke på enter for automatisk at søge og tilføje cirkeltællermodulet!
Når modulet er tilføjet, vil du blive mødt med listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Brug case til at vise projektmål i en casestudie
En af de bedste måder at bruge cirkeltællermodulet på er at illustrere statistik til casestudier eller porteføljeelementer.
Du skal blot identificere hver cirkulær meter med en bestemt projektfunktion eller et mål, så brugeren ved, hvilke tjenester der er inkluderet i projektet. I dette eksempel bruger jeg modulet "cirkeltæller" til at vise tre projektmål.
Som du kan se på billedet nedenfor inkluderer toppen af siden de tre mål for projektet ved hjælp af stregtællermodulet, og bunden af siden inkluderer resultaterne af casestudiet ved hjælp af tællernummermodulet .
Lad os starte.
Brug den visuelle builder til at tilføje et standardsektion med et layout i fuld bredde (1 kolonne). Tilføj derefter et cirkeltællermodul til rækken.
Opdater cirkelstællerindstillingerne som følger:
Indholdsindstillinger
Titel: Animation
Antal: 80
% Tegn: ja
Bar Baggrundsfarve: #e07a5e
Design muligheder
Farve på cirkel: #e07a5e
Farve på tekst: Mørk
Titeltype: Standard
Titel skrifttype: 26px
Titel Tekst Farve: #405c60
Skrifttype: Standard
Størrelse skriftstørrelse: 46px
Antal tekstfarve: #405c60
Gem indstillinger
Du duplikerer nu cirkel-tællermodulet to gange, og træk hver kopi til den anden og tredje kolonne på din linje.
Da dine designelementer er blevet overført til duplikatmoduler, behøver du kun opdatere titlen og nummeret på den cirkulære måler.
Det er alt!
Besøg siden.
Indstillinger for cirkulære tællerindhold
I fanen Indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid være i denne fane.
titel
Indtast en titel til cirkeltælleren. Dette er normalt et ord, der repræsenterer den statistik, du ser. Det vises under nummeret i cirkeldiagrammet.
Navn
Indstil et nummer til den cirkulære tæller. Ved at vælge et tal mindre end 100 udfyldes cirkeldiagrammet til en procentdel svarende til det antal, du indtastede. For eksempel vil indtastning af nummer 20 udfylde cirklen 20% med din accentfarve.
Procent tegn
Her kan du vælge, om procentsignalet skal tilføjes efter det ovenfor definerede tal.
Bar baggrundsfarve
Dette vil ændre bjælkens fyldfarve. Mængden af fyldfarve styres af "nummeret" valgt ovenfor. Hvis du vælger tallet 50 og en blå farve, udfyldes din cirkel 50% med en blå farve.
Administration etiket
Dette ændrer moduletiketten i generatoren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Circular Counter Design Options
På fanen Design finder du alle stylingindstillingerne for modulet, såsom skrifttyper, farver, størrelse og afstand. Denne fane giver dig mulighed for at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at tilpasse næsten alt.
Cirkelens farve
Dette er den farve, der vil blive brugt til den udfyldte del af cirklen (det negative mellemrum, der ikke udfyldes af baggrundsfarven på bjælken, der er defineret i fanen Indhold).
Uklarhed på cirklens farve
Du kan reducere opaciteten af den udfyldte del af cirklen ved hjælp af denne indstilling.
Tekstfarve
Her kan du vælge, om din tekst skal være lys eller mørk. Hvis du arbejder med en mørk baggrund, skal din tekst være lys. Hvis din baggrund er lys, skal din tekst være sort.
Titel skrifttype
Du kan ændre skrifttypen på din tekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper drevet af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillinger med fed, kursiv, stor og understregning.
Titel skriftstørrelse
Her kan du justere størrelsen på din titeltekst. Du kan trække intervalskyderen for at øge eller formindske størrelsen på din tekst, eller du kan direkte indtaste den ønskede værdi for tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Titel tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørk grå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve i farvevælgeren ved hjælp af denne mulighed.
Spacing af titel breve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din titeltekst, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Højde på titellinjen
Linjehøjde påvirker mellemrummet mellem hver linje i titelteksten. Hvis du vil øge afstanden mellem hver række, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i inputfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Politi nummer
Du kan ændre skrifttypen på din tekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper drevet af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillinger med fed, kursiv, stor og understregning.
Antal skriftstørrelse
Her kan du justere størrelsen på din nummererede tekst. Du kan trække intervalskyderen for at øge eller formindske størrelsen på din tekst, eller du kan direkte indtaste den ønskede værdi for tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Farve på nummerteksten
Som standard vises alle tekstfarver i Divi i hvid eller mørk grå. Hvis du vil ændre farven på din tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Afstand mellem nummererede bogstaver
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din tekst, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Højden på talelinjen
Linjehøjde påvirker afstanden mellem hver linje i din digitale tekst. Hvis du vil øge mellemrummet mellem hver række, skal du bruge områdeskyderen til at justere rummet eller indtaste størrelsen på det ønskede mellemrum i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.
Avancerede cirkulære tællerindstillinger
På fanen Avanceret finder du indstillinger, som mere erfarne webdesignere kan finde nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at skabe brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt af et mellemrum. Disse klasser kan bruges i din Divi-tema Underordnet eller i tilpasset CSS, som du tilføjer til din side eller dit websted ved hjælp af Divi-temaindstillinger eller Divi Builder-sideindstillinger.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje CSS direkte til hvert element. CSS-poster i disse indstillinger er allerede indlejret med typografikoder. Så du skal bare indtaste CSS-regler adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
Det er det til denne tutorial.
