Hoe maak je een Custom Loop in Divi 5?
Divi 5 heeft een prachtige nieuwe uitbreiding. De Custom Loop Builder. Een korte uitleg met voorbeelden die je kunt nabouwen.
Iedereen kent de standaard layout voor een blog. Die bestaat, zoals in de afbeelding van mijn blog hier onder, altijd uit:
– Titel
– Uitgelichte afbeelding
– Meta (zoals datum, auteur, categorie)
– Tekst
– Lees meer link
Zoals je ziet is een beperkte styling mogelijk. Maar altijd van DIE velden. Niks meer.
Maar soms wil je wel meer!
Je hebt bijvoorbeeld een Custom Post “Motoren” gemaakt. Die heeft er extra velden (Custom Meta Fields) bijgekregen zoals Bouwjaar, Kilometers, Prijs. Ook die wil je laten zien op de pagina die alle Motoren laat zien.
Zoals in de afbeelding hieronder. En dat is wat we nu gaan maken.
Geen styling nog, puur de manier waarop je de extra velden (Custom Meta Fields) nu wel in de loop kunt plaatsen.
Maak een nieuwe pagina “Voorbeeld Loop Builder”
Sectie (blauw) staat er standaard al.
Tip! Voor een beter overzicht, bouw in de Wireframe view door te klikken op 
(linker kantlijn)
Voeg een Rij toe met 1 kolom.
Klik op de groene Plus 
Kies Row equal columns = 1 column
Admin Label: “Standard Row”
Voeg een Tekst Module toe
+ Tekst (zwart)
Admin Label: “Title”
Nu gaan we de “Standard Row” layout aanpassen.
Klik op het groen tandwiel 
Ga naar Design > Layout van de rij (row)
Layout Style=Flex
Layout Direction=row
Justify Content=start
Align Items=stretch
Layout Wrapping=wrap
Wrapping Alignment=stretch
Dus zoals in de afbeelding hiernaast.
Niet in dit voorbeeld maar handig om te weten. De ruimte die tussen de diverse Posts zit is in te stellen met Horizontal en Vertical Gap. Probeer maar eens als ie af is.
De kolom tot Loop maken
Klik weer op het groene tandwiel.
Dan op Kolom
Klik op: Loop Element
Kies: Post Type
In ons voorbeeld: Motoren
Nog steeds in de kolom… Ga naar
Design > Layout en stel het in zoals op de afbeelding.
Aantal kolommen instellen
Nog steeds bij Column. Niet row.
Design > Sizing
Column class 1/4
(let op ! Deze keuze zit vervelend verstopt, je moet een beetje naar boven scrollen)
Nu is de rij / kolom structuur klaar en gaan we de velden plaatsen.
Eerst de gewoonlijke Titel
(klik op Text Module “Title”) > Text > Tinymce
kies Dynamic Content Loop Post Title
!! afsluiten met Apply
Insert nieuwe Module (zwart) nu Image
Admin label: “Featured Image”
Maak afbeelding Dynamic: Loop Featured Image
!! afsluiten met Apply
Insert nieuwe Module (zwart) nu Text
Admin Label “Excerpt”:
Maak Text Dynamic:Loop Excerpt
!! afsluiten met Apply
Insert nieuwe Module (zwart) nu Text
Admin Label “Price”:
Maak Text Dynamic: Custom field > Select <p>kies Dynamic Content Loop Post Title,: prijs
!! afsluiten met Apply
Insert nieuwe Module (zwart) nu Button
Content > Link > Button Link URL: Loop Link
Link Text: Custom
Custom Link Text: Read more
!! afsluiten met Apply
Je kunt hier echt schitterende sites mee maken. Custom post maken met ACF of een eigen plugin en een Custom Loop voor een uiterst professionele pagina vol met producten, occasions, vastgoed, evenementen, boeken, bedenk het maar..
Een voorbeeld van Divi 5 Custom Loops zie je hier.
Een voorbeeld van wat wij zojuist hebben gemaakt maar dan met echt profi CSS styling hier: https://webwerkplaats-demo.nl/divi5demo/having-fun/
