Margin padding instellen voor kolom en rij met page builder

Logo cursus traing wordpress

Margin padding instellen voor kolom en rij met page builder

Vroeg of laat krijg je met het ontwerpen en vormgeven van je webpagina te maken met Margin en Padding. Dit is de ruimte in en om een tekst of beeldelement. Voor menig cursist is dit lastig. Daarom deze uitleg.

Wat is Margin en Padding precies

Om te beginnen is het goed te weten wat een padding en margin is. Margin en padding zijn eigenschappen die je aan een html element kunt toekennen. Het zijn twee van de meest bruikbare eigenschappen om je element tot op de pixel nauwkeurig te positioneren.

De vormgeving van een element wordt bepaald door een rechthoekige gebied, de box. Van binnen naar buiten bestaat de box uit de inhoud van het element, de padding, de border en de margin. Visueel ziet het er zo uit:

Margin

De margin is de afstand van de rand van een element tot de rand van het parent element of de rand van een aangrenzend element. De margin is transparent en neemt dus de aan van het parent element.

Border

De border is de rand van een element.

Padding

De padding is de afstand tussen de rand van een element en de inhoud. Als een achtergrondkleur gebruikt wordt voor het element, dan heeft de padding dezelfde .

De grootte van de box wordt bepaald door de som van de afmetingen van het element en de breedte van de margin, de border en de padding.


Margin en padding instellen met WP Beaver Builder


Margin en padding instellen met WP Bakery Builder

Ervan uitgaande dat je plugin gebruikt om pagina's vorm te geven, kun je de padding en margin per /element aanpassen. Je kan bij vrijwel elk element op de eigenschappen klikken met het potloodje en de padding en margin aanpassen. Ga vervolgens naar ‘Design opties'. Je krijgt de volgende afbeelding te zien waar je het aantal pixels kan invoeren. Let op dat je alle waardes in pixels invoert met ‘px', bijvoorbeeld '20px' of '30px':

Margin en padding voor gevorderden: pixels en percentages

Normaal gesproken voor je standaard pixels als waarde in. Dit is altijd dezelfde absolute waarde op alle apparaten waar de webpagina op bekeken wordt, bijvoorbeeld 20 pixels. Je kan ook percentages invoeren. Bijvoorbeeld 5% bij margin-top. Je krijgt dan een lege ruimte van 5% ten opzichte van de breedte van je browser. Dit werkt heel consistent en mooi op telefoons, tablets en smartphones.


Opbouw webpagina: wanneer margin of padding gebruiken

Wat vaak het lastigste is, is het bepalen waar je de padding en margin moet instellen. Je moet goed in de gaten houden hoe je pagina is opgebouwd. Een pagina bestaat uit meerdere rijen onder elkaar. Iedere rij bestaat uit 1 of meer kolommen. In iedere bevind zich het element. Hierarchisch is de volgorde dus:

Pagina (hoogste niveau)

Bestaande uit kolommen onder elkaar

Rij (of row of content band)

De rij over de hele breedte van je pagina-layout. Waarschijnlijk plaats je meerdere rijen onder elkaar

Kolom (of column)

Iedere rij bestaat uit 1 of meerdere kolommen naast elkaar, meestal 1, 2 3, 4 of 6 kolommen omdat dit responsive goed werkt.

Element (laagste niveau)

In iedere kolom plaatst je het element waar je je content mee kan bepalen. Met WP Bakery builder kun je het element altijd aanpassen met het groene kadertje op het element. Veel gebruikte elementen:

– Tekst-element

– Afbeelding-element

-element


Video uitleg WP Bakery Builder

In de onderstaande video van WP Bakery Builder staat het mooi uitgelegd.

Blij met deze design tip?
Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews:


Voorbeelden Margin en padding WP Bakery Builder instellingen

2 simpele rijen onder elkaar

Geen padding of margin

margin padding kolom rij page builder wordpress 02
margin padding kolom rij wordpress 02

Kolomsettings > Design opties

Padding 0 0 0 0

margin padding kolom rij page builder wordpress 01
margin padding kolom rij page builder wordpress 01

Rijsettings > Design opties

Margin 20px 0 0 0

margin padding kolom rij page builder wordpress 03
margin padding kolom rij page builder wordpress 03

Rijsettings (2 kolommen) > Design opties

standaard

margin padding kolom rij page builder wordpress 04
margin padding kolom rij page builder wordpress 04

Rijsettings > General

Columns gap: 20px

margin padding kolom rij page builder wordpress 05
margin padding kolom rij page builder wordpress 05

Rijsettings > General

Row stretch: Stetch row and content
Columns gap: 20px

margin padding kolom rij page builder wordpress 06
margin padding kolom rij page builder wordpress 06

padding-inline voor gevorderden

De CSS eigenschap padding-inline definieert de logische inline begin- en eindvulling van een element, die overeenkomt met fysieke opvullingseigenschappen, afhankelijk van de schrijfmodus, richting en tekstoriëntatie van het element. Ik gebruik dit zelf regelmatig voor WordPress websites. Het ziet er zo uit in CSS:

/*  waarden */
padding-inline: 10px 20px; /* een absolute lengte */
padding-inline: 1em 2em; /* relatief ten opzichte van de tekstgrootte */
padding-inline: 10px; /* een begin- en eindwaarde */

/*  waarden */
padding-inline: 5% 2%; /* relatief aan de breedte van de dichtstbijzijnde blokcontainer */

/* globale waarden */
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert;
padding-inline: unset;

Handleiding inline-padding: developer.mozilla.org/en-US/docs/Web/CSS/padding-inline


Wil je meer details over Margin padding instellen voor kolom en rij met page builderof info?

Wil je meer informatie? Veel lezers met interesse in Margin padding instellen voor kolom en rij met page builder bekeken ook de onderstaande artikelen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Margin padding instellen voor kolom en rij met page builder

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Margin padding instellen voor kolom en rij met page builder en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven