Les 1 van 5

Les 1: Interface en de belangrijkste widgets

Elementor gratis is beschikbaar in de WordPress plugin-bibliotheek. Na installatie en activatie verschijnt er een “Bewerken met Elementor”-knop op elke pagina. Klik daarop om de Elementor-editor te openen.

De interface

De editor bestaat uit twee delen:

  • Linkerpaneel: widgets, elementen en instellingen
  • Canvas (rechts): een live preview van je pagina zoals die eruitziet voor bezoekers

Bovenaan het linkerpaneel staan de meest gebruikte knoppen: terug naar het widgetpaneel, navigator (overzicht van alle elementen), geschiedenis (ongedaan maken), en het responsieve modus-switcher.

De structuur: secties, kolommen en widgets

Elementor werkt in drie lagen:

  1. Sectie — de buitenste container. Bepaalt de breedte (volledig scherm of beperkt) en de achtergrond
  2. Kolom — binnen een sectie verdeel je de breedte in kolommen (bijv. 50/50 of 33/33/33)
  3. Widget — het eigenlijke element: tekst, afbeelding, knop, video, enzovoort

De meest gebruikte widgets

  • Kop (Heading) — H1 t/m H6, pas lettertype, maat en kleur aan
  • Teksteditor — voor lopende tekst, ondersteunt basis opmaak
  • Afbeelding — met uitlijning, randstijl en link-optie
  • Knop (Button) — volledig aan te passen: tekst, kleur, rand, hover-effect
  • Afbeeldingscarrousel — scrollende afbeeldingenreeks
  • Icoon — kies uit honderden iconen
  • Ruimte (Spacer) — voeg verticale witruimte toe
  • Scheidingslijn (Divider) — horizontale lijn
  • Video — YouTube, Vimeo of eigen video
  • Google Maps — ingebedde kaart

Widget instellingen: de drie tabbladen

Klik op een widget om hem te selecteren. In het linkerpaneel verschijnen drie tabbladen:

  • Inhoud: de daadwerkelijke content — tekst, afbeelding, URL
  • Stijl: kleuren, lettertypen, marges, randen
  • Geavanceerd: animaties, CSS-klassen, responsive zichtbaarheid

Opdracht

Open een lege pagina met Elementor. Maak een eenvoudige hero-sectie: volle breedte, donkere achtergrondkleur, twee kolommen — links een koptekst met subkop en een knop, rechts een afbeelding. Sla op en bekijk het resultaat.