Elementor is een populaire page builder voor WordPress waarmee je met een drag-and-drop-systeem pagina’s vormgeeft. In deze handleiding lees je stap-voor-stap hoe je een horizontale lijn toevoegt binnen een pagina die je met Elementor bewerkt, en krijg je daarbij praktische tips voor design en lay-out.
1. Een nieuwe pagina aanmaken en openen met Elementor
Een pagina aanmaken doe je via het dashboard: voeg een titel toe, publiceer de pagina en open deze met "Edit with Elementor". Wanneer je een nieuwe pagina wilt maken, ga je eerst naar het dashboard toe. Klik boven op 'Nieuwe pagina'. Nu voeg je als eerste de titel van de pagina toe, en klikt vervolgens op de blauwe knop 'Publiceren' (rechtsboven). Je komt nu op de pagina terecht in de Elementor page-builder.
Wanneer je de pagina in het menu wilt tonen, zul je weer eerst naar het dashboard moeten gaan. In het linkermenu ga je via 'Weergave' naar 'Menu's'. Selecteer de pagina die je wilt toevoegen, druk op 'Aan menu toevoegen', en vervolgens op 'Menu opslaan'. Als je een al bestaande pagina wilt bewerken, ga je eerst naar de pagina toe die je wilt bewerken. Zorg ervoor dat je bent ingelogd als beheerder. In de bovenste zwarte balk, staat 'Edit with Elementor'.
2. Structuur van een Elementor-pagina
Een pagina die in Elementor is gemaakt, bestaat uit secties, kolommen en widgets. In iedere kolom kun je een widget plaatsen. Zo is een tekstvlak, formulier of afbeelding een widget. Om een sectie tussen andere secties toe te voegen, houd je je muis op de sectie waarboven je een nieuwe sectie wilt toevoegen. Boven deze sectie verschijnt een klein blauw balkje. Wanneer je een sectie aan de boven- en onderkant ruimte wilt geven, klik je op de witte bolletjes in het blauwe balkje van de widget. Ga vervolgens naar 'Advanced'. Wil je dat de onder- en bovenkant niet evenveel ruimte hebben? Door op het donkerrode plusje te drukken, krijg je de mogelijkheid om kolommen toe te voegen. Je kunt er ook voor kiezen om Elementor-blokken toe te voegen. Dit zijn vooraf ontworpen secties en templates die je eenvoudig kunt bewerken. Druk hiervoor niet op het donkerrode rondje, maar op het grijze rondje.
Introductie van de horizontale lijn (scheiding)
Een horizontale lijn kun je toevoegen als scheiding tussen twee onderwerpen of secties. Dit kan via de "Scheidings"-widget, of door een vorm als scheiding in te stellen onder de stijlen van een sectie of kolom. In de handleiding zie je dat er meerdere manieren bestaan om scheidingen en lijnen te realiseren, afhankelijk van de gewenste stijl en positie.
3. Een horizontale lijn toevoegen met de scheiding-widget
Zoek de widget-sectie aan de linkerkant van het Elementor-scherm. Sleep de widget scheiding (of "Divider") naar de gewenste kolom onder of naast de inhoud. Pas daarna de eigenschappen aan in het linkerpaneel::
- Stijl: kies lineair, metaal, puntjes of een andere stijl.
- Kleur: kies een kleur die past bij de pagina.
- Dikte: stel de breedte van de lijn in (bijv. 2px, 3px).
- Uitlijning: centreer of laat uitlijnen naar links/rechts afhankelijk van de inhoud.
- Margin/Padding: voeg eventueel extra witruimte boven en onder de lijn toe voor betere scheiding.
Tip: gebruik margin en padding om de lijn precies te plaatsen tussen andere elementen. Margin bepaalt de ruimte buiten de lijn, padding de ruimte eromheen binnen de lijntoetsing.
4. Een horizontale lijn met een sectie-achtergrond als scheiding
Een alternatieve methode is een sectie te gebruiken met een eenvoudige achtergrond en een korte hoogte die als lijn functioneert. Maak een nieuwe sectie aan tussen twee bestaande secties. Stel de hoogte van de sectie in op een kleine waarde (bijv. min-height 20-40 px) en laat de achtergrondkleur dezelfde toon hebben als je pagina, of kies een contrasterende kleur voor meer zichtbaar effect. Je kunt de rand verwijderen en de sectie centreren zodat deze dienst doet als subtiele scheiding.
5. Aanpassen van tekst- en sectieopmaak rondom de lijn
Na het toevoegen van de horizontale lijn kun je de omgeving naar wens aanpassen:
- Tekst en koppen: pas in Inhoud en Stijl de kleur en typografie aan zodat ze goed aansluiten bij de lijn.
- Kolomstructuur: als de lijn tussen twee kolommen moet komen, plaats de lijn in de juiste kolom of gebruik een layer-divider in de sectie tussen de kolommen.
- Achtergrond en vorm: voor extra stijl kun je achtergrondkleur of -afbeelding toevoegen aan de sectie waarin de lijn staat.
6. Responsiviteit en zichtbaarheid op verschillende apparaten
Zorg ervoor dat de horizontale lijn er op desktop, tablet en mobiel goed uitziet. Gebruik de responsive instellingen onder de mobiele/tablet-weergave om de positie en lengte van de lijn aan te passen. Elementor biedt een desktop/tablet/mobile-weergave die je per element kunt aanpassen.
7. Voorbeeldutsplitsing met templates en widgets
Elementor biedt templates en voorgebouwde secties die je snel kunt invoegen en daarna aanpassen. Als je een horizontale lijn wilt gebruiken tussen secties, kun je een template kiezen waarin een scheiding al is ingebouwd of je creëert een eigen lijn in een lege sectie. De combinatie van secties, kolommen en widgets laat je toe om de lijn naadloos in je ontwerp te integreren.
8. Praktische tips voor een nette scheiding
- Gebruik een subtiele kleur voor minder afleidende scheidingen.
- Houd consistentie in lijnstijl door de hele pagina.
- Let op de afstand tot aangrenzende elementen (margin/padding).
- Controleer de lijn in de weergave voor mobiel en tablet en pas aan waar nodig.
