Een overzichtelijke website begint bij een goede presentatie van je artikelen. Heb je je ooit afgevraagd waarom sommige websites er zo strak uitzien met hun artikelen in nette blokken naast elkaar, terwijl jouw pagina er rommelig of simpel uitziet? Het geheim zit hem in de manier waarop je de indeling van je overzichtspagina configureert en vormgeeft. In dit artikel ontdek je precies hoe je die gewenste professionele uitstraling bereikt zonder dat je een programmeur hoeft te zijn, zodat jouw bezoekers met plezier door je content bladeren.
Wat is een divi blog grid layout precies?
Het mooie van een raster is dat het de leesbaarheid vergroot op grotere schermen. Gebruikers zijn gewend aan deze manier van informatie consumeren, denk maar aan webshops of nieuwssites. Door gebruik te maken van de divi blog grid layout geef je jouw website direct een visuele upgrade die past bij de huidige standaarden van webdesign.
De eerste stappen in de visuele bouwer
Om te beginnen met het aanpassen van je blogpagina, moet je de visual builder activeren. Dit is de grafische interface van divi waarmee je wijzigingen direct op je scherm ziet verschijnen. Soms kan het voorkomen dat deze bouwer niet direct laadt of een foutmelding geeft. Mocht je tegen problemen aanlopen, dan kun je dit artikel lezen over het divi visual builder wit scherm oplossen om snel weer aan de slag te gaan.
Zodra de bouwer is geladen, zoek je de plek op waar je de blogberichten wilt tonen. Dit kan op een specifieke blogpagina zijn, maar ook op je homepagina. Je voegt hier een nieuwe module toe door op het grijze plus-icoon te klikken en te zoeken naar de module genaamd blog. Standaard zal deze module je berichten in een lijstweergave tonen, maar dat gaan we nu veranderen.
De blog module omzetten naar een raster
Nu de module op je pagina staat, is het tijd om de divi blog grid layout te activeren. Volg hiervoor de volgende stappen in de instellingen van de module:
- Klik op het tandwiel-icoon van de blog module om de instellingen te openen.
- Ga naar het tabblad ontwerp (design).
- Zoek naar de optie lay-out.
- Verander de instelling van volledige breedte naar raster (grid).
Zodra je dit doet, zul je zien dat de berichten verspringen naar een kolomstructuur. Dit is de basis van je nieuwe ontwerp. In het tabblad inhoud kun je vervolgens bepalen hoeveel berichten je wilt tonen en welke categorieën zichtbaar moeten zijn. Het is aan te raden om een even aantal berichten te kiezen, zoals zes of negen, zodat je raster altijd mooi gevuld blijft op verschillende schermformaten.
Het stylen van de blogkaarten voor een unieke look
Een standaard raster is een goed begin, maar de echte kracht van divi zit in de styling. Je wilt dat elk bericht in het raster eruitziet als een mooie kaart. Dit doe je door te spelen met de achtergrondkleuren, randen en schaduwen. Ga hiervoor weer naar het tabblad ontwerp in de module-instellingen.
Onder het kopje kaart kun je een achtergrondkleur instellen voor de individuele berichten. Een subtiele witte of lichtgrijze achtergrond werkt vaak het beste. Om de kaarten echt van de pagina te laten springen, kun je een box shadow (doos-schaduw) toevoegen. Dit geeft diepte aan je ontwerp en zorgt voor een moderne uitstraling. Vergeet ook niet om de border radius (hoekstraal) aan te passen als je van ronde hoeken houdt; dit geeft een zachtere en vriendelijkere look aan je website.
Voor de tekstuele inhoud van je kaarten is het essentieel dat deze goed leesbaar is. Je kunt de lettertypes, kleuren en groottes van de titels en de hoofdtekst apart instellen. Als je meer wilt weten over hoe je tekstmodules optimaal instelt voor zowel bezoekers als zoekmachines, bekijk dan deze divi tekst module opmaak tips voor seo.
Metadata en afbeeldingen optimaliseren
In een divi blog grid layout spelen afbeeldingen een hoofdrol. De featured image (uitgelichte afbeelding) is het eerste wat een bezoeker ziet. Zorg ervoor dat al je afbeeldingen dezelfde beeldverhouding hebben, bijvoorbeeld 16:9 of 4:3. Dit zorgt ervoor dat alle kaarten in je raster even hoog zijn, wat een rustig en professioneel beeld geeft.
Daarnaast heb je de metadata. Dit is de informatie zoals de auteur, de datum van publicatie en de categorie. In de instellingen van de blog module kun je onder het tabblad elementen kiezen welke van deze gegevens je wilt tonen. Voor een minimalistisch ontwerp is het vaak slim om alleen de datum of de categorie te laten zien en de auteur weg te laten, tenzij je een website hebt met veel verschillende schrijvers.
Geavanceerde instellingen en paginering
Als je veel artikelen hebt, is het belangrijk om na te denken over hoe bezoekers door je archief navigeren. De blog module heeft een ingebouwde functie voor paginering. Dit zijn de knoppen onderaan je raster waarmee mensen naar de volgende pagina met berichten kunnen gaan. Je kunt de styling van deze knoppen volledig aanpassen aan de huisstijl van je website.
Soms wil je dat je blogpagina naadloos aansluit bij de rest van je site-structuur. Het is dan handig om te weten hoe de rest van je thema is opgebouwd. Voor beginners kan het bijvoorbeeld nuttig zijn om te leren hoe je een divi theme builder header maken aanpakt, zodat de bovenkant van je website perfect matcht met je nieuwe blogoverzicht.
Veelgestelde vragen over de divi blog grid layout
Waarom zijn de blokken in mijn raster niet even hoog?
Dit komt meestal doordat de uitgelichte afbeeldingen verschillende afmetingen hebben of doordat de titels van je berichten variëren in lengte. Je kunt dit oplossen door afbeeldingen met dezelfde verhoudingen te uploaden of door met een klein beetje aangepaste code een minimale hoogte in te stellen voor de kaarten.
Kan ik het aantal kolommen in het raster aanpassen?
Standaard bepaalt de divi blog module het aantal kolommen op basis van de breedte van de rij. Meestal zijn dit er drie op een computer. Wil je dit specifiek aanpassen naar bijvoorbeeld twee of vier kolommen, dan heb je vaak een klein beetje extra css-code nodig in de instellingen van de module.
Hoe zorg ik ervoor dat mijn raster er goed uitziet op mobiel?
De divi blog module is van zichzelf responsief, wat betekent dat hij automatisch verspringt naar één kolom op een mobiele telefoon. Je kunt in de ontwerp-instellingen specifiek voor mobiel de tekstgrootte en de marges aanpassen om te zorgen dat alles ook op een klein scherm goed leesbaar blijft.
Mobiele optimalisatie voor je blogoverzicht
Het is tegenwoordig cruciaal dat je website goed werkt op mobiele apparaten. Een divi blog grid layout die er prachtig uitziet op een desktop, kan op een smartphone soms te veel ruimte innemen of juist te kleine letters hebben. Gelukkig kun je in de instellingen van divi op bijna elk onderdeel klikken op het mobiele icoontje. Hiermee kun je specifieke waarden instellen voor tablets en telefoons.
Let vooral op de padding (binnenmarge) van je kaarten. Op een klein scherm wil je vaak dat de tekst iets meer ruimte heeft tot de rand van de kaart, maar dat de kaart zelf de volledige breedte van het scherm vult. Door hier kritisch naar te kijken, zorg je voor een optimale gebruikerservaring voor al je bezoekers, ongeacht het apparaat dat ze gebruiken.
Conclusie over het instellen van je blog
Het opzetten van een divi blog grid layout is een van de meest effectieve manieren om je wordpress website een professionele impuls te geven. Door de stappen te volgen van het activeren van de rasterweergave tot het verfijnen van de visuele details, creëer je een omgeving waarin je content echt tot zijn recht komt. Vergeet niet dat consistentie in je afbeeldingen en typografie het verschil maakt tussen een amateuristische site en een expert-platform.
Of je nu een kleine ondernemer bent die zijn kennis deelt of een beheerder van een grote nieuwssite, de flexibiliteit van de divi blog module biedt alle mogelijkheden die je nodig hebt. Blijf experimenteren met kleuren en schaduwen totdat je de perfecte balans hebt gevonden die past bij jouw merk en doelgroep. Met een goed ingericht raster ben je klaar om je verhaal op de best mogelijke manier te presenteren aan de wereld.
0 Comments