Met de ronde teller kunt u een enkele statistiek op een esthetische manier weergeven. Terwijl u naar beneden scrolt, telt het aantal af en wordt het cirkeldiagram geleidelijk gevuld om overeen te komen met de procentuele waarde. Probeer meerdere cirkeltellermodules op één pagina te combineren om uw bezoekers een leuke manier om meer te weten te komen over uw bedrijf of uw persoonlijke vaardigheden.

circulerire teller voorbeeld divi.png

Een circulaire metermodule toevoegen aan uw pagina

Voordat u een kringtellermodule aan uw pagina kunt toevoegen, moet u eerst de Divi Builder openen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de uitgever telkens wanneer u een nieuwe pagina maakt.

Door op deze knop te klikken, kunt u Divi Builder activeren, waarmee u toegang krijgt 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 bladert als u bent aangemeld bij uw WordPress-dashboard.

gebruik divi bouwer

Eenmaal ingevoerd in Visual Builder, 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 eerst een rij aan uw pagina toe te voegen.

tegencirkel divi.png

Zoek de circulaire metermodule 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 "cirkelteller" kunt typen en vervolgens op enter kunt klikken om automatisch te zoeken en de cirkeltellermodule toe te voegen!

Zodra de module is toegevoegd, wordt u begroet met de lijst met module-opties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Gebruik een casus om projectdoelen in een casestudy weer te geven

Een van de beste manieren om de cirkeltellersmodule te gebruiken, is illustreren statistiek voor casestudy's of portfolio-items.

Identificeer eenvoudig elke circulaire meter met een specifieke projectfunctie of doel, zodat de gebruiker weet welke services in het project zijn opgenomen. In dit voorbeeld zal ik de module "cirkelteller" gebruiken om drie projectdoelen weer te geven.

Zoals u in de onderstaande afbeelding kunt zien, bevat de bovenkant van de pagina de drie doelstellingen van het project met behulp van de Bar Counter-module en de onderkant van de pagina bevat de resultaten van de case study met behulp van de Counter Number-module .

voorbeeld module cirkel divi animation.gif

Laten we beginnen.

Gebruik de visuele builder om een ​​standaardsectie met een volledige breedte (1 kolom) lay-out toe te voegen. Voeg vervolgens een cirkeltellermodule toe aan de rij.

tegencirkel configuratie divi.png

Werk de instellingen van de cirkelteller als volgt bij:

Inhoud opties

Titel: Animatie
Nummer: 80
% Teken: ja
Achtergrondkleur balk: #e07a5e

Ontwerpopties

Kleur van cirkel: #e07a5e
Tekstkleur: donker
Titellettertype: standaard
Titel Lettergrootte: 26px
Titel tekstkleur: #405c60
Lettertypenummer: standaard
Formaat lettergrootte: 46px
Nummer Tekstkleur: #405c60

animatie divi creatie van een cirkel met een grafische divi.png

Instellingen opslaan

Dupliceer nu de cirkelteller-module twee keer en sleep elke kopie naar de tweede en derde kolom van uw lijn.

kopieer een circulaire metermodule divi.png

Aangezien uw ontwerpelementen zijn overgebracht naar dubbele modules, hoeft u alleen de titel en het nummer van de circulaire meter bij te werken.

Dat is het!

Bezoek de pagina.

ontwerp counter divi builder.png

Opties voor inhoudsophalerteller

Op het tabblad Inhoud vindt u alle inhoud van de module, zoals tekst, afbeeldingen en pictogrammen. Dat alles controleert wat verschijnt in uw module zal altijd op dit tabblad staan.

circle module content section.png

Titel

Voer een titel in voor de cirkelteller. Dit is meestal een woord dat de statistiek vertegenwoordigt die u bekijkt. Het wordt weergegeven onder het nummer in het cirkeldiagram.

Naam

Stel een nummer in voor de ronde teller. Als u een getal kleiner dan 100 selecteert, wordt de cirkelgrafiek gevuld met een percentage dat gelijk is aan het getal dat u hebt ingevoerd. Als u bijvoorbeeld het getal 20 invoert, wordt de cirkel voor 20% gevuld met uw accentkleur.

Procentteken

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

Achtergrondkleur balk

Dit zal de vulkleur van de balk veranderen. De hoeveelheid opvulkleur wordt bepaald door het hierboven geselecteerde "nummer". Als je het cijfer 50 en een blauwe kleur selecteert, vult je cirkel 50% met een blauwe kleur.

Administratie label

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

Opties voor het ontwerpen van ronde tellers

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

ronde teller optie divi.png

Kleur van de cirkel

Dit is de kleur die wordt gebruikt voor het niet-gevulde deel van de cirkel (de negatieve ruimte die niet wordt gevuld door de achtergrondkleur van de balk die is gedefinieerd op het tabblad Inhoud).

Dekking van de kleur van de cirkel

Met deze instelling kunt u de dekking van het opgevulde deel van de cirkel verminderen.

Tekstkleur

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

Titel lettertype

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.

Titel lettergrootte

Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te 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 maat, 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 kleur van uw voorkeur uit de kleurkiezer.

Afstand van titelletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw titeltekst wilt vergroten, gebruikt u de intervalschuifregelaar 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 maat, om het type eenheid te wijzigen.

Hoogte van de titelregel

De regelhoogte is van invloed op de ruimte tussen elke regel met titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de intervalschuifregelaar om de ruimte aan te passen of voert u de gewenste grootte van de ruimte 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 maat, om het type eenheid te wijzigen.

Politie 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.

nummer tekst divi builder circular counter.png

Nummer lettergrootte

Hier kunt u de grootte van uw genummerde tekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt 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 maat, om het type eenheid te wijzigen.

Kleur van de cijfertekst

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

Spatie van genummerde letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw tekst wilt vergroten, gebruikt u de intervalschuifregelaar 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 maat, om het type eenheid te wijzigen.

tekst meter afstand letters divi.png

Hoogte van de getallenlijn

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw digitale tekst. Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de grootte van de gewenste ruimte 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 maat, om het type eenheid te wijzigen.

Geavanceerde circulaire telleropties

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 toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

geavanceerde teller divi.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 aangepaste CSS-styling te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze lessen kunnen worden gebruikt in uw Divi-thema Onderliggende of in aangepaste CSS die u aan uw pagina of website toevoegt met behulp van Divi Theme Options of Divi Builder Page Settings.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u CSS rechtstreeks aan elk element kunt toevoegen. CSS-items in deze instellingen zijn al ingesloten met stijltags. U hoeft dus alleen maar CSS-regels in te voeren, 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.

Dat is het voor deze tutorial.