Animerede tællere er en sjov og effektiv måde at vise på statistik til din besøgende. Animationen udløses af doven indlæsning for at gøre sidenavigationen virkelig interessant. Du kan placere så mange tællere som du vil inde i dette modul.
Sådan føjes et stregtællermodul til din side
Før du kan tilføje et bartællermodul til din side, skal du først have adgang til 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 på frontend, hvis du er tilsluttet 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 stregtællermodulet 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 "Stregtæller" og derefter klikke på Enter for automatisk at søge og tilføje stregtæ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 Bar Counters-modulet på er at illustrere statistik til casestudierne. Du skal blot tagge hver bjælke med en specifik projektfunktion eller formål, så brugeren ved, hvilke tjenester der er inkluderet i projektet. I dette eksempel bruger jeg bjælkemodulet til at vise tre projektmål.
Som du kan se, indeholder toppen af siden de tre mål for projektet ved hjælp af modulet "Bar Counter", og bunden af siden inkluderer resultaterne af casestudiet ved hjælp af "Counter" -modulet. Nummer ".
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 stregtællermodul til rækken.
Opdater parametrene for bjælketællere som følger:
Indholdsindstillinger
Procentdel af brug: TIL
Baggrundsfarve: #dddddd
Bar baggrundsfarve: # e07a5e
Design muligheder
Tekstfarve: Mørk
Titeltype: standard
Titel skrifttype: 20px
Titel Tekst Farve: # 405c60
Titel Linje Højde: 2em
Procentdel font: Standard
Procent skriftstørrelse: 16px
Procentdel Tekstfarve: #ffffff
Procentlinjehøjde: 2.5em
Gå nu tilbage til fanen Indhold, og vælg + Tilføj en ny vare for at tilføje den første stangtæller til modulet.
Opdater de enkelte modulindstillinger som følger:
Fanen Indhold
Titel: Min titel
Procent: 80
Gem indstillinger
Tilføj to ekstra søjltællere til modulet, og giv hver en titel og en procentdel.
Det er alt!
Indstillinger for bjælketæller indhold
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.
Procentdel af brug
Som standard vises procenter i farvebjælketælleren. Denne tekst kan slås fra ved hjælp af denne indstilling, så det visuelle søjlediagram kan tale for sig selv.
Baggrundsfarve
Denne mulighed giver dig mulighed for at justere baggrundsfarven på hver bjælketæller. Denne indstilling gælder for det negative mellemrum bag farven på den udfyldte bjælke.
Bar baggrundsfarve
Denne mulighed giver dig mulighed for at justere baggrundsfarven på den udfyldte bjælke. Denne baggrundsfarve overlapper den tidligere baggrundsfarveindstilling.
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.
Bar 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.
Tekstfarve
Du kan vælge her, om din tekst vil 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. Du kan yderligere tilpasse din tekstfarve ved hjælp af de yderligere tekstfarveindstillinger, der følger.
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.
Procentdel af tekst
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.
Procent skriftstørrelse
Her kan du justere størrelsen på din tekst i procent. 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.
Procent tekstfarve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din tekst i procent, skal du vælge den farve, du ønsker, i farvevælgeren ved hjælp af denne mulighed.
Antal bogstavafstand
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din tekst i procent, skal du bruge intervalskyderen til at justere mellemrummet 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.
Højde af procentlinjen
Linjehøjde påvirker mellemrummet mellem hver linje i din tekst i procent. Hvis du vil øge afstanden mellem hver linje, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede pladsstø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.
Borderradius
Anvendelse af en kantradius afrunder hjørnerne af bjælken i bjælketælleren. Jo større kantens radius er, jo mere afrundede hjørner.
Brug grænsen
Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.
Farve på grænsen
Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.
Bredden af grænsen
Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet, fx em, vh, vw osv.
Grænsestil
Grænser understøtter otte forskellige stilarter, herunder: solid, prikket, prikket, dobbelt, rille, ryg, indsats og start. Vælg den ønskede stil i rullemenuen for at anvende den på din kant.
Padding af bar
Polstring er det rum, der tilføjes inde i dit modul mellem modulets kant og dets interne elementer. Her kan du tilføje tilpasset toppolstring og bundpolstring til barmodulet.
Avancerede bjælketæ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 oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i den brugerdefinerede CSS, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
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-posterne 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.
