Inleiding
Met Elementor kunt u eenvoudig Google Maps en YouTube-video’s integreren in uw website. Dit is ideaal voor contactpagina’s, sfeerimpressies, handleidingen, portfolio-items en productpresentaties. In deze handleiding leest u stap voor stap hoe u beide kunt toevoegen en aanpassen.
1. Google Maps toevoegen met Elementor
Stappen:
- Open de pagina in Bewerken met Elementor.
- Zoek in de widgetlijst naar Google Maps.
- Sleep de widget naar de gewenste plek op uw pagina.
Instellingen:
- Adres: Vul uw adres in, bijvoorbeeld: “Dorpsstraat 50, De Goorn”.
- Zoomniveau: Hoe ver ingezoomd de kaart moet beginnen.
- Kaarttype: Roadmap, Satellite of Hybrid.
- Hoogte: Stel de hoogte in (bijv. 300px).
Styling:
- Klik op Stijl tab.
- Pas randen, zoomcontrols en filters aan.
- Voeg eventueel een overlay-kleur toe voor merkstijl.
2. Embed-code gebruiken (Google Maps Embed)
Sommige websites gebruiken liever een directe embed van Google Maps omdat dit lichtgewicht is.
Stappen:
- Ga naar Google Maps.
- Zoek uw bedrijf.
- Klik op Delen.
- Klik op Kaart insluiten.
- Kopieer de iframe-code.
- Ga in Elementor naar HTML-widget.
- Plak de code daar.
Voordelen:
- Lichter en sneller dan de standaard Elementor widget
- Beter compatibel met caching
- Werkt zonder API-sleutel
3. YouTube video toevoegen met Elementor
Stappen:
- Open uw pagina in Elementor.
- Zoek de widget Video.
- Sleep deze naar de gewenste sectie.
- Plak de gewenste YouTube URL in het veld Link.
Voorbeelden van ondersteunde YouTube links:
- https://www.youtube.com/watch?v=xxxxxxx
- https://youtu.be/xxxxxxx
4. Video instellingen aanpassen
Basisinstellingen:
- Starttijd instellen in seconden.
- Autoplay (let op: werkt niet altijd mobiel).
- Mute (verplicht voor autoplay).
- Loop.
- Relatieve video's uitschakelen (aanbevolen).
Stijl-instellingen:
- Randradius (afgeronde hoeken).
- Schaduw (box-shadow).
- Overlays (bijvoorbeeld een kleurfilter).
- Afbeelding vooraf laten tonen met play-button.
5. YouTube embed-code via iFrame (alternatief)
Stappen:
- Open de video op YouTube.
- Klik op Delen.
- Kies Insluiten.
- Kopieer de iframe-code.
- Plaats deze in een HTML-widget in Elementor.
Voordelen:
- Zeer stabiel
- U kunt extra parameters toevoegen, zoals:
?start=10?mute=1?controls=0
6. Meerdere video's in een galerij (YouTube playlist)
Stappen:
- Maak een YouTube-speellijst aan.
- Kopieer de link.
- Plaats deze in de Video-widget van Elementor.
Elementor toont automatisch de playlist in de weergave.
7. Veelvoorkomende problemen en oplossingen
Google Maps toont grijs vlak
- Er is een verkeerde API-sleutel ingesteld.
- Het domein is niet toegevoegd aan Google Cloud Console.
- Kaartwidget is geblokkeerd door cookieplugin (GDPR).
Video autoplay werkt niet
- Browsers blokkeren autoplay met geluid → zet Mute aan.
- iPhone ondersteunt autoplay niet altijd volledig.
Video toont gerelateerde video's na afloop
- Zet Relatieve video's uitschakelen aan (Elementor setting).
- Of gebruik de iFrame-code:
?rel=0
Kaart is traag
- Gebruik de HTML-embed i.p.v. de Elementor Maps widget.
Kort samengevat
- Google Maps kan via een widget of met embed-code worden toegevoegd.
- YouTube-video’s kunt u invoegen via Elementor Video-widget of iFrame.
- Autoplay werkt alleen bij gedempte video's.
- Embed-code is het meest stabiele alternatief voor beide functies.
- Gebruik overlays en borders voor een mooie stijlafwerking.
Hulp nodig?
We reageren meestal binnen 24–48 uur. Uw oplossing is maar één berichtje van u vandaan.
Geen tijd of zin om het zelf te doen?
Met een onderhoudspakket regelen wij updates, back-ups en kleine aanpassingen voor u. Of loopt u ergens op vast? Dan helpen we u direct verder.