WordPress & Elementor kennisbank

Witruimte creëren tussen elementen / rijen en kolommen met WPBakery

NOTE: Wij werken niet langer met WPBakery, maar zijn overgestapt naar de Page Builder Elementor Pro.

Inhoud van dit artikel:

Het kan mooier zijn om witruimte te creëren tussen verschillende blokken op de website. Het zorgt ervoor dat je website er minder druk of chaotisch uitziet. Er zijn meerdere manieren om witruimte te creëren tussen de verschillende elementen.

Om te beginnen alvast een tip: zorg ervoor dat je de hoeveelheid witruimte consistent doorvoert op je website. Dit zorgt voor dat je een je website één geheel vormt en blijft.

3 manieren om witruimte toe te passen:

  1. Margins of paddings aanpassen
  2. Element white space toevoegen
  3. Witruimte instellen tussen kolommen binnen een rij

1) Margins of paddings instellen met settings

Het voordeel van het instellen van paddings en margins is dat je niet alleen boven en onder het blok / rij of element witruimte toe te passen, maar ook links en rechts van het blok (in tegenstelling tot optie 2: het white space element gebruiken).

  1. Klik op het potloodje om de instellingen van het element, de rij of kolom aan te passen
  2. Ga naar het tabblad ‘Design opties‘Je ziet hier als het goed is allemaal lege velden (tenzij voor de demo content hier al instellingen stonden opgeslagen). Je kunt hier op 2 manier witruimte toevoegen, met margins of paddings. In het screenshot hieronder zie je het verschil tussen deze twee. Als je bijvoorbeeld meerdere tekstblokken naast elkaar gebruikt is het gebruikelijk om witruimte te gebruiken. Gebruik je voor het blok een andere achtergrondkleur of afbeelding dan de rij waarin het zich bevindt? Of gebruik je een zichtbare omlijning? Dan kun je het beste de witruimte instellen met paddings. Je gebruikt paddings dus om BINNEN het element / kolom of rij ruimte te creëren en margins voor BUITEN het element / kolom of rij.Welke waarden kun je invoeren? 
    Meestal wordt de hoeveelheid witruimte aangeduid met het aantal px. Maar je ziet ook steeds vaker percentages staan. Hiermee zorg je ervoor dat de afstand voor alle apparaten op dezelfde manier getoond wordt. Het is ook mogelijk om hier negatieve waarden in te voeren. Dit kun je doen als je wilt dat bepaalde elementen elkaar overlappen.
  3. Voer de waarden in en klik op opslaan.

2) Element Empty Space gebruiken

WPBakery biedt een element waarmee je ook witruimte kunt maken boven en onder verschillende elementen:

  1. Klik op ‘Element toevoegen’ (of op het plus teken) om een element toe te voegen
  2. Zoek het element ‘Empty Space‘ en voeg deze toe. Je kunt nu direct invullen hoeveel witruimte je wilt creëren
  3. Sleep het element naar de plek waar je Empty space wilt creëren.

3) Witruimte bij kolommen instellen

Hoewel je ook gewoon de eerste optie kunt gebruiken voor het instellen van witruimte tussen kolommen, is het makkelijker om de instellingen van de rij hiervoor te gebruiken.

  1. Klik op het potloodje om de rij te bewerken (je moet dan wel minimaal 2 kolommen hebben ingesteld)
  2. Klik op de optie ‘columns gap’. Je hebt hier de keuze uit een aantal vooraf ingesteld pixels. Kies het aantal px dat je wilt instellen en klik op opslaan.

NOTE: Wij werken niet langer met WPBakery, maar zijn overgestapt naar de Page Builder Elementor Pro.

Meer handige tips ontvangen?

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.