WordPress Training
ElementorWordPress

Elementor-sjablonen: maken, opslaan en hergebruiken

Als u hetzelfde gedeelte op vijf pagina's nodig hebt — een contactblok, een referentiebalk, een prijsvergelijking — en het vijf keer met de hand nabouwt, is dat niet alleen moeizaam. Het wordt bij de eerste wijzigingswens een probleem, want dan moet u vijf plekken zoeken. Sjablonen lossen precies dat op.

De drie soorten sjablonen

Elementor kent meerdere sjabloontypes, en het onderscheid is belangrijker dan het in eerste instantie klinkt.

Pagina — een complete pagina met alle gedeelten. Nuttig als u meerdere vergelijkbaar opgebouwde pagina's aanmaakt, bijvoorbeeld dienstpagina's volgens hetzelfde patroon.

Sectie — een enkel blok: de contactregel, de call-to-action, het teamraster. In de praktijk het meestgebruikte type.

Container — sinds de omschakeling naar flexbox-containers de fijnere variant van de sectie. Als u nieuw bouwt, werkt u toch al met containers; waarom, leest u in Containers in plaats van secties.

Daar komen in de Pro-versie de themabouwstenen bij — koptekstgedeelte, voettekstgedeelte, berichtopmaak. Die werken anders en verdienen een eigen artikel: Theme Builder voor header en footer.

Een sjabloon aanmaken

De snelste weg loopt via de editor. U bouwt het gedeelte af, klikt met de rechtermuisknop op de containergreep en kiest Als sjabloon opslaan. Geef een naam die ook over drie maanden nog begrijpelijk is — „Sectie 3“ is geen naam, „CTA adviesgesprek“ wel.

Als alternatief maakt u sjablonen aan in het WordPress-menu onder Sjablonen → Opgeslagen sjablonen en bouwt u ze daar vanaf de grond op.

Een sjabloon inzetten

In de editor klikt u op het mapsymbool („Sjabloon toevoegen“), gaat u naar het tabblad Mijn sjablonen en voegt u het gewenste sjabloon in. Het belandt als kopie op de pagina.

Dat is het doorslaggevende punt: een ingevoegd sjabloon is een kopie. Wijzigt u later het sjabloon, dan wijzigen de al ingevoegde exemplaren niet mee. Wie dat niet weet, verbaast zich later over inconsistente pagina's.

Globale widgets: de variant die wel meegaat

Precies daarvoor zijn er globale widgets. Een widget dat u als globaal opslaat, bestaat maar één keer — alle toepassingen wijzen naar dezelfde bron. Wijzigt u het op één plek, dan wijzigt het overal.

U slaat het op via een rechtermuisklik op het widget met Als globaal opslaan. Daarna herkent u het in de editor aan de gele omranding.

Ideaal voor dingen die overal identiek moeten zijn en af en toe veranderen: telefoonnummer, openingstijden, een meldingsbanner, de knop naar de actuele actie. Ik gebruik globale widgets vooral voor contactgegevens — een gewijzigd telefoonnummer is anders een zoektocht over de halve website.

Globale widgets zijn een Pro-functie.

Elementor Pro: Globale widgets en de Theme Builder horen bij de functies die in het dagelijks werk het verschil maken — niet vanwege het uiterlijk, maar vanwege het onderhoud. Bekijk Elementor Pro

Exporteren en importeren

Elk sjabloon laat zich als JSON-bestand exporteren en in een andere WordPress-installatie weer inlezen. Dat is praktisch als u op een testomgeving bouwt en naar de live site overzet, of als u een beproefd gedeelte meeneemt naar een nieuw project.

Twee dingen waar het daarbij ervaringsgewijs misgaat:

Afbeeldingen gaan niet altijd mee. Controleer na het importeren of de beelden werkelijk aanwezig zijn of alleen naar het oude domein verwijzen.

Globale kleuren en lettertypen komen niet mee. Het sjabloon verwijst er alleen naar. Als in het doelsysteem andere globale waarden zijn vastgelegd, ziet het geïmporteerde gedeelte er anders uit — meestal is precies dat gewenst, maar het verrast de eerste keer.

Een ordening die zich bewezen heeft

Vanaf ongeveer vijftien sjablonen wordt de lijst onoverzichtelijk. Wat zich in mijn projecten heeft bewezen: een kort voorvoegsel naar gebruiksdoel — CTA –, Hero –, Contact –, Referenties –. De lijst sorteert alfabetisch, en verwante zaken staan daarmee bij elkaar.

Ruim bovendien af en toe op. Sjablonen die u al een jaar niet hebt ingezet, zijn meestal experimenten van toen. Ze kosten geen laadtijd, maar wel zoektijd.

De eigenlijke winst

Sjablonen besparen minder tijd bij het bouwen dan men denkt — het gedeelte is immers toch al snel gebouwd. Ze besparen tijd bij het wijzigen. Een website die drie jaar draait, wordt veel vaker gewijzigd dan gebouwd. Wie vanaf het begin met sjablonen en globale widgets werkt, merkt het verschil niet in de eerste week, maar in het tweede jaar.

Hoe u een website zo opzet dat ze ook na jaren onderhoudbaar blijft, is een van de zwaartepunten in mijn Elementor-training.

Tags

AnleitungElementorTemplatesWordPressWorkflow