Theme Builder: header, footer en sjablonen

Hoofdstuk 4 van 13

Tot nu toe bouwde je losse pagina’s. Maar sommige onderdelen staan op elke pagina: de bovenbalk met logo en menu (de header) en de onderkant met openingsuren en contactgegevens (de footer). Ook je blogberichten, het blogoverzicht en de foutpagina “pagina niet gevonden” hebben telkens dezelfde opbouw. Die onderdelen maak je met de Theme Builder van Elementor Pro.

In dit hoofdstuk leer je wat de Theme Builder is, hoe je stap voor stap een header en een footer bouwt, hoe je met weergavevoorwaarden bepaalt waar een sjabloon verschijnt, en hoe je een sjabloon maakt voor een blogbericht, het blogoverzicht en de 404-pagina. Op de voorbeeldsite van Bakkerij De Korenaar staan die sjablonen allemaal klaar: je kunt ze openen en vergelijken met wat je zelf maakt.

---

1. De Theme Builder openen

De Theme Builder vind je in het WordPress-menu links, onder Elementor.

1. Ga naar je dashboard en beweeg met je muis over Elementor in het zwarte menu links.
2. Klik op Theme Builder (1).

De Theme Builder opent in een donker scherm met de titel THEME BUILDER. De labels staan hier in het Engels, dat is normaal. Je ziet:

• links onder SITE PARTS de soorten sjablonen die je kunt maken: Header (1), Footer, Single Post (een enkel blogbericht), Single Page, Archive (een overzicht van berichten), Search Results, Loop Item en Error 404;
• in het midden de sjablonen die al bestaan, met een groen bolletje als ze gepubliceerd zijn;
• rechtsboven de knop Add New (2) om een nieuw sjabloon te maken;
• onderaan Switch to table view (3): dan krijg je dezelfde lijst als een gewone WordPress-tabel.

Klik links op Header. Je ziet nu enkel de header-sjablonen, met een voorbeeld. Bij elk sjabloon staat:

• Edit (1): het sjabloon openen in de Elementor-editor;
• Instances: Entire site met de link Edit Conditions (2): waar het sjabloon verschijnt (daarover meer in stap 5);
• Add New (3): een nieuwe header maken.

Klik je op Add New zonder eerst een soort te kiezen, dan zie je alle soorten als grote kaarten. Klik op het roze plusje van een kaart om meteen een sjabloon van die soort te maken.

---

2. Een header maken: het sjabloon aanmaken

We bouwen nu een header zoals die van De Korenaar: links het logo, in het midden het menu, rechts een opvallende knop. Op de voorbeeldsite bestaat die header al (“Header – De Korenaar”). Wij maken een oefenversie, “Header – Oefening”, die we niet publiceren. Zo kun je alles uitproberen zonder de echte site te veranderen.

1. Ga naar Templates en klik bovenaan op Nieuwe template toevoegen.
2. Kies bij Selecteer het type template waar je aan wilt werken voor Header (1).
3. Typ bij Geef je template een naam een duidelijke naam, bijvoorbeeld Header – Oefening (2).
4. Klik op Template aanmaken (3).

De Elementor-editor opent, met meteen de BIBLIOTHEEK erbovenop. Elementor stelt kant-en-klare headers voor (tabblad Blokken, gefilterd op Header). Die kun je gebruiken, maar ze brengen hun eigen kleuren, lettertypes en soms afbeeldingen mee die niet bij jouw huisstijl passen. Wij bouwen zelf: sluit de bibliotheek met het kruisje rechtsboven (1).

Je ziet nu een lege editor. In het canvas staat een gestreepte zone met Sleep widget hierheen. Daaronder zie je de titel van het sjabloon en de woorden “Content area”: dat is een voorproefje van waar later de inhoud van je pagina’s komt. Onderaan zie je de bestaande footer, want die staat al op de hele site.

• Bovenaan het widgetpaneel staat mogelijk een kaartje Atomic Elements – Nieuw met de knop Activate now. Klik het weg met het kruisje (1) en activeer het niet: in deze cursus werken we met containers en de klassieke widgets.
• Klik op het plusje (2) om een container toe te voegen.
• Merk op dat er bovenaan het widgetpaneel een categorie Site (3) staat met widgets die je enkel in sjablonen nodig hebt: Site Logo, Site Title, WordPress Menu, …

3. De header opbouwen

3.1 Eén container als rij

Een header is meestal één rij: alles staat naast elkaar. Dat maak je met één container waarvan de richting horizontaal is.

1. Klik op het plusje in het canvas. Elementor vraagt Welke lay-out zou je willen gebruiken? Kies Flexbox (1).
2. Bij Selecteer je structuur kies je het tweede blokje, met het pijltje naar rechts (1). Dat is één container met richting “rij”.

De container verschijnt en links opent Container bewerken. Je ziet bij Items → Richting dat het pijltje naar rechts actief is. De rest stellen we straks in, als de widgets erin staan.

3.2 Het logo: de widget Site Logo

1. Klik linksboven op het plusje (Elementen toevoegen) zodat je de widgets weer ziet.
2. Sleep de widget Site Logo (1) uit de categorie Site naar de lege container (2).

Het logo verschijnt meteen, zonder dat je een afbeelding moet kiezen. De widget Site Logo haalt het logo automatisch uit de Website instellingen (Site-identiteit). Dat is precies de bedoeling: verander je ooit je logo in de Website instellingen, dan verandert het ook in je header.

• Bij Site Logo (1) zie je het logo; met Change Site Logo spring je naar de Website instellingen.
• Bij Link (2) staat Site URL: klikt een bezoeker op het logo, dan gaat hij naar je homepage. Laat dat zo, bezoekers verwachten dat.

Het logo is waarschijnlijk veel te groot. Klik op het tabblad Stijl en zet de Breedte (1) op ongeveer 210 px. Klik op het schermpje naast “Breedte” om voor gsm een kleinere waarde in te stellen, bijvoorbeeld 160 px.

3.3 Het menu: de widget WordPress Menu

Het menu zelf (welke pagina’s, in welke volgorde) beheer je in WordPress onder Weergave → Menu’s. In de header zet je enkel een widget die dat menu toont.

1. Sleep de widget WordPress Menu (1) uit de categorie Site in de container, rechts naast het logo.

Bij Inhoud → Layout stel je het volgende in:

1. Menu (1): kies je menu, hier Hoofdmenu. Heb je meerdere menu’s, let dan op dat je het juiste kiest.
2. Layout (2): Horizontal, zodat de items naast elkaar staan.
3. Pointer (3): het effect als je met de muis over een item gaat. Underline (een lijntje eronder) is rustig en duidelijk.
4. Breakpoint (4), onder Mobile Dropdown: vanaf welke schermbreedte het menu inklapt tot een uitklapmenu. Tablet portretmodus betekent: op tablet en gsm wordt het een uitklapmenu.
5. Toggle Button (5): Hamburger, het bekende icoontje met drie streepjes waarop je op gsm tikt om het menu te openen.

Ga dan naar het tabblad Stijl. Bij Main Menu zie je naast Typografie en Text Color een wereldbolletje. Klik op het wereldbolletje bij Typografie (1) en kies een van je Globale lettertypes, bijvoorbeeld Knoppen (2). Doe hetzelfde voor de tekstkleur (globale kleur Tekst) en, onder het tabje Hover, voor de kleur als je over een item gaat (globale kleur Primair).

3.4 De knop “Bestel voor morgen”

1. Sleep een widget Knop (categorie Basis) helemaal rechts in de container.
2. Typ bij Tekst (1) een korte, actieve tekst: Bestel voor morgen.
3. Vul bij Link (2) de pagina in waar de knop naartoe gaat, bijvoorbeeld je contactpagina.

Op een gsm is er weinig plaats: logo, hamburger én knop passen moeilijk naast elkaar. Daarom verbergen we de knop op gsm. Ga naar Geavanceerd, open Responsive (1) en zet Verbergen op Mobiel portretmodus (2) aan.

3.5 De container uitlijnen

Klik nu op de container zelf (op het kleine handvat met de zes puntjes boven de container, of in een lege zone ervan). Bij Lay-out → Items:

1. Richting (1): het pijltje naar rechts (rij) staat al goed.
2. Inhoud uitlijnen (2): kies het vierde icoontje, ruimte ertussen. Het logo gaat dan helemaal links, de knop helemaal rechts en het menu in het midden.
3. Items uitlijnen (3): kies het middelste icoontje (gecentreerd), zodat logo, menu en knop verticaal netjes op één lijn staan.

Ga naar Stijl → Achtergrond. Kies bij Achtergrond type (1) het penseeltje (klassiek) en kies bij Kleur (2) via het wereldbolletje de globale kleur Wit. Zonder achtergrondkleur zou de header doorzichtig zijn, en dat zie je zodra hij “sticky” wordt en over de pagina schuift.

Open daarna Rand (1) en klik bij Vak schaduw (2) op het potloodje. Een zachte schaduw (Horizontaal 0, Verticaal 2, Vervaag 12, een heel lichte kleur) scheidt de header subtiel van de rest van de pagina.

3.6 Een sticky header

Een sticky header blijft bovenaan het scherm “plakken” als de bezoeker naar beneden scrolt. Zo is het menu (en je bestelknop) altijd binnen handbereik.

1. Selecteer de container en ga naar Geavanceerd.
2. Open Bewegingseffecten (1).
3. Zet Sticky (2) op Top.
4. Bij Sticky On (3) staan Desktop, Tablet portretmodus en Mobiel portretmodus. Laat ze alle drie staan, of verwijder er eentje met het kruisje als je op dat toestel geen sticky header wilt.

3.7 Controleren op gsm

Klik in de bovenbalk van de editor op het gsm-icoontje (1). In de gsm-weergave zie je dat het menu nu een hamburger-icoontje is (2) en dat de knop grijs is (3): grijs betekent “verborgen op dit toestel”.

Zo ziet de header er op een echte gsm uit, dicht en open:

---

4. Publiceren en weergavevoorwaarden

Een gewone pagina publiceer je en klaar. Een sjabloon uit de Theme Builder heeft één extra vraag nodig: waar moet het verschijnen? Dat zijn de weergavevoorwaarden (in het Engels: Display Conditions).

1. Klik rechtsboven op Publiceren. Het venster PUBLISH SETTINGS opent met de vraag Where do you want to display your Template?
2. Klik op Add condition (1).
3. Er verschijnt een regel Include – Entire site. Dat betekent: toon deze header op de volledige site.
4. Klik op Save & Close (3) om te publiceren.

Bij onze oefenheader krijg je een rode waarschuwing: We noticed that you already applied Header – De Korenaar with the same condition. Er bestaat al een header voor de volledige site. Twee headers met dezelfde voorwaarde botsen; Elementor zou er maar één kunnen tonen.

Je kunt voorwaarden combineren met Include (tonen op) en Exclude (niet tonen op). Een voorbeeld: “toon op de hele site, behalve op de homepage”:

1. Regel 1: Include (1) – Entire site (2).
2. Klik nog eens op Add condition. Zet de nieuwe regel op Exclude (3), kies Singular en dan Front page (4).

Handige keuzes in de voorwaarden:

• Entire site: overal (typisch voor header en footer).
• Singular → Front page (de homepage), Berichten (alle blogberichten), Pagina’s, of één specifieke pagina, 404 Page (de foutpagina).
• Archives → All archives (alle overzichtspagina’s), een bepaalde categorie, de zoekresultaten, …

Omdat onze oefenheader niet mag botsen met de echte header, sluiten we het venster met het kruisje rechtsboven zonder op Save & Close te klikken. Het sjabloon blijft dan een concept.

In de Theme Builder zie je het verschil: de echte header heeft Instances: Entire site (1), de oefenheader staat er als (draft) (2) met Instances: No instances (3). Een concept zonder voorwaarden verschijnt nergens.

Wil je later de voorwaarden van een sjabloon wijzigen, klik dan in de Theme Builder op Edit Conditions. Je krijgt hetzelfde venster; vergeet niet op Save & Close te klikken. In de editor vind je het ook terug via het pijltje naast Publiceren → Display Conditions.

---

5. De footer

De footer werkt precies zoals de header: een sjabloon van het type Footer, met voorwaarde Entire site. Open de footer van De Korenaar om te zien hoe hij in elkaar zit: ga naar de Theme Builder, klik links op Footer en dan op Edit.

5.1 Kolommen met containers

Open de Structuur (het icoontje met de lagen in de bovenbalk, 1). Je ziet hoe de footer is opgebouwd:

• een buitenste Container met de bruine achtergrond (globale kleur Primair);
• daarin een container als rij met drie containers als kolommen: (1) naam + korte tekst, (2) Openingsuren met een Icoon lijst, (3) Contact met een Icoon lijst;
• daaronder een Scheiding (een dun lijntje) en een Teksteditor met de copyright-regel.

De kolommen hebben een breedte in procenten (40 %, 30 %, 30 %). Op gsm staan ze onder elkaar: selecteer de rij-container, klik in de bovenbalk op het gsm-icoontje (1) en kijk bij Richting (2): voor gsm staat daar het pijltje naar beneden.

5.2 Openingsuren met een Icoon lijst

Voor openingsuren en contactgegevens is de widget Icoon lijst ideaal: elke regel krijgt een klein icoontje.

• Bij Items (1) staat elke regel als apart item. Met Item toevoegen (2) voeg je een regel toe; met de icoontjes rechts kopieer of verwijder je een regel.
• Klik op een item om het te openen: bij Tekst (1) typ je de regel, bij Icoon (2) kies je een icoontje (hier een klokje).
• De kleur van de icoontjes (goud) en de tekst (wit) stel je in op het tabblad Stijl.

5.3 Een copyright met een jaartal dat zichzelf bijwerkt

In de footer staat “© 2026 Bakkerij De Korenaar”. Volgend jaar klopt dat niet meer. Met een dynamische tag laat je Elementor het jaartal zelf invullen. We proberen dat in een nieuwe oefenfooter, zodat de echte footer onaangeroerd blijft.

1. Ga in de Theme Builder naar Footer en klik op Add New (1). Sluit de bibliotheek.
2. Bouw (of kopieer) een eenvoudige footer en zet onderaan een widget Koptekst voor de copyright-regel. Zet de HTML tag op p: het is geen echte titel.
3. Klik naast het veld Titel op het icoontje Dynamische tags (de gestapelde schijfjes, 1).

1. In de lijst kies je onder Site de tag Current Date Time (2).
2. Klik op het moersleuteltje in het veld. Zet bij Instellingen de Date Format op Custom (1) en typ bij Custom Format enkel een hoofdletter Y (2). “Y” betekent: het jaartal met vier cijfers.
3. Open Geavanceerd. Typ bij Voor (1) “© ” (met een spatie) en bij Na (2) ” Bakkerij De Korenaar” (met een spatie vooraan).

Het resultaat ziet er hetzelfde uit, maar op 1 januari springt het jaartal vanzelf naar het nieuwe jaar. Een oefenfooter die je niet nodig hebt, verwijder je in de Theme Builder via de drie puntjes naast Edit, of je laat hem als concept staan (een concept verschijnt nergens).

---

6. Een sjabloon voor blogberichten (Single Post)

Zonder sjabloon toont WordPress een blogbericht in de eenvoudige stijl van het thema Hello Elementor: titel en tekst, verder niets. Met een Single Post-sjabloon bepaal je hoe elk blogbericht eruitziet. Je schrijft het bericht zelf gewoon in de klassieke editor (titel, tekst, uitgelichte afbeelding); het sjabloon zorgt voor de vormgeving. Op de voorbeeldsite heet dat sjabloon “Enkel bericht – De Korenaar”.

6.1 Het sjabloon aanmaken

1. Ga naar de Theme Builder en klik links op Single Post. Er is nog niets: No Templates found. Je kunt hier op Add New (1) klikken …
2. … of, zoals bij de header, via Templates → Nieuwe template toevoegen: type Single Post (1), naam Enkel bericht – De Korenaar (2), Template aanmaken.
3. Sluit de bibliotheek.

In het widgetpaneel staat nu bovenaan de categorie Single (1) met de widgets die je in een berichtsjabloon gebruikt: Post Title (de titel), Post Content (de tekst), Featured Image (de uitgelichte afbeelding), Post Info (datum, auteur, categorie …), Post Navigation (vorig/volgend bericht), Author Box, Post Comments en meer.

6.2 Een voorbeeldbericht kiezen

Om tijdens het bouwen echte inhoud te zien, kies je een voorbeeldbericht. Klik in de bovenbalk op het icoontje Pagina instellingen en open Preview Settings:

1. Zet Preview Dynamic Content as (1) op Bericht.
2. Kies in het veld eronder (2) een blogbericht, bijvoorbeeld “Waarom ons desembrood 24 uur rijst”.
3. Klik op Apply & Preview (3).

6.3 De opbouw van het berichtsjabloon

We bouwen het bericht in vier blokken. Gebruik overal globale kleuren en lettertypes, zodat het sjabloon meteen in de huisstijl staat.

Blok 1 – de kop. Een container met de globale achtergrondkleur Crème, inhoudsbreedte Boxed (900 px), richting kolom, items gecentreerd en ruime padding (70 px boven, 60 px onder). Daarin:

• een Post Info met enkel de Date (datum), in de globale kleur Secundair (goud);
• een Post Title met HTML tag H1 (2), gecentreerd en groot (52 px, op gsm 34 px);
• een tweede Post Info met de auteur.

Bij Post Info bepaal je per item welk gegeven je toont. Klik op een item: bij Type (1) kies je bijvoorbeeld Author, Date, Time, Comments of Terms (categorieën). Bij Before (2) kun je er tekst voor zetten, zoals “Geschreven door “. Met Item toevoegen (3) zet je meerdere gegevens naast elkaar.

Blok 2 – de uitgelichte afbeelding. Een container (Boxed, 960 px breed) met de widget Featured Image. Op het tabblad Stijl: Hoogte 460 px (1), Object passend op Bedekken (2), zodat elke foto netjes wordt bijgesneden in plaats van vervormd, en een Rand radius van 16 px (3) voor afgeronde hoeken. Een lichte Vak schaduw maakt het af.

Blok 3 – de tekst. Een container (Boxed, 760 px) met de widget Post Content. Die toont alles wat je in de klassieke editor in het bericht hebt geschreven. Een smallere kolom van ongeveer 700 à 760 pixels leest veel aangenamer dan tekst over de hele schermbreedte. Op het tabblad Stijl kies je de Text Color (1) en de Typografie (2): iets groter dan normaal (19 px) met ruime regelafstand.

In dezelfde container komen een Scheiding en een Post Navigation: links “Vorig bericht”, rechts “Volgend bericht”, met de titel van dat bericht. Zet Label (1) aan, typ bij Previous Label (2) en Next Label (3) Nederlandse labels. Met In same Term (4) kun je de navigatie beperken tot berichten uit dezelfde categorie.

Blok 4 – een call-to-action. Onderaan een gouden band (globale kleur Secundair) met de koptekst “Zin gekregen in vers brood?” en een knop “Bestel voor morgen”. Zo stuur je lezers van je blog door naar wat je eigenlijk wilt: een bestelling.

6.4 Publiceren met de juiste voorwaarde

Klik op Publiceren en dan op Add condition. Bij een Single Post-sjabloon staat er al Singular klaar. Kies in het tweede veld Berichten (2) en laat het derde veld op All staan: het sjabloon geldt voor alle blogberichten. Klik op Save & Close (3).

Open nu een blogbericht op je site (bijvoorbeeld via het menu Blog). Elk bericht heeft dezelfde mooie opbouw, met zijn eigen titel, foto en tekst:

---

7. Een sjabloon voor het blogoverzicht (Archive)

De pagina Blog toont een lijst van al je berichten. Ook categoriepagina’s (“alle berichten in de categorie Recepten”) en zoekresultaten zijn zulke overzichten. In WordPress heten ze archieven. Met een Archive-sjabloon maak je er een mooi raster van kaarten van.

1. Maak via Templates → Nieuwe template toevoegen een sjabloon van type Archive, bijvoorbeeld Blogoverzicht – De Korenaar, en sluit de bibliotheek.
2. Bovenaan het widgetpaneel staat nu de categorie Archive met Archive Title (1) en Archive Posts (2).

7.1 Een kop boven het overzicht

Maak bovenaan dezelfde crèmekleurige kop als in het berichtsjabloon, met een klein gouden bovenschrift (“UIT DE BAKKERIJ”), een titel en een korte zin. Voor de titel heb je twee mogelijkheden:

• de widget Archive Title (1 = het dynamische veld Archive Title, 2 = HTML tag H1). Die toont automatisch de naam van het overzicht, bijvoorbeeld de naam van de categorie. In de editor zie je “Archives”;
• een gewone Koptekst met een vaste tekst, zoals “Onze blog”.

7.2 Het raster van berichten: Archive Posts

Zet onder de kop een container (Boxed, ruime padding) met de widget Archive Posts. Die toont automatisch de juiste berichten: op de Blog-pagina alle berichten, op een categoriepagina enkel die van de categorie. Bij Inhoud → Layout:

1. Uiterlijk (1): Cards geeft nette kaarten met afbeelding, titel, samenvatting en datum.
2. Columns (2): 3 kolommen op een computer. Klik op het schermpje om voor gsm 1 kolom te kiezen.
3. Excerpt Length (3): hoeveel woorden van de samenvatting je toont (bv. 22).
4. Read More Text (4): een Nederlandse tekst zoals “Lees verder »”.

Andere handige instellingen: Image Ratio (de verhouding van de foto, bv. 0,7), Meta Data (enkel Date), Badge uit als je geen categorieën gebruikt (anders staat er “Uncategorized” op elke kaart). Op het tabblad Stijl geef je de kaarten afgeronde hoeken, een witte achtergrond, een zachte schaduw en globale kleuren voor titel, tekst en “Lees verder”.

Open daarna Pagination: kies bij Pagination (1) Numbers + Previous/Next, en vertaal Previous Label (2) en Next Label (3) naar “« Vorige” en “Volgende »”. Paginanummers verschijnen pas als je meer berichten hebt dan er op één pagina passen (instelbaar onder Instellingen → Lezen in WordPress). Onder Advanced vul je een vriendelijke Nothing Found Message in, zoals “Er zijn nog geen berichten. Kom snel eens terug!”

7.3 Publiceren

Klik op Publiceren → Add condition. Laat het tweede veld op All archives (1) staan: dan geldt het sjabloon voor de Blog-pagina, categorieën, tags, auteurs en zoekresultaten. Klik op Save & Close (2).

---

8. Een eigen 404-pagina

Typt een bezoeker een adres dat niet bestaat, of klikt hij op een oude link, dan toont WordPress een foutpagina: de 404-pagina. Standaard is die kaal en weinig behulpzaam. Een eigen 404-pagina in je huisstijl stelt de bezoeker gerust en helpt hem verder.

1. Maak via Templates → Nieuwe template toevoegen een sjabloon van type Error 404, bijvoorbeeld 404 – De Korenaar.
2. Maak één container met de globale achtergrond Crème, Min. hoogte 72 vh, alles gecentreerd.
3. Zet erin: een grote Koptekst “404” (HTML tag p, 160 px, globale kleur Secundair, 1 = Tekstkleur, 2 = Typografie), een Koptekst H1 “Oeps, dit brood is op!”, een korte Teksteditor-zin en een rij met twee knoppen (“Naar de homepage” en “Bekijk ons brood”).

Voeg tot slot de widget Search toe, zodat de bezoeker meteen kan zoeken. Vertaal de Placeholder (1) naar “Zoek op de site…” en de knoptekst bij Text (2) naar “Zoeken”. Op het tabblad Stijl rond je het veld en de knop af.

Bij het publiceren staat de voorwaarde al goed: Include – 404 Page (1). Klik op Save & Close (2). Voeg geen extra voorwaarden toe.

Test het door een adres te typen dat niet bestaat, bijvoorbeeld jouwsite.be/deze-pagina-bestaat-niet:

---

9. Kort: Loop Grid en Loop Item

De widget Archive Posts heeft een vaste opbouw (foto, titel, tekst, datum). Wil je de kaart van een bericht helemaal zelf ontwerpen, dan gebruik je de widget Loop Grid (categorie Pro). Die werkt in twee stappen:

1. Je maakt eerst een sjabloon van het type Loop Item: het ontwerp van één kaart, opgebouwd met dynamische widgets zoals Post Title, Featured Image en Post Excerpt.
2. In de Loop Grid kies je bij Choose a template (1) dat Loop Item, of je klikt op Create template om er meteen een te maken. De Loop Grid herhaalt de kaart dan voor elk bericht. Onder Query stel je in welke berichten (bv. de 3 nieuwste).

Een Loop Grid kun je ook op een gewone pagina zetten, bijvoorbeeld “Onze 3 nieuwste berichten” op je homepage. Voor een eerste website volstaat Archive Posts (of de widget Posts op een gewone pagina) meestal ruim.

---

10. Het resultaat

In de Theme Builder staan nu alle “globale onderdelen” van de site van De Korenaar netjes op een rij, elk met een groen bolletje:

Veelgemaakte fouten

Vragen

Kan ik op één pagina een andere header tonen?

Ja. Maak een tweede header en geef die de voorwaarde Include → Singular → Pagina’s → (die ene pagina). Geef de gewone header een Exclude voor diezelfde pagina. Elementor kiest bovendien automatisch het sjabloon met de meest specifieke voorwaarde.

Ik heb mijn menu aangepast, maar de header verandert niet. Wat nu?

Het menu beheer je onder Weergave → Menu’s. Controleer of je het juiste menu hebt aangepast (het menu dat in de WordPress Menu-widget gekozen is) en of je op “Menu opslaan” hebt geklikt. Ververs de pagina daarna; soms moet je even wachten tot de cache vernieuwd is.

Moet ik voor elk blogbericht het sjabloon openen?

Nee. Dat is net het voordeel. Je schrijft je berichten gewoon in de klassieke editor met een titel, tekst en uitgelichte afbeelding. Het Single Post-sjabloon zorgt automatisch voor de vormgeving.

Wat is het verschil tussen Single Post en Single Page?

Single Post is voor blogberichten, Single Page voor gewone pagina’s. Omdat je je pagina’s met Elementor zelf vormgeeft, heb je een Single Page-sjabloon zelden nodig.

Kan ik een sjabloon terugzetten naar een vorige versie?

Ja. Open het sjabloon in de editor en klik in de bovenbalk op het icoontje Geschiedenis (het klokje). Onder Revisies vind je vorige versies terug.

Opdracht

Samengevat

• De Theme Builder (Elementor → Theme Builder) is voor onderdelen die op veel pagina’s terugkomen: header, footer, blogbericht, blogoverzicht, 404.
• Je bouwt zo’n onderdeel één keer als sjabloon; aanpassen doe je ook maar één keer.
• Weergavevoorwaarden bepalen waar een sjabloon verschijnt: Entire site, Berichten, All archives, 404 Page …, met Include en Exclude.
• Gebruik de widgets uit de categorieën Site, Single en Archive: die vullen zichzelf in met het logo, het menu of de gegevens van het bericht.
• Dynamische tags laten Elementor zelf iets invullen, zoals het jaartal in je copyright.
• Gebruik altijd globale kleuren en lettertypes en test op gsm.

Alle hoofdstukken