Les 2 van 5
Les 2: Secties, achtergronden en lay-out
De sectie is het fundament van elke Elementor-pagina. In deze les leer je secties professioneel inrichten: achtergronden, breedtes, afstanden en de kolom-verdeling.
Een sectie toevoegen
Klik op het blauwe plus-icoon op het canvas om een nieuwe sectie toe te voegen. Kies de kolom-indeling: één kolom, twee gelijke kolommen, 30/70, 70/30 of drie kolommen. Je kunt dit later altijd aanpassen door op de sectie te klikken en de kolombreedtes te slepen.
Sectie-instellingen: Layout tabblad
- Breedte van de inhoud: “Boxed” (begrensd tot een maximale breedte, bijv. 1200px) of “Volledig scherm” (edge-to-edge). Gebruik Volledig scherm voor hero-secties met achtergrondafbeeldingen, Boxed voor tekstsecties.
- Breedte van de kolommen: De inhoudsbreedte in pixels. Standaard 1200px is een goede basis voor de meeste sites.
- Hoogte: Standaard (past bij inhoud), Minimale hoogte (stel een minimum in), Of schermhoogte (100vh β voor fullscreen hero’s)
- Kolommen positie: Bovenaan, midden of onderaan uitlijnen
Sectie-instellingen: Stijl tabblad
- Achtergrondtype: Kleur, Verloop, Afbeelding of Video
- Achtergrondafbeelding: Kies uit je mediabibliotheek. Stel “Parallax” in voor een diepte-effect als de bezoeker scrolt.
- Achtergrondoverlay: Een gekleurde laag over de achtergrondafbeelding. Handig om tekst leesbaar te houden op foto’s β gebruik bijv. een donkerblauw overlay met 60% dekking.
- Rand: Voeg een rand toe met kleur, breedte en border-radius
- Schaduw: Voeg een box-shadow toe
Padding en margin
Padding is de ruimte bΓnnen de sectie (tussen de rand en de inhoud). Margin is de ruimte bΓΊiten de sectie (tussen secties onderling). Je stelt deze in via het “Geavanceerd” tabblad van de sectie.
Tip: gebruik consistente padding-waarden voor alle secties β bijv. altijd 80px boven en onder voor desktop. Dat geeft rust en ritme aan je pagina.
Opdracht
Bouw een pagina met drie secties: een hero met achtergrondafbeelding en donkere overlay, een tekstsectie met Boxed breedte en 80px padding, en een CTA-sectie met een gekleurde achtergrond en een knop in het midden.