Selecteer een pagina

Een alternatieve Divi blog layout met behulp van CSS

6 aug 2018

Divi blog layouts

Divi geeft de keuze uit twee standaard blog layouts: een volle breedte layout en een grid layout. Bij een grid layout worden de berichten in een gekozen aantal kolommen geplaatst. In de volle breedte layout worden de berichten onder elkaar gezet. Beide Divi blog layouts zien er stijlvol uit, maar aan de volle breedte layout kleeft helaas één (nogal groot) nadeel: de uitgelichte afbeeldingen zijn zó groot, dat er nauwelijks ruimte overblijft om de andere berichten te zien.

Een alternatieve keuze

Gelukkig is er een vrij eenvoudige manier om een meer overzichtelijke blogpagina te maken, waarbij de uitgelichte afbeeldingen verkleind worden weergegeven aan de linkerkant van de tekst.

Deze methode werkt alleen als je de in WordPress ingestelde blogpagina ongebruikt laat (zie afbeelding) en een nieuwe pagina aanmaakt met hierin een blogmodule. Kies in de blogmodule voor de volle breedte layout en laat een uittreksel zien. Zet de uitgelichte afbeelding aan. De weergave van de blogmodule pas je vervolgens aan met behulp van een beetje css.

Wordpress instellingen voor blog

Voor:

Na:

Wil jij deze layout graag toepassen op jouw Divi website? Volg dan de instructies van Gino Quiroz.