Een blogpagina maken in WordPress kun je op verschillende manieren doen. Deze optie vind je meestal in het thema waar je mee werkt, maar je kunt ook een (tweede) blogpagina maken met behulp van Elementor Pro. Met de posts widget van Elementor Pro laad je eenvoudig je blogartikelen op welke pagina je maar wilt. Zo kun je een blogpagina maken in WordPress, maar je kunt de blogartikelen ook inladen op specifieke pagina’s. Waarbij je ook bepaalde categorieën kunt selecteren. In dit artikel laat ik je zien welke opties je hebt met Elementor Pro.
Tip: ook de single blog lay-out aanpassen? Hoe je dat doet lees je hier!
Stap 1: Pagina maken
De eerste stap is om een nieuwe pagina aan te maken waar al je blogartikelen worden getoond. Heb je al een pagina? Dan ga je verder naar stap 2.
Het is ook mogelijk om een blogpagina in te stellen met behulp van een archiefpagina. Persoonlijk geef ik de voorkeur aan een standaard pagina.
Stap 2: Blogberichten inladen op de pagina
Een blogpagina in WordPress ziet er meestal redelijk eenvoudig uit. Het begint met een titel, bijvoorbeeld ‘blogs’ en daaronder worden alle blogartikelen geladen. Indien gewenst kun je hier extra content aan toevoegen, maar voor dit artikel maken we even een ‘simpele’ blogpagina in WordPress.
De Posts widget
Om de blogartikelen in te laden op blogpagina maak je gebruik van de Posts widget. Deze vind je alleen in Elementor Pro. Sleep de widget naar de plek die je hebt vrijgehouden voor het tonen van de blogartikelen. Als het goed is zie je direct je laatst geplaatste blogartikelen verschijnen. Heb je nog geen blogartikelen geplaatst? Dan raad ik je aan om dit eerst te doen, dit maakt het makkelijker om de pagina vorm te geven.
Wil je meer doen met de vormgeving van de posts? Maak dan gebruik van de loop builder of JetEngine listing.
Query source instellen
Wanneer je de posts widget plaatst, toont deze automatisch de berichten die je in WordPress hebt geplaatst. Wil je hier een andere post type inladen? Dan moet je de query wijzigen. Dit doe je onder het tabje ‘Query’. Zie her voorbeeld hieronder.
Hier zie je alle post types die je op je WordPress website hebt staan. Ook kun je ervoor kiezen om een handmatige selectie te tonen. Gerelateerde artikelen gebruik je wanneer je een single blog layout maakt.
Categorieën instellen
Wil je bepaalde categorieën tonen? Dan kun je dit instellen onder het Query -> Include. Je kunt hierbij selecteren op terms of author. Je selecteert vervolgens de categorie of auteur waarvan je de blogartikelen wilt tonen.
Berichten uitsluiten
Wil je bepaalde berichten niet tonen in Elementor? Dan kun je deze eenvoudig uitsluiten via het tabje ‘Exclude’.
Volgorde aanpassen
Het meest gebruikelijke is om berichten weer te geven op basis van laatst geplaatste berichten. Maar je kunt als je wilt dit ook anders instellen. Hiervoor heb je de onderstaande opties:
- Datum: sorteer de blogberichten op datum
- Titel: op titel de blogberichten weergeven
- Menu order: geef de blogberichten op dezelfde volgorde weer als in je WordPress omgeving (dit is meestal op datum, maar je kunt dit ook aanpassen met een plugin Post Type order)
- Random: de blogberichten worden willekeurig geladen
Filters toepassen
Het is helaas nog niet mogelijk om met Elementor Pro filters boven de blogartikelen weer te geven, zodat je bezoekers bijvoorbeeld een categorie kunnen selecteren. Er zijn wel genoeg add-ons beschikbaar die deze optie wel bieden. Zo werken wij altijd met JetSmartFilters voor het instellen van filters. Lees hier hoe je blogfilters instelt.
Stap 3: blogberichten stijlen
Je kunt uit twee stijlen kiezen voor het weergeven van de blogartikelen: ‘classic’ en ‘cards’. Het voordeel van de classic variant is dat je de afbeelding ook links en rechts naast de tekst kunt plaatsen. Maar de ‘cards’ geeft je de optie om ook een avatar te tonen en een badge te gebruiken. Het is maar net wat je zoekt…
Wil je een compleet andere lay-out instellen dan de mogelijkheden die in de post widget zitten? Dan moet je werken met een add-on. Lees hier meer over het artikel over JetEngine Listings.
Lay-out opties classic
Hieronder zie je de opties voor de layout van een classic uiterlijk.
Columns: hier stel je in over hoeveel kolommen je de blogberichten wilt weergeven
Post per page: geef aan hoeveel blogs je op de pagina wilt tonen. Let op: vergeet vervolgens niet om ‘Pagination’ in te stellen, zodat mensen ook verder kunnen klikken naar andere blogs (indien gewenst).
Image position: deze optie vind je alleen bij de ‘classic’ variant. Je kunt ervoor kiezen om de afbeelding Top, Links of Rechts van de tekst te plaatsen. Het gaat hier om de afbeelding die je bij het blogartikel toevoegt als ‘Uitgelichte afbeelding’.
Masonry: wanneer je masonry inschakelt heb je geen vaste hoogte voor rijen of kolommen (Pinterest is hier een mooi voorbeeld van).
Afmeting afbeelding: stel hier in op welke grootte je de afbeelding wilt zetten. Vaak is bij blogartikelen 300 x 300 voldoende.
Image ratio en image width: hiermee stel je de verhoudingen in voor de uitgelichte afbeeldingen.
Lay-out opties Cards
Cards biedt dezelfde opties, behalve de mogelijkheid om positie van de afbeelding aan te passen.
Inhoud aanpassen
Vervolgens zijn er nog een heleboel instellingen die je kunt aanpassen. Zo kun je de titel aan- en uitzetten, de samenvatting verbergen of juist tonen, meta data toevoegen of verwijderen en een hyperlink plaatsen. Bij de Cards skin kun je er ook voor kiezen om een badge te weer te geven of de avatar van de auteur.
Ruimte tussen rijen en kolommen instellen
Via het tabblad ‘Stijl’ kun je instellen hoeveel ruimte je wilt hebben tussen de berichten. Ook kun je de berichten hier links, gecentreerd of rechts uitlijnen.
Cards skin stijlen
Wanneer je hebt gekozen voor de ‘Cards’ skin, vind je onder het tabblad ‘Stijl’ de onderstaande opties. Zo kun je een achtergrondkleur instellen, een border radius en de padding van de content aanpassen.
Classis skin stijlen
Heb je gekozen voor de classic skin? Dan heb je bijna dezelfde opties, alleen worden deze iets anders weergegeven:
Styling content aanpassen
Daarnaast kun je ook de styling van de content (titel, samenvatting, hyperlink, meta data) naar wens aanpassen.
Stap 4: Blogpagina maken en publiceren
Zoals je ziet biedt Elementor heel wat opties om een blogpagina te maken in WordPress. Als je klaar bent met de pagina kun je deze publiceren en toevoegen aan het menu van je website.
