Het ontwerpen van websites leidt vaak tot vragen over de visuele scheiding van inhoud. Hier komt de scheidingslijn in het spel, een eenvoudig maar effectief element in Elementor voor WordPress. In deze handleiding leer je hoe je met de scheidingslijn het uiterlijk van je website kunt verbeteren.
Belangrijkste inzichten
De scheidingslijn kan niet alleen dienen als eenvoudig grafisch element, maar ook zeer veelzijdig worden aangepast in ontwerp en positionering. Met eenvoudige aanpassingen kun je aantrekkelijke scheidingen creëren tussen verschillende inhoudsblokken, wat de leesbaarheid en het algehele ontwerp van je website verbetert.
Stap-voor-stap handleiding
De scheidingslijn toevoegen
Om de scheidingslijn in je ontwerp toe te voegen, sleep je eenvoudig het juiste element uit de Elementor-bibliotheek naar je werkruimte. Er verschijnt een fijne doorgetrokken lijn die de visuele scheiding tussen verschillende secties van je website creëert.

Opties voor aanpassing
De scheidingslijn biedt verschillende aanpassingsmogelijkheden. Je kunt verschillende stijlen kiezen, zoals een doorgetrokken lijn, een stippellijn of creatieve ontwerpen zoals zigzaglijnen, rechthoeken en meer.

Als je de breedte van de scheidingslijn wilt aanpassen, kun je dat ook doen. Zoom gewoon iets uit en stel de breedte in op de gewenste waarde. Bijvoorbeeld, je kunt de breedte op 50% zetten om deze gecentreerd in het midden weer te geven.

Toevoegen van tekst
Om de scheidingslijn niet zo eenvoudig te laten zijn, kun je een tekstelement toevoegen. Kies eenvoudig het tekstelement en sleep het onder of boven de scheidingslijn. Je kunt de tekst formatteren in HTML-tags om een kop of de stijl te beïnvloeden.
Iconen aanpassen
Je kunt ook iconen gebruiken in plaats van tekst. Elementor biedt een uitgebreide bibliotheek met iconen. Kies een passend pictogram dat je boodschap ondersteunt. Bijvoorbeeld een raket voor iets nieuws of geavanceerds.
Stijl en kleuren aanpassen
Je kunt de stijl van de scheidingslijn individueel aanpassen. Onder het tabblad "Stijl" kun je kleuren, grootte en marges definiëren. Bovendien kun je globale kleuren gebruiken om een uniform kleurenschema op je website te behouden.
Als de grootte van de scheidingslijn niet past, kun je deze eenvoudig aanpassen. Een goede manier is om de hoogte van boven en onderaan aan te passen om de afstand naar behoefte te wijzigen.
Onzichtbare scheidingslijnen
Voor subtielere scheidingen kun je ook een onzichtbare scheidingslijn maken. Dit is eenvoudig te realiseren door de kleur van de scheidingslijn op wit te zetten, zodat deze nauwelijks opvalt maar wel de gewenste ruimte creëert.
Opslaan en voorbeeld bekijken
Nadat je alle gewenste aanpassingen hebt gedaan, is het belangrijk om je wijzigingen op te slaan. Klik op de knop "Opslaan" en bekijk het resultaat in de voorvertoning. Zo krijg je een gevoel hoe de scheidingen als geheel overkomen.

Extra instellingen
Daarnaast kun je ook de positionering van het icoon bepalen. Het is mogelijk om het icoon voor, naast of in het midden te plaatsen, afhankelijk van je voorkeur en het gewenste ontwerp.

Als je de vak van het icoon of de scheidingslijn zelf wilt draaien, kun je dat ook instellen. Hiermee geef je jouw lay-out een unieke uitstraling die zich onderscheidt van de rest.

Rondingen en vakken
De rondingsradius voor hoeken is een andere aanpassingsoptie waarmee je van een rechthoekige vak een ronde kunt maken. Dit kan de visuele aantrekkelijkheid verder vergroten.
Samenvatting
De verdeler in Elementor is een veelzijdig hulpmiddel om effectief visuele scheidingen op je website aan te brengen. Je hebt geleerd hoe je verdeels toevoegt, aanpast en personaliseert aan je ontwerp. Met een beetje creativiteit en de beschikbare instellingen kun je eenvoudig je website verbeteren.