4 februari 2026
3D-modellen toevoegen aan je WordPress website
Klanten willen producten van alle kanten bekijken voordat ze kopen. Foto's zijn prima, maar 3D is beter. In deze handleiding laten we je zien hoe je interactieve 3D-viewers toevoegt aan je WordPress website. Of je nu Gutenberg, Elementor, Divi of WPBakery gebruikt: je leert precies hoe je 3D-modellen embedt waarmee klanten kunnen draaien, inzoomen en je producten van alle kanten bekijken.
Waarom een 3D-viewer op WordPress?
Online shoppers zijn veranderd. Platte foto's zijn niet meer genoeg om een product te beoordelen. Ze willen draaien, inzoomen en ontdekken. Een 3D-viewer geeft ze die ervaring en helpt ze precies te begrijpen wat ze kopen.
Denk aan de laatste keer dat je meubels online kocht. Vroeg je je af of de kleur bij je kamer paste? Twijfelde je over de afmetingen? Kon je de afwerking niet goed inschatten? Die twijfels kosten webshops jaarlijks miljarden aan gemiste verkopen en retouren. 3D-viewers nemen die onzekerheid weg.
Onderzoek toont aan dat 61% van de klanten eerder koopt bij merken die interactieve 3D-technologie gebruiken. Als klanten elk detail en elke hoek kunnen zien, voelen ze zich zeker over hun aankoop. Ze weten precies wat er wordt geleverd.
De cijfers spreken voor zich: websites met 3D-productviewers zien 44% meer producten in de winkelwagen en 21% langere sessietijd. Klanten die met 3D interacteren blijven langer op je site, bekijken meer producten en kopen vaker. Dit is geen marginale verbetering, maar een fundamentele verschuiving in hoe klanten met je producten omgaan.
Voor WordPress-gebruikers was 3D toevoegen altijd ingewikkeld. Je had developers nodig, custom code en dure hosting. Dat is niet meer zo. Moderne tools maken het mogelijk om binnen minuten een professionele 3D-viewer toe te voegen aan elke WordPress site.
Wat heb je nodig om te beginnen
3D toevoegen aan WordPress is simpeler dan je denkt. Je hebt maar twee dingen nodig:
- Een 3D-model in GLB-formaat (het standaard bestandsformaat voor 3D op het web)
- Een WordPress website (elk theme werkt, elke hostingprovider)
GLB is de binaire versie van glTF, wat staat voor Graphics Language Transmission Format. Het is de industriestandaard voor 3D op het web omdat het snel laadt, consistent werkt op alle apparaten en alle textures en materialen in één bestand bevat. De meeste 3D-software kan exporteren naar GLB, waaronder Blender, SketchUp en professionele CAD-tools.
Waar haal je een 3D-model vandaan? Er zijn verschillende opties, afhankelijk van je budget en wensen. Je kunt een custom model laten maken door een 3D-designer of bureau. Dat kost meestal €200-€500 voor simpele producten en meer voor complexe items. Je kunt ook bestaande modellen downloaden van marktplaatsen zoals CGTrader, Sketchfab of TurboSquid, al matchen die zelden precies met jouw producten.
Wij bieden een 3D-modelleringsservice vanaf €50 per model, speciaal voor e-commerce producten. We werken vanuit je productfoto's om accurate 3D-representaties te maken die je producten precies tonen zoals ze zijn. Bekijk Portal voor meer informatie over het omzetten van je producten naar 3D.
De kwaliteit van je 3D-model heeft directe impact op de klantervaring. Een slecht gemaakt model met verkeerde proporties of ontbrekende details kan je merk meer schaden dan geen 3D. Let bij het aanschaffen of laten maken van modellen op accurate geometrie, goede textures en realistische materialen.
De uitdaging van zelf hosten
Je vraagt je misschien af: waarom niet gewoon het GLB-bestand uploaden naar mijn WordPress mediabibliotheek en het zelf embedden? Technisch kan dat, maar er zijn behoorlijk wat uitdagingen die het voor de meeste WordPress-gebruikers onpraktisch maken.
- Serverconfiguratie: je server heeft correcte CORS headers nodig, juiste MIME types voor GLB-bestanden en voldoende geheugenlimieten. De meeste shared WordPress hosting is niet geconfigureerd voor grote 3D-bestanden.
- Performance: 3D-bestanden zijn groot, vaak meerdere megabytes. Zonder een goed CDN (Content Delivery Network) laden je modellen traag voor bezoekers in andere regio's. Dat leidt tot gefrustreerde klanten die vertrekken voordat de 3D überhaupt verschijnt.
- Mobiele compatibiliteit: niet alle 3D rendering-aanpakken werken betrouwbaar op alle apparaten en browsers. iOS, Android, Chrome, Safari en Firefox hebben allemaal net iets andere WebGL-implementaties. Wat werkt op je laptop kan falen op de telefoon van je klant.
- Geen inzichten: als je 3D zelf host, weet je niet hoeveel mensen je modellen daadwerkelijk bekijken. Je kunt niet zien welke producten de meeste 3D-interactie krijgen of welke hoeken klanten het vaakst bekijken.
- Onderhoudslast: browsers updaten, WebGL evolueert, apparaten veranderen. Zelfgehoste 3D-oplossingen vereisen doorlopend technisch onderhoud om ze werkend te houden.
Deze uitdagingen verklaren waarom de meeste WordPress-gebruikers die zelf 3D proberen te implementeren gefrustreerd raken. De initiële setup werkt misschien, maar een betrouwbare 3D-viewer onderhouden voor alle apparaten en browsers wordt een constante hoofdpijn.
Voor de meeste webshop-eigenaren is een hosted oplossing veel praktischer. Je uploadt je model naar een service die ontworpen is voor 3D-hosting, krijgt een embed code en het werkt gewoon. De hostingprovider handelt alle technische complexiteit af terwijl jij je richt op verkopen.
Portal: 3D-hosting simpel gemaakt
Portal is ons selfservice platform voor het hosten van 3D-modellen. Je uploadt je model, wij hosten het op snelle servers wereldwijd en je krijgt een embed code die overal werkt. Geen technische setup, geen servers configureren, geen compatibiliteitsproblemen.
Zie het als YouTube voor 3D. Wij handelen de techniek af, jij je richt op je producten.
Wat Portal biedt
Portal neemt alle technische complexiteit uit handen: hosting, rendering, apparaatcompatibiliteit. Dit krijg je:
Snelle wereldwijde hosting
Je modellen laden snel voor bezoekers waar ook ter wereld. Ons CDN serveert je 3D-content vanaf edge locaties dicht bij je klanten, wat zorgt voor snelle laadtijden of ze nu in Amsterdam, New York of Sydney zijn. Snelle laadtijd gaat niet alleen over gebruikerservaring; het heeft directe impact op of klanten wachten op je 3D-viewer of vertrekken naar een concurrent.
Één regel embed code
Kopieer één regel code en plak het in elke page builder. Werkt met Gutenberg, Elementor, Divi, WPBakery, Beaver Builder en elk platform dat custom HTML ondersteunt. De embed code is standaard responsive en past zich automatisch aan naar elke containergrootte. Geen CSS-aanpassingen nodig.
Bekijk statistieken
Zie hoeveel mensen je 3D-modellen bekijken, welke modellen het populairst zijn en volg trends over tijd. Anders dan bij zelfgehoste oplossingen waar je in het duister tast, geeft Portal je inzicht in hoe klanten met je 3D-content omgaan. Je weet welke producten het meest profiteren van 3D en kunt datagedreven beslissingen nemen over je productpresentatie.
AR inbegrepen
Augmented reality is automatisch inbegrepen bij elk model dat je host. Klanten die je producten op mobiele apparaten bekijken kunnen op een knop tikken om je product thuis te plaatsen via hun smartphone camera. Deze functie alleen al kan koopvertrouwen aanzienlijk verhogen, vooral voor meubels, decoratie en grotere items waar maat en pasvorm belangrijk zijn.
Hoe voeg je 3D toe aan WordPress
3D toevoegen aan je WordPress site kost maar vier stappen. Het hele proces kan binnen vijf minuten voltooid zijn zodra je je 3D-model klaar hebt.
Maak een Portal account
Meld je aan op portal.virtualdisplay.io. Registratie duurt minder dan een minuut en vereist geen creditcard. Je kunt direct je eerste model uploaden om te zien hoe het eruitziet voordat je een abonnement kiest.
Maak een Portal accountUpload je model
Sleep je GLB-bestand naar het uploadgebied. Portal verwerkt je model automatisch, optimaliseert het voor weblevering en bereidt het voor op weergave op alle apparaten. Je kunt het model bekijken voordat je publiceert om te controleren of het er precies goed uitziet.
Kopieer de embed code
Klik op de embed-knop op de pagina van je model en kopieer het codefragment. De embed code is één regel HTML die browsers vertelt waar de 3D-viewer geladen moet worden en welk model getoond moet worden. Je kunt opties zoals de initiële camerapositie aanpassen voordat je kopieert.
Plak in WordPress
Open je WordPress pagina of product in de editor en voeg de embed code toe via je page builder. Gedetailleerde instructies voor elke grote page builder volgen hieronder. Zodra je opslaat is je 3D-viewer live en kunnen bezoekers beginnen met interacteren met je product.
WordPress page builder instructies
De embed code werkt met vrijwel elke page builder die custom HTML ondersteunt. Hier zie je hoe je je 3D-viewer toevoegt in de populairste WordPress page builders.
Gutenberg (Block Editor)
Klik in je pagina- of post-editor op de + knop om een nieuw block toe te voegen. Zoek naar "Aangepaste HTML" en selecteer het. Dit block accepteert ruwe HTML-code, precies wat we nodig hebben voor de 3D-embed.
Plak de embed code van Portal direct in het HTML block. Je ziet de ruwe code in bewerkingsmodus, dat is normaal. Maak je geen zorgen over hoe de code eruitziet; het wordt een goede 3D-viewer wanneer bezoekers de pagina zien.
Klik op "Voorbeeld" rechtsboven om je 3D-viewer in actie te zien. Controleer of de viewer correct laadt en of je het model kunt draaien en inzoomen. Als alles er goed uitziet, publiceer je pagina.
Elementor
Bewerk je pagina met Elementor en vind de sectie waar je de 3D-viewer wilt hebben. Zoek in het widget-paneel links naar "HTML" en sleep de HTML widget naar de gewenste locatie.
Plak in de HTML widget-instellingen in het linkerpaneel de embed code in het "HTML Code" tekstveld. De widget toont de code aanvankelijk als tekst in de editor.
Gebruik Elementor's responsive preview-modi (desktop, tablet, mobiel) om te controleren of de viewer er goed uitziet op alle schermformaten. De embed code is responsive, maar je wilt misschien de sectie padding of kolombreedte aanpassen voor optimale presentatie.
Divi Builder
Open je pagina in de Divi Builder en navigeer naar de sectie waar je je 3D-viewer wilt. Voeg een nieuwe rij in (enkele kolom werkt het beste voor 3D-viewers), klik dan om een nieuwe module toe te voegen.
Zoek en selecteer de "Code" module. Plak in de module-instellingen de embed code in het "Content" tekstveld. Sla de module-instellingen op.
Voor de beste visuele impact gebruik je een rij over de volledige breedte zodat de 3D-viewer ruimte heeft. Overweeg wat padding boven en onder de viewer toe te voegen om het te scheiden van andere content. Bekijk je pagina om te bevestigen dat de viewer correct laadt.
WPBakery Page Builder
Bewerk je pagina met WPBakery en klik op "Element toevoegen" waar je de 3D-viewer wilt. Zoek naar "Raw HTML" of "Text Block" met HTML-modus en voeg het toe aan je pagina.
Plak de embed code in het HTML content gebied en sla op. WPBakery toont een placeholder in de editor. Bekijk de pagina in een nieuw tabblad om de daadwerkelijke 3D-viewer te zien.
Andere page builders
De embed code werkt met elke page builder die HTML accepteert. Zoek naar opties zoals "Custom HTML", "HTML Block", "Raw HTML", "Code Module" of vergelijkbaar. Als je HTML code kunt plakken, werkt de 3D-embed.
Tips voor de beste 3D-kijkervaring
- Houd de bestandsgrootte van je model onder 10MB voor snelle laadtijden. Grotere bestanden werken maar laden trager, wat ongeduldige bezoekers kan kosten. Als je model te groot is, vraag je 3D-designer om het te optimaliseren door het polygonenaantal te verlagen of textures te comprimeren.
- De viewer past zich automatisch aan elke containerbreedte aan, dus werkt op alle schermformaten. Maar 3D-viewers werken het beste met wat ademruimte. Prop ze niet in smalle kolommen waar klanten niet comfortabel kunnen draaien en inzoomen.
- Test altijd op mobiele apparaten voordat je live gaat. De meeste online shoppers browsen op telefoons, dus de mobiele ervaring is belangrijker dan desktop. Controleer of touchbediening soepel werkt en of het model duidelijk zichtbaar is op kleinere schermen.
- Plaats de 3D-viewer bovenaan productpagina's, in het gebied dat bezoekers zien zonder te scrollen. Als klanten naar beneden moeten scrollen om je 3D-viewer te vinden, ontdekken velen hem niet. Positioneer hem prominent waar hij direct de aandacht kan trekken en je product kan demonstreren.
Bouw je WordPress sites voor klanten?
Als je een webbureau of freelance developer bent, kan 3D een krachtige onderscheidende factor zijn voor je klantprojecten. Meubelwinkels, productfabrikanten, interieurontwerpers: ze profiteren allemaal van interactieve 3D, maar weinig bureaus bieden het aan.
Wij bieden white-label oplossingen voor bureaus. Je kunt onze 3D-viewers embedden in klantprojecten onder je eigen merk. Jouw klanten presenteren hun producten mooier, vertellen hun verhaal beter en zien hun webshop tot leven komen. Blije klanten voor jou en een nieuwe inkomstenbron erbij.
Begin vandaag
3D-viewers toevoegen aan WordPress is nu makkelijker dan ooit. Upload je model naar Portal, plak de embed code in je page builder en je bent live. Geen programmeerkennis nodig, geen serverconfiguratie, geen doorlopend technisch onderhoud. Je 3D-viewer werkt automatisch op alle apparaten en browsers. Probeer het met je eerste model en ontdek het verschil dat 3D maakt voor je klantbetrokkenheid.
Klaar om 3D toe te voegen aan je WordPress site?
Upload je eerste model en krijg binnen minuten een embed code.