Geanimeerde tellers zijn een leuke en effectieve manier om te laten zien statistiek aan jouw bezoekers. De animatie wordt geactiveerd door lui laden om de paginanavigatie echt interessant te maken. U kunt zoveel tellers in deze module plaatsen als u wilt.
Hoe een bar-tellermodule aan uw pagina toe te voegen
Voordat u een staaftellermodule aan uw pagina kunt toevoegen, moet u eerst toegang hebben tot de Divi Builder. 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 aan het surfen bent op uw website, als u verbonden bent met uw WordPress-dashboard.
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. .
Zoek de bartellermodule 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 "Bar counter" kunt typen en vervolgens op enter kunt klikken om automatisch te zoeken en de bar tellermodule 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 Bar Counters-module te gebruiken, is door de statistiek voor de casestudy's. Tag elke balk eenvoudig met een specifieke projectfunctie of doel, zodat de gebruiker weet welke services in het project zijn opgenomen. In dit voorbeeld gebruik ik de staafmodule om drie projectdoelen weer te geven.
Zoals u 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" -module Nummer ”.
Laten we beginnen.
Gebruik de visuele builder om een standaardsectie toe te voegen met een lay-out over de volledige breedte (1 kolom). Voeg vervolgens een bartellermodule toe aan de rij.
Werk de parameters van de balkentellers als volgt bij:
Inhoud opties
Gebruikspercentages: AAN
Achtergrondkleur: #dddddd
Achtergrondkleur balk: # e07a5e
Ontwerpopties
Tekstkleur: donker
Titellettertype: standaard
Titel Lettergrootte: 20px
Titel tekstkleur: # 405c60
Titel Lijnhoogte: 2em
Percentage lettertype: standaard
Percentage lettergrootte: 16px
Percentage tekstkleur: #ffffff
Percentage regelhoogte: 2.5em
Ga nu terug naar het tabblad Inhoud en selecteer + Voeg een nieuw item toe om de eerste baarteller aan de module toe te voegen.
Werk de afzonderlijke module-instellingen als volgt bij:
Inhoud tabblad
Titel: Mijn titel
Percentage: 80
Instellingen opslaan
Voeg twee extra balkentellers toe aan de module en geef elk een titel en een percentage.
Dat is het!
Inhoud opties voor barteller
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.
Percentages van gebruik
Percentages worden standaard weergegeven in de kleurenbalkteller. Deze tekst kan met deze instelling worden uitgeschakeld, waardoor het visuele staafdiagram voor zichzelf spreekt.
Achtergrondkleur
Met deze optie kunt u de achtergrondkleur van elke barteller aanpassen. Deze instelling is van toepassing op de negatieve ruimte achter de kleur van de gevulde balk.
Achtergrondkleur balk
Met deze optie kunt u de achtergrondkleur van de gevulde balk aanpassen. Deze achtergrondkleur overlapt met de vorige achtergrondkleurinstelling.
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.
Bar ontwerpopties
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.
Tekstkleur
U kunt hier kiezen of uw tekst licht of donker is. Als u met een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst zwart zijn. U kunt uw tekstkleur verder aanpassen met de aanvullende tekstkleuropties die volgen.
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.
Percentage tekst
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.
Percentage lettertype
Hier kunt u de grootte van uw tekst in procenten 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.
Percentage tekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw tekst als percentage wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Percentage brievenafstand
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw tekst in procenten 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 percentagelijn
De regelhoogte is van invloed op de ruimte tussen elke regel van uw tekst als percentage. 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.
Randradius
Door een randradius toe te passen, worden de hoeken van de balk in de barteller afgerond. Hoe groter de straal van de rand, hoe meer de hoeken afgerond zijn.
Gebruik de rand
Als u deze optie inschakelt, wordt 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. Ondersteunde maateenheden op maat, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders, bijv. Em, vh, vw enz.
Randstijl
Randen ondersteunen acht verschillende stijlen, waaronder: massief, gestippeld, gestippeld, dubbel, groef, rand, inzet en begin. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.
Opvulling van de bar
Opvulling is de ruimte die in uw module wordt toegevoegd, tussen de rand van de module en de interne elementen. Hier kunt u aangepaste opvulling voor boven en onder aan de staafmodule toevoegen.
Geavanceerde bartelleropties
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.
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 die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de Divi Builder-pagina-instellingen.
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 waarin u CSS rechtstreeks aan elk element kunt toevoegen. De 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.
