Afmeting en positie

Linker- en rechter-marge

Een gecentreerde layout door het instellen van marge in een sectie van 1 kolom (100%)

Voeg een sectie toe van 1 kolom via Sectie invoegen uit bibliotheek of via Sectie toevoegen.

Contentblokken die je in de kolom van de sectie invoegt worden automatisch gecentreerd (er staat auto in de velden linker-marge en rechter-marge). Wil je het contentblok meer naar links of rechts gepositioneerd hebben vul dan ongelijke waardes in bij de linker- en rechtermarge. Het beste kun je dat doen in percentages, voor de schaalbaarheid.
Je kunt de afmeting voor het contentblok invullen in het veld breedte, maar je kunt dit veld ook leeg laten en de afmeting laten bepalen door de ruimte aan de linker- en rechterkant te definiëren: de linker-marge en rechter-marge.

Voorbeelden:

Afbeelding

3 opties voor een gecentreerde layout

1. Een sectie met 3 kolommen 25%-50%-25% ( grid 3-6-3) 
2. Met ruimte links en rechts van het contentblok: marge-links: 25% - marge-rechts: 25%:
3. Je kunt precies hetzelfde bereiken door alleen 50% in het veld breedte in te vullen. De velden voor de linker- en rechter-margin staan standaard op auto waardoor het content-blok gecentreerd wordt. Dit werkt goed als de content gecentreerd moet worden.

Afbeelding

3 opties voor een layout met content aan de linkerkant

1. Een sectie met 3 kolommen 9% 33% 58% (grid 1-4-7)
2. Met ruimte links en rechts van het contentblok dmv marge-links 10% - marge-rechts: 60%
   Links van het contentblok komt nu weinig ruimte en rechts heel veel. Het contentblok zal ver naar de linkerkant gepositioneerd staan, de overgebleven ruimte tussen de linker- en rechter-marge is 30%, het contentblok wordt dus 30% zonder de breedte in te vullen.
3. Je kunt in het veld breedte 30% invullen en de linker- en rechter-margin op auto laten staan, maar dan wordt het content-blok gecentreerd. Wil je het content-blok meer naar links zet dan marge-links op 10%, marge-rechts zou je op auto kunnen laten staan.

De ene manier is niet beter dan de andere, kies vooral wat je zelf het prettigst vindt.

Pixels of procenten?

De afmeting van een contentblok kun je instellen via de velden linker- en rechtermarge of het veld breedte. In bijna alle gevallen is het beter om het veld van de hoogte leeg te laten de hoogte schaalt automatisch mee met de breedte die je opgeeft.

Je kunt de waarden in de velden marge en breedte invullen in percentage of pixels. Wat is het verschil en wat is beter?

• Percentage heeft als voordeel dat het mee schaalt wanneer je het scherm kleiner maakt; een content-blok van 50% breed zal dus altijd de helft van het scherm zijn ongeacht de resolutie (het aantal pixels van je beeldscherm) van het scherm.
• Pixels zijn een vaste maat; een afbeelding van 600px breed kan er op jouw scherm uitzien als de helft van het scherm, maar iemand met een groter scherm en hogere resolutie zal de afbeelding veel kleiner zien. En andersom kan de afbeelding op het scherm van iemand met een lagere resolutie opeens veel te groot worden.

Percentage is dus wat flexibeler en vooral goed voor alles in de breedte van het scherm (voor de afmeting van de breedte en de marge-links  en marge-rechts). 
Voor de ruimte aan de onder of bovenkant (marge-boven- en marge-onder ) van een content-blok wil je misschien een meer vaste afmeting en zou je wel pixels kunnen gebruiken. 
Onze voorkeur gaat meestal uit naar percentage voor de afmeting in de breedte en pixels voor de afmeting in de hoogte. Maar het kan in enkele gevallen juist goed zijn als een contentblok een vaste breedte heeft en houdt op verschillende schermformaten. Of dat ruimte onder of boven een contentblok juist wel schaalbaar is.

NB. de standaard-templates van Magzmaker zijn geoptimaliseerd voor het gebruik op verschillende schermen. Je kunt kijken hoe deze zijn ingesteld als je zelf de keus wilt maken. 

Responsive contentblokken

Op de mobiele telefoon en schermen met een kleinere schermbreedte dan 768 pixels wordt een contentblok standaard 100% gemaakt met een kleine marge van 15px links en rechts zodat het contentblok schermbreed met een kleine afstand van de rand van het scherm van de mobiele telefoon wordt getoond.

Dit staat standaard zo ingesteld, maar er kan een situatie zijn dat je juist wel de eigen ingestelde linker- en rechtermarge onder tab Instellingen wilt behouden. Dit kun je aanpassen:

• Open het content-blok  > instellen.
• Klik op de tab Geavanceerd.
• Vink het vakje uit dat zorgt voor de aangepaste marge linker- en rechtermarge van 15px.

Secties
De kolommen van een sectie worden op het breekpunt van 768 pixels onder elkaar geplaatst. Contentblokken die eerst naast elkaar stonden worden op een scherm van de mobiele telefoon onder elkaar getoond.
In sommige gevallen kan het mooier zijn als de kolommen op een eerder moment bijvoorbeeld al bij een schermbreedte van 1024 pixels onder elkaar worden getoond. Of juist liever pas wanneer een schermbreedte kleiner wordt dan 600 pixels.
In de instellingen van de sectie kun je dit breakpoint wijzigen. Je kunt het standaard-breekpunt van 768 pixels aanpassen.
Open de instellingen van de sectie door aan de linkerkant op de naam van de sectie te klikken. Kies bij Breakpoint een van de andere opties uit de dropdown:

• 600 pixels
• 768 pixels (standaard)
• 820 pixels
• 1024 pixels
• 1280 pixels