Maak een zelfontworpen WordPress blog met Divi

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

In deze handleiding leg ik stap voor stap uit hoe je je blog een uniek design geeft met de Divi theme.

Dit is wat je kunt nadat je deze gids hebt afgerond:

• 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 je blog er zo uit zien:

Je kunt natuurlijk dit design 100% naar eigen inzicht omvormen.

Voor wie is deze handleiding geschikt?

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 er klaar voor? Laten we dan beginnen.

Maak een blogpagina met Divi

Een blogpagina bevat een overzicht van alle blog artikelen op je site.

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

Noem je nieuwe pagina “Blog” en klik dan op Use 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.

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.

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.

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

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.

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

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:

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.

Vink nu Search Results aan en druk op Create Template.

Klik vervolgens op Add Custom Body.

En daarna op Add From Library.

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

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

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.

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

Nu zie je de volgende tekst verschijnen bovenaan je pagina:

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.

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.

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.

Nu kun je Dynamic Content toevoegen aan deze afbeelding. Kies voor 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.

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.

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.

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? Laat dan een bericht hieronder achter.