Een mooie WordPress-site kan in geen tijd een rommeltje worden. Gewoon door een paar begrippen en functies uit de blokeditor door elkaar te halen. Daarom dit overzicht met betrekking tot de afmetingen van je contentblokken in WordPress.

Leestijd: ca.4 minuten

4 verschillende “breedtes” in WordPress

Als je ‘ t niet gewoon bent om met de blokeditor te werken, kan het een uitdaging zijn om alle verschillende blokken waaruit zo’n webpagina is opgebouwd, te rangschikken en uit te lijnen.

In principe komt elk bloktheme met 4 breedtes voor de content. Elk bloktheme heeft zijn eigen pre-sets. Maar – dat is een van dé voordelen van werken met blokthema’s – je kan die pre-sets volledig aanpassen aan je eigen smaak en behoeften. We onderscheiden:

1. Inhoud breedte

Zoals het woord zegt is dit de breedte van wat ik doorgaans de contentkolom noem. De plaats/de breedte die elk WordPress-blok inneemt als je niks aan de afmetingen wijzigt. Bij veel blokthema’s schommelt de inhoud breedte standaard ergens tussen de 600 en de 1.000 pixels (px).

Op het moment dat ik dit artikel schrijf is de inhoud breedte van deze website 1.000 px.

De ideale inhoud breedte?

Je kan de afmetingen van de inhoud breedte dus zelf instellen. De ideale afmetingen? Dat hangt af van verschillende factoren:

• eigen smaak en voorkeur
• de grootte van het standaard lettertype dat je koos voor de bodytekst
• het soort content dat je meestal brengt
• de marges/hoeveelheid witruimte die je wil hebben
• de algemene indeling en opmaak van je site
• …

Zo kan ik me goed voorstellen dat je graag een wat bredere inhoud breedte wil als je een groter standaard lettertype hebt, vaak met tabellen en kolommen werkt of vaak videomateriaal wil tonen. En ook als je een blogindeling wil – met een klassieke sidebar – kies je best een ruimere inhoud breedte.

2. Wijde breedte

Ook bij een wijde breedte wordt een vast aantal pixels ingesteld. Met de wijde breedte nemen de WordPress-blokken uiteraard meer plaats in in de breedte. Dat kan handig zijn als je:

• bepaalde content wil uitlichten
• een pull-quote wil tonen
• multimedia content wil tonen en/of tabellen en kolommen (zeker wanneer je een smalle inhoud breedte hebt gekozen)
• banners, inschrijfformulieren of call-to-actions wil laten opvallen
• …

Gebruik de wijde breedte dus vooral om bepaalde WordPress-blokken te laten afwijken van je standaard indeling.

Op het moment dat ik dit artikel schrijf is de wijde breedte van deze website ingesteld op 1.250 px. De hieronder getoonde video is ingesteld op de wijde breedte.

3. Volledige breedte

Kies voor volledige breedte als je graag hebt dat de content de volledige breedte van het scherm inneemt. Er is in dat geval ook geen ruimte meer voor marges.

Volledige breedte is nuttig bij het cover blok, of bijvoorbeeld bij het ontwerpen van headers en footers.

4. Aangepaste breedte

Met de aangepaste breedte geeft je de mogelijkheid om een aparte breedte te kiezen voor je contentblokken. Deze mag dus variëren los van de ingestelde inhoud breedte en wijde breedte.

---

Inhoud breedte en wijde breedte instellen in WordPress

Gelukkig helpt WordPress een handje om je site consistent vorm te geven. Zowel de inhoud breedte en de wijde breedte kan je in één keer instellen voor de gehele website. We stellen – heel grof gesteld – de afmetingen van het canvas in waarbinnen alle content moet komen.

1. Open de WordPress-editor
2. Kies voor het tabblad Stijlen
3. Klik in het template en klik vervolgens rechts bovenaan op de knop Stijlen
4. Tik dan onderaan het tabje Lay-out aan
5. Je kan nu onder het kopje Afmetingen je standaard Inhoud breedte en Wijde breedte instellen

Je zal wel gemerkt hebben dat je hier alleen de Inhoud breedte en de Wijde breedte kan instellen. Daar is een simpele uitleg voor. Een WordPress-blok met een aangepaste breedte kan immers geval per geval verschillen, en hoeft niet centraal te worden ingesteld. Dat is ook zo voor de Volledige breedte, want WordPress neemt dan sowieso de volledige breedte van het scherm voor dat contentblok. Er valt niets in te stellen.

Naast de contentbreedtes kan je nog 2 zaken configureren:

Padding

De padding bepaalt hoeveel witruimte er standaard voorzien wordt rondom de verschillende elementen op je website. Dat kan zowel gaan over verticale ruimte (links en rechts) als de horizontale ruimte (boven- en onderaan).

Blokafstand

De blokafstand regelt de onderlinge afstand tussen contentblokken.

Wijzigingen aangebracht aan de opmaak van je WordPress-website? Test één en ander uit op een tablet en smartphone én in enkele andere webbrowsers. Controleer even of ook daar alles fijn werkt.

---

Het nut van het groep-blok in WordPress

Wat mij betreft is het groep-blok één van de handigste WordPress-blokken van de hele blok-inserter.

Zoals de naam al doet vermoeden gebruik je dat groep-blok vooral om meerdere blokken samen te brengen (en te houden) in één container. Op die manier kan je eventueel complete secties opbouwen voor je website.

Daarnaast komt het groep-blok echter met extra mogelijkheden qua opmaak en indeling van je contentblokken. Ook als je wil spelen met de Inhoud breedte, de Wijde breedte, de Volledige breedte en de Aangepaste breedte.

Binnenste blokken gebruiken

Maak of selecteer een groep-blok en klik het schuifbalkje Binnenste blokken gebruiken inhoud breedte aan, in het menu Instellingen voor het groep-blok in kwestie.

Beweeg het schuifbalkje naar rechts en het bewuste groep-blok zal de breedte aannemen zoals je hierboven de Inhoud breedte hebt ingesteld. Laat het schuifbalkje links staan en dan heeft het groep-blok de breedte-afmetingen die je hebt gekozen voor de Wijde breedte.

En mocht je dat willen, dan heb je zoals gezegd de optie om aangepaste breedtes in te stellen. Speciaal voor dit ene groep-blog dan.

Uitlijnen

Een beetje vreemd en verwarrend is dat je, wanneer je je groep-blok wil uitlijnen, moet zoeken naar de knop in de werkbalk aan de linkerkant…

• Kies de optie Geen als je wil dat het blok even breed is als de ingestelde Inhoud breedte
• Selecteer Wijde breedte als je het blok even breed wil hebben als de gekozen Wijde breedte
• Kies Volledige breedte als je een blok graag schermvullend wil laten zien