WordPress blog layout aanpassen met Elementor

Een WordPress blog layout aanpassen kun je met behulp van Elementor Pro doen zonder enige kennis van code. De reden om een blog layout aan te passen is omdat je bijvoorbeeld bepaalde elementen wilt toevoegen, zoals social media buttons of inschrijfformulieren voor je nieuwsbrief. In dit artikel leg ik je uit hoe je een WordPress blog layout kunt aanpassen met behulp van de Theme Builder van Elementor Pro.

Stap 1: voeg eerst een bericht toe

Voordat je bezig gaat met het instellen van het single template, is het handig als je alvast een artikel plaatst onder ‘Berichten’. Deze post type zit standaard in WordPress. Voeg de titel, tekst en een uitgelichte afbeelding toe. Op die manier kun je straks makkelijker het single template opmaken, omdat je een voorbeeld klaar hebt staan.
Als je al berichten klaar hebt staan, kun je dus direct beginnen met stap 2.

Stap 2: een blog template aanmaken

Met Elementor pas je niet je huidige template aan, maar kun je een compleet nieuwe layout voor je blog maken. Je moet hiervoor een single template aanmaken voor je blogartikelen.

Als je Elementor Pro hebt geïnstalleerd, zie je in je linkermenu in WordPress ‘Templates’ staan. Ga daar naartoe en kies vervolgens voor ‘Theme Builder’.

Klik op de knop ‘Nieuwe toevoegen’.

Laat type template op ‘Single’ staan en zet Post Type op ‘Bericht’ (tenzij je voor je blogartikelen een ander custom post type hebt aangemaakt). Geef het template vervolgens een naam. Bijvoorbeeld ‘Blogs’.

Let op: in de nieuwe versie van Elementor kan het zijn dat ‘select post type’ niet meer wordt getoond. Dit is geen probleem, dit kun je straks instellen bij de publicatie condities (stap 5).

Stap 3: Een template uit de bibliotheek importeren

Als je niet veel tijd wilt besteden aan het aanpassen van een blog layout, dan kun je een van de standaard blog templates uit de bibliotheek van Elementor kiezen. Deze opent meteen:

Kies een template uit die je aanspreekt. Je kunt deze straks eenvoudig aanpassen.

Ben je al wat handiger met Elementor? Dan kun je er ook voor kiezen om een template from scratch te maken.

Stap 4: WordPress blog layout aanpassen

Als het template is geladen, zie je de verschillende Elementor blokken op de pagina verschijnen. De content die op de pagina wordt getoond noemen we dynamische content. Dit betekent dat de inhoud verschilt per blogartikel. Elk blogartikel heeft een andere titel, inhoud en afbeelding.

Hieronder zie je alle (dynamische) widgets die je kunt gebruiken voor je blogartikelen:

• Post title: toont de titel van het bericht
• Post Excerpt: toont de samenvatting van het artikel. Als je deze niet hebt ingevuld, pakt ie automatisch de eerste regels tekst van je artikel
• Post content: dit is de tekst die je hebt toegevoegd in het tekstveld bij berichten (de inhoud van je blogartikel)
• Featured image: toont de uitgelichte afbeelding die je hebt toegevoegd
• Table of content: hiermee maak je een inhoudsopgave voor je blogartikelen.
• Author box: toont de auteur (gebruiker) die het artikel heeft gepubliceerd
• Post comments: biedt bezoekers de mogelijkheid om te reageren op het blogartikel. Je moet hiervoor wel de reacties inschakelen via WordPress Instellingen –> Discussie.
• Post navigatie: geeft bezoekers de mogelijkheid om makkelijk te navigeren naar het volgende of vorige artikel
• Post info: geeft overige informatie weer van je artikel. Bijvoorbeeld publicatiedatum, categorieën of tags.
• Progress  Tracker: daarmee kan je site bezoeker zien hoe ver (%) hij is bij het lezen van het artikel.

Daarnaast kun je natuurlijk nog allerlei informatie in het template plaatsen. Denk bijvoorbeeld aan:

• Nieuwsbriefinschrijfformulier in je sidebar
• Gerelateerde artikelen tonen
• Social media deelknoppen toevoegen 

ALLES wat je hier toevoegt komt bij al je blogartikelen te staan. Als je dus statische content gebruikt zoals een call to action, dan is deze bij al je artikelen zichtbaar met dezelfde inhoud.

Probeer gewoon even het een en ander uit. Als het goed is heeft Elementor al een bericht/ blog geladen uit je WordPress website waarmee je het voorbeeld kunt bekijken. Is dit niet het geval? Dan kun je dit wijzigen bij ‘Instellingen’ –> ‘Preview’ settings. Hier kun je aangeven welke voorbeeldbericht je wilt gebruiken.

Vergeet niet om het template ook te optimaliseren voor mobiel.

Stap 5: Het blog template publiceren

Als je klaar bent met het aanpassen van het blog template, kun je het template publiceren. Het resultaat is direct zichtbaar en overschrijft automatisch de blog layout van het thema dat je gebruikt.

Wil je het blog template niet voor alle blogberichten gebruiken? Dat kan ook. Geef dan bij condities aan voor welke categorie of tag-groep je het template wilt inschakelen.

Blogartikelen opmaken met Elementor

Heb je Elementor dan helemaal niet meer nodig als het single template eenmaal is ingesteld? In principe niet, het ligt er een beetje aan wat voor soort artikelen je wilt plaatsen. Op zich biedt de klassieke WordPress editor voldoende functionaliteiten om teksten, afbeeldingen of video’s toe te voegen. Alles komt dan netjes onder elkaar te staan. Wil je een artikel toch wat meer opmaken met mooie opsommingstekens, buttons of andere call to action knoppen? Dan kun je voor bepaalde artikelen ervoor kiezen om alsnog Elementor te gebruiken. Dat heb ik bijvoorbeeld gedaan met dit artikel over Elementor addons, omdat ik graag wat meer opmaakmogelijkheden wilde benutten. Maar in de basis plaats ik alles in de WordPress teksteditor. Dit maakt het ook makkelijker om de blogartikelen te exporteren naar een andere WordPress omgeving, mocht dit ooit nodig zijn.