Divisjonsveiledning: Hvordan bruke talltellermodulen

Talltellermodulen på WordPress tema Divi er en fin måte å vise tall på en morsom og engasjerende måte. Denne modulen brukes ofte til å vise statistikk om deg eller din bedrift. For eksempel, å vise antall kunder eller følgere på Facebook er en fin måte å vise frem sosiale bevis.

Slik legger du til modulen Counter nummer Divi

Før du kan legge til en tellermodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

Når du har angitt 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, husk å legge til en rad på siden din først.

Finn talltellermodulen 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 "tallteller" og deretter klikke "Enter" for automatisk å finne og legge til talltellermodulen! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Bruk den digitale tellermodulen til å vise resultatene av et prosjekt

En fin måte å bruke talltellermodulen på er å illustrere statistikk for casestudiene. Bare merk hver teller med et tall slik at brukeren enkelt kan se suksessen til prosjektet. I dette eksemplet bruker jeg den digitale tellermodulen til å vise fire prosjektresultater.

Som du kan se, inneholder toppen av siden de tre målene for prosjektet ved hjelp av modulen " Bar telleren Og nederst på siden inkluderer resultatene fra casestudien ved bruk av de digitale tellermodulene.

Den delen av siden som viser resultatene av casestudien ved bruk av de digitale modulene, krever bruk av en spesialisert seksjon. Bruk Visual Builder til å legge til en spesialseksjon på siden og velge følgende layout:

Velg en kolonneoppsett på høyre side av seksjonen, og skriv inn tittelen og teksten som kreves for casestudieresultatene.

Sett inn en layout av 2-kolonner direkte under 1-kolonneoppsettet på høyre side av delen.

Legg nå din første talltellermodul til venstre kolonne.

Oppdater parametrene til antallet tellere som følger:

Innholdsalternativer

Tittel: Nye besøkende
Antall: 54210
Signeringsprosent: AV

Designalternativer

Farge på tekst: Mørk
Tittel på tittelen: Standard
Tittel Skriftstørrelse: 20px
Tittel Tekst Farge: # 405c60
Høyde på tittellinjen: 1em
Antall tegn: Standard, fet skrift
Antall tegn: 60px
Nummer Tekstfarge: # e07a5e
Nummerlinjehøyde: 72px

Lagre innstillinger

Dupliser Number Counters-modulen og dra den inn i den tilstøtende høyre kolonnen og oppdater alternativene Tittel og nummer.

Dupliser linjen som inneholder de to talltellermodulene slik at ytterligere to tallteller vises.

Oppdater deretter tittel- og nummeralternativene for disse. Nå har du alle fire tellere.

Ikke glem å legge til 667 x 320-bildet i venstre kolonne / side av den spesialiserte delen.

Det er ferdig! Kombinasjonen av talltellere og søyleteller på denne casestudiesiden gjør innholdet engasjerende.

Alternativer for digital tellerinnhold

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

Tittel

Skriv inn en tittel for disken. Dette vises under nummeret i mindre tekst.

navn

Dette er tallet som telleren teller. Når du blar nedover siden og når telleren, teller tallet raskt fra 0 til det når tallet du har angitt her. Bare numeriske verdier kan plasseres her.

Prosent tegn

Her kan du velge om prosenttegnet skal legges til etter nummeret definert over.

Bakgrunnsfarge

Definer en egendefinert bakgrunnsfarge for modulen din, eller la den være tom for å bruke standardfargen.

Bakgrunnsbilde

Hvis dette er angitt, vil dette bildet brukes som bakgrunn for denne modulen. For å fjerne et bakgrunnsbilde, bare fjern URL-en fra innstillingsfeltet. Bakgrunnsbilder vises øverst på bakgrunnsfargene, noe som betyr at bakgrunnsfargen ikke vil være synlig når et bakgrunnsbilde blir brukt.

Admin-etikett

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Designalternativer (stil) på den digitale måleren

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

Tekstfarge

Her kan du velge om tittelteksten skal være lys eller mørk. Hvis du jobber med en mørk bakgrunn, bør teksten din være lys. Hvis bakgrunnen er lys, bør teksten være mørk.

Tittel skrifttype

Du kan endre fonten til tittelteksten ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av flotte 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 med fet, kursiv, stor bokstav og understrekingsalternativer.

Tittel skriftstørrelse

Her kan du justere størrelsen på tittelteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte 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ørrelsesverdien for å endre enhetstypen.

Titteltekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. 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 glidebryteren for å justere mellomrommet eller angir ø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ørrelsesverdien for å endre enhetstypen.

Høyde på tittellinjen

Linjehøyde påvirker mellomrommet mellom hver linje i tittelteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Fonter av nummeret

Du kan endre fonten til teksten din ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av flotte 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 med fet, kursiv, stor bokstav og understrekingsalternativer.

Skriftstørrelse på nummeret

Her kan du justere størrelsen på den digitale teksten. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten, eller angi verdien på ønsket tekststørrelse direkte 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ørrelsesverdien for å endre enhetstypen.

Farge på digital tekst

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på den digitale teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom digitale bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i den numeriske teksten, bruker du glidebryteren for å 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ørrelsesverdien for å endre enhetstypen.

Linjens høyde på nummeret

Linjehøyde påvirker mellomrommet mellom hver linje i den numeriske teksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Bruk grensen

Aktivering av dette alternativet vil plassere en kant rundt modulen din. Denne rammen kan tilpasses ved hjelp av følgende betingede parametere.

Farge på grensen

Dette alternativet påvirker fargen på grensen din. Velg en egendefinert farge fra fargevelgeren for å bruke den på grensen din.

Bredde av grensen

Som standard er kantene 1 piksel brede. Du kan øke denne verdien ved å dra områdeglidebryteren eller angi en egendefinert verdi i inndatafeltet til høyre for glidebryteren. Tilpassede målenheter støttes, noe som betyr at du kan endre standardenheten fra "px" til noe annet som em, vh, vw etc.

Border style

Kanter støtter åtte forskjellige stiler: solid, prikket, prikket, dobbelt, spor, møne, overlegg og start. Velg ønsket stil fra rullegardinmenyen for å bruke den på grensen din.

Tilpasset polstring

Påfyll er plassen som legges til inne i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til tilpassede polstringsverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Avanserte alternativ for teller

I den avanserte fanen 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 IDer 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 ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene 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.

[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 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED 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 = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]