Maak een zelfontworpen WordPress blog met Divi

door | 5 september, 2020

Je hebt een WordPress blog opgezet. Nu wil je je eigen design toepassen op je blogpagina en blog artikelen.

In deze handleiding laat ik zien hoe je je blog een uniek design geeft met Divi, ’s werelds populairste WordPress theme.

Nadat je deze gids hebt afgerond, zul je beschikken over de volgende vaardigheden:

  • Voeg een blog module toe die automatisch je nieuwste artikelen weergeeft
  • Plaats een sidebar met onderdelen zoals een stukje over jezelf of je onderneming en een zoekfunctie
  • Maak een aparte pagina voor je verschillende blog categorieën
  • Maak een aparte pagina voor de zoekresultaten van je bezoekers
  • Ontwerp een blog artikel template

Als je de instructies in dit artikel tot op de letter volgt, zal dit je resultaat zijn:

Je kunt natuurlijk dit design volledig naar eigen inzicht omvormen. Dat is waar Divi voor gemaakt is.

Ben je een complete Divi beginner? Ook dan is deze handleiding perfect te volgen. Ik sla geen stap over, en gebruik afbeeldingen voor alle benodigde handelingen.

Heb je al Divi ervaring? Dan zul je misschien geen behoefte hebben aan een uitleg over het aanpassen van lettertypes, achtergrondkleuren en andere design elementen die in dit stuk beschreven staan.

De secties in deze gids die over design gaan zijn daarom als dusdanig gemarkeerd. Je kan ze eenvoudig overslaan als je wilt.

Ben je klaar voor het maken van een zelfontworpen blog met Divi? Laten we dan beginnen.

Complete websitebouwer

24/7 customer support

Super makkelijk te gebruiken

Meest gebruikte WordPress theme

30 dagen niet goed geld terug garantie

Maak een blogpagina met Divi

Een blogpagina bevat een overzicht van alle blog artikelen op je site. Die van Start24 ziet er zo uit. De meeste blogs volgen een soortgelijke structuur.

Om te beginnen maak je een nieuwe pagina via het WordPress dashboard. Klik op Pages » Add New.

Voeg een nieuwe pagina toe in de WordPress dashboard.

Noem je nieuwe pagina “Blog” en klik dan op Use Divi Builder.

Gebruik de Divi builder.

Kies nu de linker optie, Build From Scratch.

Klik het menu wat nu verschijnt weg.

Blog header

We gaan nu een header toevoegen voor onze blogpagina. Voeg een New Section toe door op het blauwe plusje te drukken. Kies voor Fullwidth en kies vervolgens de Fullwidth Header.

Verander de tekst onder Title in “Blog” en verwijder de tekst onder Button #1. Verwijder ook de tekst onder Body.

Divi fullwidth header settings.

Design instructies


Scroll nu omlaag. Klik op Background en vervolgens op het gekleurde vlak.

Voer nu de volgende kleurcode in: #228278.

Klik nu op Design » Title Text. Verander Title Font naar Roboto. Zet de Title Text Alignment in het midden en verander de Title Text Size naar 48px.


Klik op het groene vinkje om de header op te slaan.

Lijst met blog artikelen

Nu gaan we een lijst toevoegen waarin je laatste blog artikelen verschijnen.

Klik weer op het blauwe plusje om een nieuwe sectie toe te voegen. Selecteer Regular.

Kies nu voor de volgende opzet. In het brede deel komt je lijst met artikelen. In het smalle deel komt je blog’s sidebar. Hierin gaan we elementen zetten zoals een stukje over jezelf en de zoekfunctie.

Kies voor Blog bij Insert Module. Nu zie je een overzicht verschijnen van je laatste blog artikelen.

Je kunt allerlei dingen aanpassen zoals Post Count (hoeveel artikelen staan er op één pagina), de artikel categorieën onder Included Categories en de Date Format.

Voor dit laatste, zorg dat je j F, Y invoert. Dit zorgt ervoor dat de data van je artikelen in dit formaat worden weergeven: 1 september, 2020 in plaats van sep 1, 2020.

Wanneer je omlaag scrolt, kun je bij Elements kiezen welke elementen je blog artikelenlijst toont. Bijvoorbeeld, met Featured Image schakel je in of uit of je artikel’s afbeelding zich laat zien. Met Show Excerpt kun je een paar introducerende regels tekst laten zien. En met Pagination kun je je bezoekers eenvoudig naar oudere pagina’s van je blog laten doorklikken.

Volg de instellingen die je hieronder ziet.

Divi blog instellingen.

Design instructies


Nu gaan we een aantal design aanpassingen te maken om je laatste artikelen nét wat aantrekkelijker uit de verf te laten komen.

Ga naar Design » Border. Verander de waarde die je hier ziet naar 4px. Hierdoor ogen de featured images van je artikelen een tikkeltje zachter.

Divi blog settings rounded corners.

Scroll nu omlaag en klik op Title Text. Verander de Title Font naar Roboto en de Title Text Size naar 32px.

Divi title text.

Klik nu op Body Text. Kies wederom Roboto als lettertype. Verander de Body Font Weight naar Light. Kies 16px voor de Body Text Size.

Tot slot gaan we de Meta Text aanpassen. Dit beïnvloedt de opmaak van de auteursnaam en andere elementen onder de artikel titels. Selecteer Roboto als lettertype en verander de Meta Text Size naar 12px.


Sidebar

In de sidebar van je blog kun je allerlei handige dingen kwijt. Als je een emaillijst wilt opbouwen, kun je een email formulier in je sidebar plaatsen. Wil je op een gegeven moment een ebook gaan promoten, dan kun je dit ook prima in je sitebar kwijt.

Ik ga je nu laten zien hoe je een auteursstukje, zoekfunctie, en lijst met recente artikelen aan je sidebar toevoegt.

Klik op Add New Module (donkergrijze plusje) en kies de Blurb module.

Divi insert blurb.

Vul nu de Title en Body in met een stukje over jezelf of je onderneming.

Divi blurb titel en tekst.

Design instructies


Bij Design, verander bij Title Text de Body Font naar Roboto op 24px.

Verander bij Body Text het lettertype eveneens naar Roboto en de grootte naar 16px. Stel het Body Font Weight in op Light.    


Klik nu op het groene vinkje, en je auteursstukje staat.

Onder je auteursstukje, klik op Add New Module (donkergrijze kruisje) en kies de Sidebar module om een zoekbalk en een lijst van nieuwste artikeltitels toe te voegen.

Design instructies


Bij Design, verander bij Title Text de Body Font naar Roboto op 24px.

Volg bij Body Text de volgende instellingen:

Divi instellingen blog.

Zorg dat je op Publish drukt om de pagina te publiceren op je site zodra je er tevreden mee bent.

Gefeliciteerd, je blogpagina staat! Het zwaarste deel van deze handleiding is achter de kiezen.

Laten we nu zorgen dat je bezoekers deze zelfontworpen blogpagina ook zien wanneer ze de zoekfunctie gebruiken.  

Blogpagina met zoekresultaten

Als je niet een speciale pagina aan je zoekresultaten toewijdt, worden je bezoekers naar het standaard WordPress geleid. Dat wil je niet hebben. Om dit te voorkomen gaan we een template toewijzen aan de zoekresultaten van je blog.

Maak een template in Divi

Ga naar de WordPress dashboard en klik op Divi » Theme Builder en klik op Add New Template.

Divi theme builder voeg nieuwe template toe.

Vink nu Search Results aan en druk op Create Template.

Divi template voor search results.

Klik vervolgens op Add Custom Body.

Divi add custom body.

En daarna op Add From Library.

Divi add from library.

Klik nu op Blog, de pagina die we net hebben gemaakt.

Divi load from library.

En klik nu op het pennetje om de Custom Body aan te passen.

Divi edit custom body.

Zoekterm in de paginatitel

Nu gaan we ervoor zorgen dat je bezoekers de zoekterm die ze invoeren bovenaan de pagina zien staan.

Klik op Module Settings.

Divi module settings.

Kies nu de Dynamic Content functie en kies nu Post/Archive Title die bovenaan staat.

Divi use dynamic content.

Nu zie je de volgende tekst verschijnen bovenaan je pagina:

Divi dynamic title.

Wanneer je bezoekers nu een zoekterm intypen, bijvoorbeeld “marketing,” zal deze tekst hierin veranderen: Resultaten voor “marketing.”

Relevante artikelen in de zoekresultaten

Je wilt dat de zoektermen die je bezoeker intypt ook daadwerkelijk relevante resultaten oplevert. Om te zorgen dat dit gebeurt, kies voor Yes onder Posts For Current Page binnen de Blog Settings.

Divi blog settings.

Je zoek resultaten pagina staat! Vergeet hem niet op te slaan. Nu gaan we de categorieën pagina in elkaar zetten.  

Blog categorieën pagina

Bezoekers van je blog zullen een stuk eenvoudiger de content kunnen vinden die ze zoeken wanneer je gebruik maakt van blog categorieën. Bijvoorbeeld, bij Start24 hebben we onze content opgedeeld in de volgende categorieën:

  • Website maken
  • Business development
  • Tools of the trade
  • Ondernemen & business
  • Admin, accounting & legal
  • Lifestyle & productiviteit

Elke categorie heeft z’n eigen pagina. Zie hier bijvoorbeeld onze website categorie pagina.  

Om een blog categorieën pagina te maken, volg dezelfde stappen van Maak een template in Divi in het vorige hoofdstuk. Zorg alleen ditmaal dat je All Category Pages kiest.

Divi template all category pages.

That’s it! Zo eenvoudig is het een blog categorieën pagina te maken.

Blog artikel template met Divi

Tot slot gaan we een blog artikel template maken.

Volg dezelfde stappen als in de vorige twee hoofdstukken om een template op te zetten. Vink ditmaal All Posts aan om de template toe te passen op al je blog artikelen.

Klik op het pennetje om de template aan te passen.

Verwijder eerst de blog module.

Afbeelding bovenaan je blog artikel

Klik nu op het donkergrijze plusje en voeg de Image module toe. Ga nu naar de Image Settings en verwijder de afbeelding.

Divi image settings afbeelding verwijderen.

Nu kun je Dynamic Content toevoegen aan deze afbeelding. Kies voor Featured Image.

Divi dynamic content featured image.

Design instructies


Maak de randen van de afbeelding rond via Design » Border. Verander de waarde die je hier ziet naar 4px.


Auteursnaam, datum en andere details

Voeg onder de afbeelding de Post Title module toe. Bij Elements, schakel de Featured Image uit.

Divi post title settings blog.

Design instructies


Bij Design » Title Text verander je de Title Text Size naar 32px. Bij Design » Meta Text Size verander je de grootte naar 14px. Voor het lettertype bij beiden kies je Roboto.


Blog tekst

Voeg onder de auteursnaam en andere details de Post Content module toe. Maak je geen zorgen over de voorbeeld tekst die niet in lijn staat met de elementen erboven. Op je blog zelf ziet de tekst van je artikelen er precies zo uit als je zou verwachten.

Divi blog voorbeeld.

Design instructies


Verander bij Design » Title Text de Heading 2 font naar 32px. Bij Heading 3 verander je de grootte naar 24px. Voor het lettertype bij beiden kies je Roboto.

Divi post content settings design.

Bij Design » Text verander je het lettertype naar Roboto en de lettergrootte naar 16px.


Blogreacties

Tot slot gaan we een blogreactie module toevoegen. Hiervoor hoef je alleen onder de Post Content module de Comments module toe te voegen. Je bezoekers kunnen nu eenvoudig reacties achterlaten op je artikelen.

Design instructies


Verander in de Design sectie bij alle tekstonderdelen het lettertype naar Roboto


Het zit erop! Bij deze begrijp je de ins and outs van hoe je zelf een blog ontwerpt met Divi. Heb je nog vragen, of heb je suggesties om deze handleiding te verbeteren? Stuur ons dan een bericht via de contact pagina.

Complete websitebouwer

24/7 customer support

Super makkelijk te gebruiken

Meest gebruikte WordPress theme

30 dagen niet goed geld terug garantie

Joost Boer

Sinds 2014 aan het ondernemen in de tech industrie. Tot eerder dit jaar in Azië gevestigd, nu weer terug in Nederland.

2 Reacties

  1. Anne

    Onwijs handig dit….. ik kwam er zelf niet helemaal uit. Erg blij dat mn blog nu precies eruit ziet zoals ik wil. 🙂

    Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Share This