Opdelingsvejledning: Sådan bruges nummertællermodulet

Taltællermodulet på WordPress tema Divi er en fantastisk måde at vise tal på en sjov og engagerende måde. Dette modul bruges almindeligvis til at vise statistik om dig eller din virksomhed. For eksempel er visning af dit antal kunder eller følgere på Facebook en fantastisk måde at fremvise sociale beviser på.

Sådan tilføjes modulet Counter nummer Divi

Før du kan tilføje et tællermodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få 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 i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.

Når du har indtastet 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 huske at føje en række til din side først.

Find nummertællermodulet på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "taletæller" og derefter klikke på "Enter" for automatisk at finde og tilføje nummertællermodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .

Eksempel på brugssag: Brug af det digitale tællermodul til at vise resultaterne af et projekt

En god måde at bruge taltællermodulet på er at illustrere statistik til casestudierne. Bare mærk hver tæller med et nummer, så brugeren nemt kan se projektets succes. I dette eksempel bruger jeg det digitale tællermodul til at vise fire projektresultater.

Som du kan se, indeholder toppen af siden de tre mål for projektet ved hjælp af modulet " Bar tæller Og nederst på siden inkluderer resultaterne af casestudiet ved hjælp af de digitale tællermoduler.

Det afsnit på siden, der viser resultaterne af casestudiet ved hjælp af de digitale moduler, kræver brug af en specialafdeling. Brug Visual Builder til at tilføje et specialafsnit til siden og vælge følgende layout:

Vælg et 1 kolonnelayout til højre side af sektionen, og indtast den titel og tekst, der kræves til casestudieresultaterne.

Indsæt et layout af 2-kolonner direkte under 1-kolonnelayoutet i højre side af sektionen.

Føj nu dit første tal-tællermodul til venstre kolonne.

Opdater parametrene for antalletstællerne som følger:

Indholdsindstillinger

Titel: Nye besøgende
Antal: 54210
Sign procent: OFF

Design muligheder

Farve på tekst: Mørk
Skriftets titel: standard
Titel skrifttype: 20px
Titel Tekst Farve: # 405c60
Højde på titellinjen: 1em
Antal tegn: Standard, fed
Antal tegn: 60px
Nummer Tekstfarve: # e07a5e
Nummerlinjehøjde: 72px

Gem indstillinger

Dupliser modulet Antal tællere, og træk det ind i den tilstødende højre kolonne, og opdater indstillingerne for titel og nummer.

Duplicerer linjen, der indeholder de to nummertællemoduler, så der vises yderligere to taletællere nedenfor.

Opdater derefter titel- og nummerindstillingerne for dem. Nu har du alle fire fuldtællertællere.

Glem ikke at tilføje 667 x 320-billedet i venstre kolonne / side af det specialiserede afsnit.

Det er færdigt! Kombinationen af tal- og søjletællere på denne casestudieside gør indholdet engagerende.

Indstillinger for digital 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 findes på denne fane.

titel

Indtast en titel til tælleren. Dette vises under nummeret i mindre tekst.

Navn

Dette er det nummer, som tælleren tæller. Når du ruller ned på siden og når tælleren, tæller tallet hurtigt fra 0, indtil det når det nummer, du har angivet her. Her kan kun numeriske værdier placeres.

Procent tegn

Her kan du vælge, om procentsignalet skal tilføjes efter det ovenfor definerede tal.

Baggrundsfarve

Definer en brugerdefineret baggrundsfarve til dit modul, eller lad den være tom for at bruge standardfarven.

Baggrundsbillede

Hvis indstillet, bruges dette billede som baggrund for dette modul. For at fjerne et baggrundsbillede skal du bare fjerne URL'en fra indstillingsfeltet. Baggrundsbillederne vises oven på baggrundsfarverne, hvilket betyder, at baggrundsfarven ikke vil være synlig, når der anvendes et baggrundsbillede.

Admin Label

Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.

Designindstillinger (stil) på den digitale måler

Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.

Tekstfarve

Her kan du vælge, om din titeltekst skal være lys eller mørk. Hvis du arbejder på en mørk baggrund, skal din tekst være lys. Hvis din baggrund er lys, skal din tekst være mørk.

Titel skrifttype

Du kan ændre skrifttypen på din titeltekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives 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 fed, kursiv, stor bogstav og understregningsmuligheder.

Titel skriftstørrelse

Her kan du justere størrelsen på din titeltekst. Du kan trække skyderen for rækkevidde for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede 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ørrelsesværdi for at ændre enhedstypen.

Titel tekst farve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve fra 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 områdeskyderen 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ørrelsesværdi for at ændre enhedstypen.

Højde på titellinjen

Linjehøjde påvirker afstanden mellem hver linje i din titeltekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Fonter af nummeret

Du kan ændre skrifttypen på din tekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives 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 fed, kursiv, hovedstad og understregningsmuligheder.

Skriftstørrelse af nummeret

Her kan du justere størrelsen på din digitale tekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede 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ørrelsesværdi for at ændre enhedstypen.

Farve på digital tekst

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din digitale tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Afstand mellem digitale bogstaver

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din numeriske tekst, skal du bruge områdeskyderen 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ørrelsesværdi for at ændre enhedstypen.

Linjehøjde på nummeret

Linjehøjde påvirker mellemrummet mellem hver linje i din numeriske tekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

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 som em, vh, vw osv.

Grænsestil

Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.

Tilpasset polstring

Infill er det rum, der tilføjes inde i dit modul, mellem kanten af modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af modulets fire sider. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Avancerede nummertællermuligheder

På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder 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 det brugerdefinerede CSS-stilark, 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 interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne 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.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]