Met Elementor-shortcodes kun je opgeslagen sjablonen overal op je WordPress-site invoegen zonder ze helemaal opnieuw te hoeven maken. Zodra je een sjabloon hebt gemaakt en de bijbehorende shortcode hebt gekopieerd, kun je deze binnen enkele seconden in elk bericht, elke pagina of widget plakken.
In deze handleiding leer je hoe je Elementor- shortcodes op de juiste manier instelt en je workflow als een professional stroomlijnt.
Websitebeveiliging beschermt bedrijfswebsites tegen malware, hackpogingen, datalekken, downtime en ongeautoriseerde toegang, terwijl het tegelijkertijd het klantvertrouwen, de SEO-prestaties, de uptime en de bedrijfsstabiliteit op lange termijn verbetert. In 2026 brengt een gehackte website niet alleen gevoelige klantgegevens aan het licht. Het vernietigt het vertrouwen dat uw bedrijf jarenlang heeft opgebouwd, leidt tot sancties van zoekmachines en kan aanzienlijke juridische aansprakelijkheid met zich meebrengen op grond van de wetgeving inzake gegevensbescherming.
Wat zijn Elementor-templates en shortcodes?
Voordat we dieper ingaan op shortcodes, is het essentieel om te begrijpen hoe Elementor-templates werken. Deze templates zijn je belangrijkste ontwerpelementen, die je gemakkelijk overal op je website kunt hergebruiken, waardoor het ontwerpproces soepeler en efficiënter verloopt.
Wat zijn Elementor-sjablonen?
Elementor-templates zijn vooraf ontworpen secties die je eenmalig maakt en overal op je WordPress-website kunt hergebruiken. Een template kan een volledige pagina-indeling zijn, een prijstabel, een hero-sectie of elk ander ontwerpblok dat je vaker wilt gebruiken.
Om sjablonen te gebruiken, open je de Elementor-editor en klik je op het mapje-icoon terwijl je een sectie bewerkt. Hiermee open je de sjablonenbibliotheek, waar je kant-en-klare ontwerpen kunt bekijken of een sjabloon kunt laden dat je al hebt opgeslagen. Zodra je een sjabloon hebt opgeslagen, kun je deze met een paar klikken overal op je website hergebruiken.
Heb je moeite met Elementor-shortcodes?
Stroomlijn je workflow en hergebruik content moeiteloos met onze Elementor-services, die ontworpen zijn voor prestaties en flexibiliteit.
De rol van shortcodes in Elementor
Met Elementor-shortcodes kunt u elke opgeslagen template overal op uw site invoegen met slechts één regel code. In plaats van elke keer handmatig een template toe te voegen, kopieert u de shortcode en plakt u deze in een bericht, pagina of widgetgebied.
Nadat je een sjabloon hebt opgeslagen, genereert Elementor automatisch een shortcode ervoor. Je vindt deze in je WordPress-dashboard onder Sjablonen → Opgeslagen sjablonen. Kopieer de shortcode en plak deze op de plek waar je het sjabloon wilt weergeven. Het gedeelte wordt dan precies zo weergegeven als je hebt ontworpen.
Dit is vooral handig bij het beheren van websites met veel pagina's die gemeenschappelijke ontwerpelementen delen, zoals call-to-action banners, contactformulieren of aankondigingssecties.
Hoe maak en gebruik je Elementor-shortcodes voor sjablonen: stap voor stap
Volg deze drie stappen om Elementor-shortcodes in te stellen en te gebruiken op je WordPress-site.
Stap 1: Maak een sjabloon aan of kies er een
Ga in je WordPress-dashboard naar Sjablonen → Opgeslagen sjablonen → Nieuw toevoegen. Ontwerp je sjabloon helemaal zelf of kies er een uit de sjablonenbibliotheek van Elementor. Klik na afloop op Opslaan om het sjabloon op te slaan. Dit is het ontwerp dat je vervolgens op je hele website kunt gebruiken met een shortcode.
Stap 2: Genereer de shortcode voor de sjabloon
Elementor maakt automatisch een shortcode aan voor elke opgeslagen template. Om deze te vinden, ga je naar Templates → Opgeslagen templates. Zoek je template en kopieer de code die in de kolom Shortcode wordt weergegeven. Deze code plak je vervolgens op de plek waar je de template wilt laten verschijnen.
Stap 3: Voeg shortcodes in berichten of pagina's in
Open een bericht, pagina of widgetgebied en plak de shortcode in de WordPress-editor. De shortcode werkt in de klassieke editor, de Gutenberg-blokeditor en widgetgebieden. Je sjabloon wordt precies zo weergegeven als je het hebt ontworpen, waar je het ook plaatst.
Hoe pas ik shortcodes aan in WordPress?
Het aanpassen van Elementor-shortcodes is een uitstekende manier om je WordPress-website af te stemmen op je specifieke behoeften. Zo doe je dat:
Elementor-shortcodes aanpassen
Elementor-shortcodes ondersteunen parameters waarmee je de uitvoer kunt aanpassen. Als je bijvoorbeeld een contactformulier insluit met een shortcode, kun je attributen toevoegen om de lay-out van het formulier, de volgorde van de velden of de actie van het formulier te wijzigen, zonder de template zelf te hoeven bewerken.
Voor complexere content zoals productsliders of videogalerijen kunt u rechtstreeks attributen aan de shortcode toevoegen om te bepalen hoe deze op de pagina wordt weergegeven of zich gedraagt.
Geavanceerde aanpassingsmogelijkheden met aangepaste CSS
Met Elementor Pro kun je aangepaste CSS toepassen om te bepalen hoe de uitvoer van shortcodes er op de pagina uitziet. Zo kun je de afstand, kleuren en lay-out aanpassen of hover-effecten toevoegen aan elementen zoals ingesloten videospelers of galerijen.
Om aangepaste CSS toe te voegen, opent u de site-instellingen van Elementor of gebruikt u het tabblad Geavanceerd → Aangepaste CSS in een willekeurige sectie. Wijzigingen worden alleen toegepast op dat specifieke element en hebben geen invloed op uw thema als geheel.
Hoe gebruik je de shortcode-widget in Elementor?
Met de Elementor shortcode-widget kunt u elke shortcode rechtstreeks in uw pagina-indeling insluiten zonder de HTML te hoeven bewerken. Zo gebruikt u hem.
Hier volgt een korte handleiding voor het gebruik van de shortcode-widget:
- Open je pagina met de Elementor paginabouwer.
- Sleep de shortcode-widget vanuit het Elementor-paneel.
- Plak je shortcode (bijvoorbeeld voor formulieren, video-integraties of dynamische content) in het contentvak van de widget.
- Pas indien nodig het uiterlijk van de widget aan met behulp van de Elementor Pro-instellingen.
Deze aanpak maakt het eenvoudig om dynamische content van externe providers of eigen code te beheren en weer te geven, allemaal binnen de Elementor-editor.
U hoeft de shortcode niet handmatig in de HTML-secties in te voegen; gebruik gewoon de widget om deze overal op uw pagina weer te geven.
Ontdek: De beste methoden om een taalselector toe te voegen aan Elementor
Populaire gebruiksscenario's voor Elementor-shortcodes
Elementor-shortcodes zijn handig in diverse veelvoorkomende WordPress-ontwerpsituaties. Hieronder vind je de meest praktische.
Sjablonen insluiten in blogberichten
Als je een call-to-action-blok of aankondigingsbanner hebt die je in meerdere blogberichten wilt weergeven, kun je de shortcode in elk bericht plakken in plaats van het ontwerp opnieuw op te bouwen. Elke wijziging aan de originele sjabloon wordt automatisch doorgevoerd in elk bericht dat die shortcode gebruikt.
Sjablonen toevoegen aan widgets en zijbalken
Om een opgeslagen sjabloon aan een zijbalk of widgetgebied toe te voegen, ga je naar Weergave → Widgets, voeg je een tekstwidget of een widget met aangepaste HTML toe en plak je je Elementor-shortcode erin. De sjabloon wordt in het widgetgebied weergegeven met dezelfde opmaak als het originele ontwerp.
Dynamische contentblokken met behulp van shortcodes
Elementor-shortcodes zijn perfect voor het maken van dynamische contentblokken die regelmatig moeten worden bijgewerkt.
Als u bijvoorbeeld een terugkerende prijstabel, een uitgelichte klantrecensie of een evenementenlijst hebt, kunt u deze één keer ontwerpen en de shortcode vervolgens invoegen waar nodig.
Wanneer je de sjabloon bijwerkt, worden de wijzigingen automatisch doorgevoerd op alle pagina's die deze shortcode gebruiken. Dit maakt de sjabloon ideaal voor elementen die actueel en relevant moeten blijven.
Tips voor het beheren van meerdere shortcodes in Elementor
Het beheren van veel shortcodes op een grote website kan al snel onoverzichtelijk worden. Deze tips helpen je om georganiseerd te blijven en veelvoorkomende problemen te voorkomen.
Tip 1: Houd uw shortcodes georganiseerd
Het is makkelijk om het overzicht te verliezen van welke shortcode bij welk sjabloon hoort als je niet oplet. Om het overzicht te bewaren, is het belangrijk om je sjablonen duidelijk te labelen wanneer je ze opslaat in Elementor.
Gebruik beschrijvende namen zoals 'Contactformulier - Startpagina' of 'Prijstabel - Dienstenpagina', zodat u snel de juiste shortcode kunt vinden en gebruiken wanneer dat nodig is.
Tip 2: Maak een shortcode-referentielijst
Als je veel shortcodes op verschillende pagina's gebruikt, kan het handig zijn om een eenvoudig document of spreadsheet te maken met een lijst van al je opgeslagen sjablonen en de bijbehorende shortcodes.
Op deze manier kunt u het gemakkelijk raadplegen zonder telkens het Elementor-dashboard te hoeven doorzoeken.
Tip 3: Vermijd het overladen van pagina's met shortcodes
Hoewel Elementor-shortcodes ontzettend handig zijn, is het belangrijk om er niet te veel van te gebruiken. Te veel shortcodes op één pagina kunnen de laadtijd vertragen, vooral als de templates veel designelementen of afbeeldingen bevatten.
Beperk je tot de essentiële elementen en overweeg het gebruik van caching-plugins om de websiteprestaties.
Tip 4: Test shortcodes op verschillende apparaten
Test je Elementor shortcode-templates op verschillende apparaten om er zeker van te zijn dat ze responsief zijn en correct worden weergegeven.
Omdat shortcodes gebruikmaken van vooraf ontworpen sjablonen, is het cruciaal om te controleren of de ontwerpen goed worden weergegeven op mobiele telefoons, tablets en desktops.
Snel oplossingen vinden voor veelvoorkomende problemen met Elementor-shortcodes
Hoewel Elementor-shortcodes doorgaans een soepele en efficiënte manier zijn om sjablonen te hergebruiken, gaan er soms dingen mis. Hieronder vind je een aantal veelvoorkomende problemen en snelle oplossingen om je te helpen bij het oplossen ervan.
De shortcode wordt niet correct weergegeven
Een van de meest voorkomende problemen waar gebruikers tegenaan lopen, is wanneer een shortcode de template niet correct weergeeft. Als uw template-shortcode niet goed wordt weergegeven aan de voorkant van de website, kunt u de volgende stappen controleren:
- Cache wissen: cache- plugins of de browsercache ervoor zorgen dat de shortcode geen updates weergeeft. Probeer zowel de WordPress-cache als de browsercache te wissen om te zien of dat het probleem oplost.
- Controleer de sjabloonstatus: Zorg ervoor dat de sjabloon die u wilt weergeven is opgeslagen en gepubliceerd. Als deze in conceptmodus staat, wordt deze niet weergegeven op de website.
- Conflicterende plugins uitschakelen: Soms kunnen andere plugins de functionaliteit van Elementor verstoren. Probeer uw andere plugins één voor één uit te schakelen om eventuele conflicten te identificeren die ervoor kunnen zorgen dat de shortcode niet wordt weergegeven.
Gerelateerd: Probleem met geanimeerde koptekst in Elementor oplossen
Conflicten in sjabloonstijl
Soms kunnen er stijlconflicten ontstaan tussen je Elementor-sjabloon en je WordPress-thema, waardoor elementen er vreemd uitzien of zich onvoorspelbaar gedragen. Zo los je dat op:
- Schakel over naar Elementor-compatibele thema's: Zorg ervoor dat u een thema gebruikt dat volledig compatibel is met Elementor, zoals Hello Theme, dat is ontworpen om naadloos met Elementor samen te werken.
- Thema-instellingen overschrijven: Als de CSS van je thema de stijlen van Elementor overschrijft, probeer dan de functie ' Aangepaste CSS ' van Elementor te gebruiken om de stijlen handmatig aan te passen of voeg je eigen aangepaste CSS toe om het conflict op te lossen.
- Globale kleuren en lettertypen: Elementor heeft eigen globale instellingen voor lettertypen en kleuren . Zorg ervoor dat u deze correct configureert onder Site-instellingen, zodat ze niet conflicteren met de instellingen van uw thema.
Door deze veelvoorkomende problemen direct aan te pakken, kunt u ervoor zorgen dat uw Elementor-shortcodes probleemloos werken op uw hele website, waardoor uw ontwerp consistent en functioneel blijft!
Conclusie: Beheers de Elementor-shortcodes voor moeiteloos ontwerpen
Elementor-shortcodes zijn een krachtig hulpmiddel dat je webdesignproces kan vereenvoudigen en stroomlijnen. Zodra je het maken en beheren ervan onder de knie hebt, kun je je beste sjablonen snel en eenvoudig hergebruiken op je hele website.
Of het nu gaat om het integreren van ontwerpen in berichten, het verbeteren van widgets of het beheren van dynamische content, shortcodes bieden ongelooflijke flexibiliteit en efficiëntie. Door ze onder de knie te krijgen, bespaar je tijd, behoud je consistentie in je ontwerpen en houd je je workflow soepel en georganiseerd.
Nu is het tijd om aan de slag te gaan en Elementor-shortcodes te gebruiken om je websiteontwerp naar een hoger niveau te tillen!
Veelgestelde vragen over het instellen van Elementor-shortcodes
Wat zijn aangepaste shortcodes in Elementor?
Aangepaste shortcodes in Elementor zijn kleine stukjes code tussen vierkante haakjes die je in elk bericht, elke pagina of widget kunt plakken om een opgeslagen sjabloon of dynamische inhoud weer te geven. Je kunt ze maken via het gedeelte 'Opgeslagen sjablonen' van Elementor of door een aangepaste shortcode in PHP te registreren.
Hoe gebruik ik een shortcode-blok in WordPress?
In Gutenberg klik je op de + knop om een nieuw blok toe te voegen, zoek je naar 'Shortcode' en plak je je code in het blok. In de Klassieke Editor schakel je over naar de Tekstmodus en plak je de shortcode waar je hem wilt hebben. In Elementor gebruik je de Shortcode-widget in het paneel en plak je de code in het inhoudsveld.
Kan ik shortcodes gebruiken met de gratis versie van Elementor?
Ja. De gratis versie van Elementor biedt volledige ondersteuning voor shortcodes. Je kunt opgeslagen sjablonen maken en shortcodes ervoor genereren zonder te upgraden naar Elementor Pro. Pro is alleen nodig als je dynamische content, aangepaste CSS-besturingselementen of geavanceerde globale widgetfuncties wilt gebruiken.
Hoe maken ontwikkelaars aangepaste shortcodes met PHP?
Ontwikkelaars maken aangepaste shortcodes door een PHP-functie te schrijven en deze te registreren met de `add_shortcode()` -functie in WordPress. Bijvoorbeeld: `add_shortcode( 'my_shortcode', 'my_shortcode_function' );` Hiermee wordt `[my_shortcode]` als een bruikbare shortcode die overal op de site gebruikt kan worden. De functie retourneert de HTML die je wilt weergeven.
Waarom werkt mijn shortcode niet correct?
De meest voorkomende oorzaken zijn een ontbrekende sluitende haak, de template die in conceptmodus staat, een caching-plugin die een oude versie van de pagina weergeeft, of een pluginconflict met Elementor. Wis eerst je cache en controleer vervolgens of de template is gepubliceerd. Als de shortcode nog steeds niet werkt, deactiveer dan één voor één andere plugins om de conflicterende plugin te identificeren.
