Divi Builder Plugin Documentatie

Hoe de Divi blog module toe te voegen, te configureren en aan te passen.

Met Divi zijn zelfs blogs een module, en uw “blog” kan overal op uw website worden geplaatst, en in verschillende formaten. U kunt blog en zijbalk modules combineren om klassieke blog ontwerpen te maken. Blogs met 1 kolom, 2 kolommen of 3 kolommen kunnen allemaal worden opgebouwd met behulp van blog- en zijbalkmodules.

Bekijk een live demo van deze module

Hoe voeg je een blogmodule aan je pagina toe

Voordat je een blogmodule aan je pagina kunt toevoegen, moet je eerst in de Divi Builder springen. Zodra het Divi Theme op uw website is geïnstalleerd, ziet u een knop Gebruik Divi Builder boven de post editor elke keer als u een nieuwe pagina aan het bouwen bent. Als u op deze knop klikt, wordt de Divi Builder ingeschakeld, waardoor u toegang krijgt tot alle modules van de Divi Builder. Klik vervolgens op de knop Gebruik visuele bouwer om de bouwer in de visuele modus te starten. U kunt ook op de knop Gebruik Visual Builder klikken wanneer u uw website bekijkt op de front-end als u bent ingelogd op uw WordPress Dashboard.

Als u eenmaal in de Visuele bouwer bent, 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. We hebben een aantal goede tutorials over het gebruik van Divi’s rij- en sectie-elementen.

Localiseer de blogmodule 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 “blog” kunt intypen en vervolgens op enter kunt klikken om de blogmodule automatisch te vinden en toe te voegen! Zodra de module is toegevoegd, wordt u begroet met de lijst van opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Content, Design en Advanced.

Use Case Example: Blogmodule toevoegen met een rasterindeling in een specialistische sectie met een rechterzijbalk

Voor dit voorbeeld ga ik een Blogmodule toevoegen aan een blogpagina. Deze blog pagina heeft een fullwidth header met daaronder een zoekmodule. Onder de zoekmodule voeg ik een speciale sectie toe met de Blogmodule aan de linkerkant en een zijbalksectie aan de rechterkant. De zijbalk aan de rechterkant heeft een recente berichten widget, een E-mail Optin Module, en een Persoon Module.

Hier ziet de voorbeeldpagina eruit.

Merk op dat de blog module in een raster layout aan de linkerkant van de specialiteit sectie staat.

Laten we beginnen.

Gebruik de visual builder om een Specialty Section toe te voegen met de volgende indeling:

U wordt gevraagd of u een rij van 1 of 2 kolommen wilt toevoegen voor de linkerkant. Kies de rij met 1 kolom.

Voeg vervolgens de Blogmodule aan de rij toe.

Update de Bloginstellingen als volgt:

Content Options

Posts Number: 6
Lees meer-knop: AAN
Toon Paginering: NEE
Raster Tile Achtergrond Kleur: #ffffff

Ontwerpopties

Lay-out: Raster
Gebruik Dropshadow: ON
Overlay Icon Color: #ffff
Hover Overlay Kleur: rgba(224,153,0,0.51)
Koplettertype: Default
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spatie: 1px
Hoogte koptekstregel: 1.2em
Gebruik rand: JA
Randkleur: #f0f0f0
Randbreedte: 1px
Randstijl: Solid

Geavanceerde opties

Aangepaste CSS (lees meer-knop):

De geavanceerde aangepaste CSS voor de lees meer-knop creëert een aangepaste look die goed past bij het ontwerp.

Aan de rechterzijbalksectie van de Specialty Section lay-out moet u een zijbalkmodule toevoegen die de recente berichten-widget ophaalt. Daaronder moet je een Email Optin Module toevoegen. En dan onder de Email Optin moet je de Person Module toevoegen met info over de auteur.

Dat is het!

Blog Inhoud Opties

In de inhoud tab vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module wordt weergegeven, vindt u altijd in dit tabblad.

Aantal berichten

Hier kunt u het aantal berichten definiëren dat u wilt weergeven. U moet berichten hebben aangemaakt om iets in deze module te kunnen weergeven.

Selecteer de categorieën die u in de postfeed wilt opnemen. Alle postcategorieën die u hebt gemaakt, worden hier weergegeven zodat u ze kunt selecteren/deselecteren.

Inbegrepen categorieën

Kies welke categorieën u in de feed wilt opnemen.

Meta datumindeling

Definieer hier de datumindeling die u op uw blogposts wilt weergeven. De standaard lay-out is een M j, Y formate (6 januari 2014) Zie de WordPress Codex over datum formaten voor meer opties.

Content

Het tonen van de volledige inhoud zal uw berichten op de index pagina niet inkorten. Het tonen van het uittreksel toont alleen de uittreksel tekst.

Offset Number

Kies met hoeveel posts u wilt compenseren. Als u bijvoorbeeld 3 berichten verschuift, worden de eerste drie berichten in uw blogfeed niet weergegeven.

Toon Aanbevolen Afbeelding

Met deze optie kunt u kiezen of u wel of geen miniatuurafbeeldingen wilt laten weergeven in uw blogmodule.

Lees meer knop

Hier kunt u aangeven of u de “lees meer” link wilt tonen na het uittreksel of niet.

Toon auteur

Kies of u wel of niet de auteur van elk blog bericht wilt tonen in het post meta gebied onder de post titel.

Toon datum

Kies of u wel of niet de datum wilt weergeven waarop elk bericht is gemaakt in het meta gebied onder de post titel.

Toon Categorieën

Kies of u wel of geen post categorieën wilt weergeven in het meta gebied onder de post titel.

Toon aantal reacties

Kies of u het aantal reacties wel of niet wilt weergeven in het metagebied onder de titel van het bericht.

Toon paginering

Kies of u paginering voor deze feed wel of niet wilt weergeven. Om genummerde paginering in te schakelen, moet u de WP Page Navi plugin installeren.

Admin Label

Hiermee wijzigt u het label van de module in de builder voor gemakkelijke identificatie. Bij gebruik van WireFrame view in de Visual Builder, zullen deze labels verschijnen binnen het module blok in de Divi Builder interface.

Blog Ontwerp Opties

In het ontwerp tabblad vindt u alle van de module styling opties, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u zult gebruiken om te veranderen hoe uw module eruit ziet. Elke Divi-module heeft een lange lijst met ontwerpinstellingen waarmee u vrijwel alles kunt wijzigen.

Layout

U kunt ervoor kiezen uw blogberichten weer te geven in een raster of in een lay-out over de volledige breedte.

Featured Image Overlay

Indien ingeschakeld, wordt een overlaykleur en -pictogram weergegeven wanneer bezoekers met de muis over de uitgelichte afbeelding van een bericht gaan.

Overlay Icon Color

Hier kunt u een aangepaste kleur voor de overlay icoon definiëren.

Hover Overlay Color

Hier kunt u een aangepaste kleur voor de overlay definiëren.

Hover Icon Picker

Hier kunt u een eigen icoon voor de overlay definiëren.

Text Color

Als uw blog op een lichte achtergrond wordt geplaatst, moet de Text Color op ‘Dark’ worden gezet. Andersom, als uw blog op een donkere achtergrond wordt geplaatst, moet de tekstkleur op ‘Licht’ worden ingesteld.

Koptekst lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype uit het dropdown menu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen die worden aangestuurd door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op je pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Koptekst lettergrootte

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de schuifregelaar verslepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte direct invoeren in het invoerveld rechts van de schuifregelaar. Het invoerveld ondersteunt verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te veranderen.

Koptekst Kleur

Gestandaard zullen alle tekstkleuren in Divi als wit of donkergrijs worden weergegeven. Als u de kleur van uw koptekst wilt veranderen, kies dan de gewenste kleur uit de kleurenkiezer met deze optie.

Letterafstand

Letterafstand beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw koptekst wilt vergroten, gebruikt u de schuifregelaar 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 na de waarde van de maat om het type eenheid te wijzigen.

Header Line Height

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw koptekst Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifbalk om de ruimte aan te passen of voert u de gewenste grootte van de tussenruimte in het invoerveld rechts van de schuifbalk in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te wijzigen.

Body Font

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

Body Font Size

Hier kunt u de grootte van uw bodytekst aanpassen. U kunt de schuifregelaar verslepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte direct invoeren in het invoerveld rechts van de schuifregelaar. Het invoerveld ondersteunt verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het type eenheid te wijzigen.

Body Tekst Kleur

Gestandaard worden alle tekstkleuren in Divi weergegeven als wit of donkergrijs. Als u de kleur van uw tekst wilt veranderen, kies dan de gewenste kleur uit de kleurenkiezer met deze optie.

Body Letter Spacing

Letter spacing beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen de letters in de tekst wilt vergroten, gebruikt u de schuifregelaar 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 na uw maatwaarde om het eenheidstype te wijzigen.

Body Line Height

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw bodytekst Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor het bereik om de ruimte aan te passen of voert u de gewenste grootte van de spatiëring in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te wijzigen.

Meta Font

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

Meta Font Size

Hier kunt u de grootte van uw meta-tekst aanpassen. U kunt de schuifregelaar verslepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte direct invoeren in het invoerveld rechts van de schuifregelaar. Het invoerveld ondersteunt verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te veranderen.

Metatekst Kleur

Gestandaard zullen alle tekstkleuren in Divi als wit of donkergrijs worden weergegeven. Als u de kleur van uw meta-tekst wilt veranderen, kies dan de gewenste kleur uit de kleurenkiezer met deze optie.

Meta Letter Spatie

Letter spatie beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw metatekst wilt vergroten, gebruikt u de schuifregelaar om de ruimte aan te passen of voert u de gewenste spatiëring in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te wijzigen.

Meta Line Height

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw metatekst Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar om de ruimte aan te passen of voert u de gewenste afstandsmaat in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u “px” of “em” kunt invoeren na uw maatwaarde om het eenheidstype te veranderen.

Gebruik rand

Als u deze optie inschakelt, wordt er een rand om uw module geplaatst. Deze rand kan worden aangepast met de volgende voorwaardelijke instellingen.

Border Color

Deze optie beïnvloedt de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurenkiezer om deze op de rand toe te passen.

Border Width

De standaard breedte van de rand is 1 pixel. U kunt deze waarde verhogen door de schuifregelaar te verslepen of door een aangepaste waarde in te voeren in het invoerveld rechts van de schuifregelaar. Aangepaste eenheden van metingen worden ondersteund, wat betekent dat u de standaard eenheid van “px” kunt veranderen in iets anders, zoals em, vh, vw etc.

Rand Stijl

Randen ondersteunen acht verschillende stijlen, waaronder: effen, gestippeld, gestreept, dubbel, groef, richel, inzet en uitsteeksel. Selecteer de gewenste stijl uit het dropdown menu om deze op uw rand toe te passen.

Blog Geavanceerde Opties

In het geavanceerde tabblad vindt u opties die meer ervaren webdesigners wellicht nuttig vinden, zoals aangepaste CSS en HTML-attributen. 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 binnen het bestand style.css van uw kinderthema.

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om een aangepaste CSS-styling te maken, of om links te maken naar bepaalde secties van uw pagina.

CSS Class

Voeg optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS klasse kan worden gebruikt om een aangepaste CSS styling te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child Theme of binnen de Custom CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder Page Settings.

Custom CSS

Custom CSS kan ook worden toegepast op de module en alle interne elementen van de module. Binnen de Custom CSS sectie, vindt u een tekst veld waar u aangepaste CSS direct aan elk element kunt toevoegen. CSS input in deze instellingen zijn al verpakt in style tags, dus u hoeft alleen CSS regels in te voeren gescheiden door puntkomma’s.

Visibility

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen uit de pagina te verwijderen.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.