Les 3 van 5

Les 3: De Theme Builder — header, footer en templates

De Divi Theme Builder is het onderdeel dat Divi 4 echt onderscheidt van andere page builders. Hiermee ontwerp je niet alleen pagina’s, maar ook de header, footer, 404-pagina, zoekpagina en de templates voor blogartikel-pagina’s en WooCommerce productpagina’s.

Theme Builder openen

Ga in het WordPress dashboard naar Divi → Theme Builder. Je ziet een overzicht van alle templates die je kunt beheren:

  • Global Header — de header die op alle pagina’s verschijnt
  • Global Footer — de footer die op alle pagina’s verschijnt
  • Custom Body — een body-template voor specifieke pagina-types

Een eigen header bouwen

Klik op “Add Global Header” → “Build Global Header”. Je opent de Visual Builder, maar nu voor de header. Voeg een sectie toe met een rij. Een typische Divi-header bevat:

  • Links: de Logo-module (koppelt automatisch aan je thema-logo)
  • Rechts: de Menu-module (koppelt aan je WordPress-navigatiemenu)

Je kunt ook een Sticky Header maken: ga naar de sectie-instellingen → Scroll-effecten → “Maak deze sectie sticky”. De header blijft dan bovenaan het scherm hangen als de bezoeker scrollt.

Template-toewijzing

Je kunt templates toewijzen aan specifieke pagina’s of pagina-types. Klik op “Add New Template” en kies voor wie dit template geldt:

  • Alle pagina’s — standaard template
  • Specifieke categorie — bijv. alle blogartikelen in categorie “Nieuws”
  • Specifieke pagina — bijv. alleen de contactpagina
  • WooCommerce producten — template voor alle productpagina’s
  • 404-pagina — eigen ontwerp voor niet-gevonden pagina’s

Dynamic Content

In de Theme Builder gebruik je Dynamic Content om automatisch de juiste informatie op elke pagina te tonen. In de Tekst-module klik je op het database-icoon naast een tekstveld om een dynamic content-veld te kiezen:

  • Post Title — toont automatisch de paginatitel
  • Post Date — toont de publicatiedatum
  • Author Name — toont de auteursnaam
  • Featured Image — toont de uitgelichte afbeelding
  • Post Content — toont de volledige pagina-inhoud

Zo bouw je één blogartikel-template die automatisch de juiste data toont voor elk artikel.

Opdracht

Bouw een eigen header met de Logo- en Menu-module. Maak hem sticky. Maak daarna een Global Footer met twee kolommen: links je bedrijfsgegevens, rechts een kopie van het navigatiemenu. Sla beide op en bekijk het resultaat op je site.