De nummertellermodule op de WordPress theme Divi is een geweldige manier om getallen op een leuke en boeiende manier weer te geven. Deze module wordt vaak gebruikt om weer te geven statistiek over jou of je bedrijf. Het weergeven van uw aantal klanten of volgers op Facebook is bijvoorbeeld een geweldige manier om sociaal bewijs te tonen.

display nummer divi wordpress.png

De module toevoegen Tellernummer van Divi

Voordat u een tellermodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.

divi bouwer

Nadat u Visual Builder heeft geopend, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.

divi.png cijferteller

Zoek de nummertellermodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "nummerteller" kunt typen en vervolgens op "Enter" kunt klikken om de nummertellermodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Voorbeeld use case: gebruik van de digitale tellermodule om de resultaten van een project weer te geven

Een geweldige manier om de nummertellermodule te gebruiken, is om de statistiek voor de casestudy's. Label gewoon elke teller met een nummer, zodat de gebruiker gemakkelijk het succes van het project kan zien. In dit voorbeeld gebruik ik de digitale tellermodule om vier projectresultaten weer te geven.

Zoals u kunt zien, bevat de bovenkant van de pagina de drie doelstellingen van het project met behulp van de module " Bar En onderaan de pagina staan ​​de resultaten van de case study met behulp van de digitale tellermodules.

voorbeeld compteur.gif

Het gedeelte van de pagina dat de resultaten van de casestudy toont met behulp van de digitale modules, vereist het gebruik van een gespecialiseerd gedeelte. Voeg met Visual Builder een gespecialiseerde sectie toe aan de pagina en selecteer de volgende lay-out:

aangepaste sectie divi.png

Selecteer een 1-kolomlay-out voor de rechterkant van de sectie en voer de titel en tekst in die nodig zijn voor de casestudyresultaten.

inbrengbereik divi.png

Voeg een lay-out van 2-kolommen in direct onder de 1-kolomlay-out aan de rechterkant van de sectie.

verdeelde divi.png kolom

Voeg nu uw eerste nummerenteller-module toe aan de linkerkolom.

voeg een sectienummer toe divi.png

Werk de parameters van de nummertellers als volgt bij:

Inhoud opties

Titel: nieuwe bezoekers
Nummer: 54210
Teken percentage: UIT

Ontwerpopties

Tekstkleur: donker
Lettertype van de titel: standaard
Titel Lettergrootte: 20px
Titel tekstkleur: # 405c60
Hoogte van de titelregel: 1em
Aantal tekens: standaard, vet
Aantal tekens: 60px
Nummer Tekstkleur: # e07a5e
Nummerlijnhoogte: 72px

inhoudssectie nummer divi.png

Instellingen opslaan

Dupliceer de module Aantal tellers en sleep deze naar de aangrenzende rechterkolom en werk de opties Titel en Nummer bij.

teller nummer voorbeeld construction.png

Dupliceer de regel die de twee nummerteller-modules bevat, zodat hieronder nog twee nummertellers worden weergegeven.

digitale teller duplicatie divi.png

Werk vervolgens de titel- en nummeropties voor die bij. Nu heb je alle vier de tellers met volledige nummers.

Vergeet niet om de afbeelding van 667 x 320 toe te voegen in de linkerkolom / zijkant van de gespecialiseerde sectie.

Het is klaar ! De combinatie van nummertellers en balkentellers op deze casestudypagina maakt de inhoud echt boeiend.

Definitieve realisatiemodule compteur.png

Digitale teller inhoud opties

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.

geselecteerd gebied inhoud wordpress divi.png

Titel

Voer een titel in voor de teller. Dit wordt in kleinere tekst onder het nummer weergegeven.

Naam

Dit is het aantal dat de teller zal tellen. Wanneer u op de pagina naar beneden scrolt en bij de teller komt, telt het nummer snel vanaf 0 totdat het het nummer bereikt dat u hier hebt ingesteld. Hier kunnen alleen numerieke waarden worden geplaatst.

Procentteken

Hier kunt u kiezen of het percentageteken moet worden toegevoegd na het hierboven gedefinieerde nummer.

Achtergrondkleur

Definieer een aangepaste achtergrondkleur voor uw module of laat leeg om de standaardkleur te gebruiken.

Achtergrond afbeelding

Indien ingesteld, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u gewoon de URL uit het instellingenveld. De achtergrondafbeeldingen verschijnen bovenop de achtergrondkleuren, wat betekent dat de achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.

Admin-label

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Ontwerpopties (stijl) van de digitale meter

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

zone ontwerp teller divi.png

Tekstkleur

Hier kunt u kiezen of uw titeltekst licht of donker moet zijn. Als u op een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst donker zijn.

Titel lettertype

U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Titel lettergrootte

Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Titel tekstkleur

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de tekstkleur van uw titel wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Afstand van titelletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw titeltekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de titelregel

Regelhoogte is van invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Lettertypen van het nummer

U kunt het lettertype van uw tekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekengrootte van het nummer

Hier kunt u de grootte van uw digitale tekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen of rechtstreeks de gewenste waarde voor de tekstgrootte invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Kleur van digitale tekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw digitale tekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.

Afstand van digitale letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw numerieke tekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Lijnhoogte van het nummer

De regelhoogte is van invloed op de ruimte tussen elke regel van uw numerieke tekst.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Gebruik de rand

Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.

Kleur van de rand

Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.

Breedte van de rand

Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.

Randstijl

Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Aangepaste vulling

Infill is de ruimte die in uw module wordt toegevoegd, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.

Geavanceerde nummerteller-opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

digitaal tegengedeelte ontwerp.png

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een ​​aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een ​​aangepaste CSS-stijl te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-child-thema of in de aangepaste CSS-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "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-download"] DOWNLOAD HET DIVI-THEMA [/ vcex_button] [/ width_column] [»]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_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi-zelfstudies