Elementor Marge en Padding uitgelegd in makkelijke taal!

Elementor Marge en Padding uitgelegd in makkelijke taal!

In dit bericht:

Elementor padding afbeelding uitglegd - Websitetoday - Webdesign en Online Marketing Driebergen

Je bent aan de slag gegaan met Elementor en je ontkomt er niet aan dat je te maken gaat krijgen met de termen “Padding” en “Marge”. In dit artikel proberen we de principes van zowel padding als marge uit te leggen in begrijpelijke taal!

De Widgets, secties en kolommen hebben allemaal padding en marge instellingen

Goed om te begrijpen is, is dat alle widgets, secties en kolommen binnen Elementor gebruik kunnen maken van specifieke padding en marge instellingen. In ons voorbeeld hebben we binnen in een sectie een kolom geplaatst, met daarin een inner sectie dat bestaat uit twee kolommen. In één van die kolommen hebben we een afbeelding geplaatst.

De afbeelding is de widget die we gaan bewerken, en in dit voorbeeld de Marge en Padding instellingen op gaan toepassen. Om duidelijkheid te geven aan de effecten hebben we afbeelding widget een witte achtergrond gegeven en de kolom waarin de afbeelding zich bevind is zwart gekleurd. In onderstaande afbeelding staan de instellingen van zowel de Marge als Padding op 0.

Padding margin geen - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Wat zijn ‘Marge’ instellingen

Als we gaan kijken naar de marge instellingen is het goed om te weten dat marge staat voor de ruimte buiten de widget om. En met buitenom bedoelen we de ruimtes aan de boven- onderzijde en links- rechtszijde. Kortom, als je marge gaat toepassen aan de widget, en in ons voorbeeld de afbeelding, zal er extra ruimte gecreëerd worden aan de buitenkant van de afbeeldingswidget. Wij voegen in dit voorbeeld 50px aan marge toe, waardoor er extra ruimte gecreëerd wordt tussen de kolom en de afbeelding. ! Dit gebeurt vanaf de afbeelding ! 

Als je dit principe begrijpt, dan snap je ook dat je deze instellingen kunt gebruiken bij de secties en kolommen. Om bijvoorbeeld extra ruimte te creëren tussen 2 secties in. Of extra ruimte tussen twee kolommen in.

Padding marge alleen marge - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Wat zijn ‘Padding’ instellingen?

Nu we weten wat de marge voor effect geeft, is het tijd om te bekijken wat padding dan doet. Padding creëert extra ruimte aan de binnenkant van de widget. In dit geval onze afbeelding. In onderstaande afbeelding is goed te zien dat de afbeeldingswidget met een witte achtergrond, ruimte naar binnen is ontstaan. In een kolom kan deze functie bijvoorbeeld erg handig zijn om de teksten altijd 10 of 20 pixels van de randen af te houden. Het voordeel van het aanpassen van deze instellingen in een kolom, is dat de padding geldt voor alle widgets binnen in die kolom. Stel je zou per widget de instelling moeten invoeren dan zal je elke widget die 10 of 20 pixels padding moeten geven. Snap je me nog?

Padding en marge afbeelding - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Padding instellingen op een kolom voor het beste resultaat!

In aanvulling op bovenstaande voorbeelden, is het verstandiger om alleen met de padding en marge instellingen te spelen van een kolom of sectie. Waardoor je meteen voor alle inhoud beslist welke padding en marge de widgets moeten hebben ten opzichte van elkaar.

We hebben nu een kolom gemaakt en aangegeven dat de padding (ruimte aan de binnenkant van de kolom) op 0 moet staan. Het resultaat is dat de titel, de tekst en de afbeelding met de randen tegen de oranje rand van de kolom aanstaan. Ik hoop dat je het met me eens bent dat dit niet zo mooi staat..

Kolom 0 padding tekst - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Mocht je het mooi vinden dat de afbeelding wel de rand raakt, bijvoorbeeld omdat je een prijstabel gaat maken, of een product kolom, dan kan je er voor kiezen om de specifieke widgets van padding te voorzien. In onderstaande afbeelding hebben we de padding van de kolom nog steeds op 0 staan (widgets raken de oranje rand) maar zetten we de padding van de tekstbewerker op 20, waardoor de tekst niet meer de rand raakt. Je kan in dit voorbeeld overigens kiezen om de marge als de padding te wijzigen van de tekstbewerker. het effect zal hetzelfde zijn.

Kolom 0 padding padding op tekst - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Voor het allerbeste responsive resultaat geven we de kolom een eigen padding. Hiermee geven we aan de binnenkant van de kolom 50 pixels padding aan de boven- en onderkant en 20 pixels aan de rechter- en linkerkant. Dat staat uiteindelijk veel mooier!

Kolom 20 padding - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

Padding en Marge belangrijk voor een responsive design!

Nu hoop ik  natuurlijk dat je het concept padding en marge begrijpt. Ik zou zeggen, speel er vooral mee! Maar zorg wel dat je overzicht houdt. Pas alleen de instellingen aan van de kolommen en secties, en vermijd zoveel mogelijk individuele widgets. En mocht je lekker creatief bezig willen zijn, geef je kolom eens een -250px bovenkant marge;). Als laatste kan je nog experimenteren met de PX, EM, % en REM instelling. Mocht je alle instellingen weer terug willen zetten, gebruik dan de geschiedenis functie van Elementor.

Wil je de padding en marge specifiek voor de PC, tablet of mobiel instellen, klik dan op de desktop naast het woord padding/ marge. Selecteer vervolgens welk device je wilt aanpassen, en via deze weg maak je jouw website volledig responsive voor zowel tablet als mobiel.

FAQ

Wat is padding in Elementor?

Padding is de ruimte die je kan geven aan de binnenkant van een sectie, kolom of widget. Je gebruikt de padding instelling om bijvoorbeeld tekst en afbeeldingen van de rand af te houden binnen een kolom. Je kan de padding instellen voor de bovenkant, onderkant, linker- en rechterkant van de sectie, kolom of widget.

Wat is Marge in Elementor?

Marge is de ruimte die je kan geven aan de buitenkant van een sectie, kolom of widget. Je gebruikt de marge instellingen bijvoorbeeld om twee secties van elkaar te scheiden. Door de ruimte aan de bovenkant en onderkant te vergroten in pixels, zullen de secties meer van elkaar af staan. Meer witruimte tussen de secties zorgen voor een rustiger belevenis van jouw website.

Hoe maak ik mijn website responsive?

Met de padding en marge instellingen van jouw webpagina kan je precies de ruimtes bepalen voor zowel op de pc, tablet als mobiel. Door de instellingen aan te passen kun je precies aangeven welke witruimtes je wilt hebben op tablet en mobiel, waardoor jij jouw website volledig responsive kan maken!
Rick Memelink

Rick Memelink

Rick is eigenaar van Websitetoday.nl. Hij ontwikkelt WordPress websites met Elementor en heeft een achtergrond als sportleraar. De afgelopen jaren heeft hij veel cursussen en trainingen gevolgd in online marketing, webdesign en ondernemen. De vreemde combinatie van sport, lesgeven en webdesign maakt dat Rick een bijzondere 'kijk' heeft ontwikkeld op het realiseren van een nieuwe websites voor jou!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Zullen we kennismaken?

We zouden het geweldig vinden om met jou samen te werken!
Foryourmoment.nl mockup afbeelding met tablet, mobiel en pc - Websitetoday.nl
Maandag 08:00 - 20:00
Dinsdag 08:00 - 20:00
Woensdag 08:00 - 20:00
Donderdag 08:00 - 20:00
Vrijdag 08:00 - 20:00
Zaterdag Gesloten
Zondag Gesloten

Hé jammer, we zijn op dit moment gesloten. Als je een mailtje stuurt ontvang je z.s.m. een reply van ons!