Selecteer pagina

Hoe maak je kolommen in berichten en pagina’s

Advertentie

Een bericht of pagina maken in WordPress is, dankzij de ingebouwde editor, lekker eenvoudig. Met plugins als TinyMCE Advanced voeg je bovendien nog een hoop gemak toe op het gebied van het stijlen van je tekst.

Maar één ding blijft lastig: het gebruiken van kolommen. Als je kennis hebt van HTML kun je dat doen met behulp van CSS in de ‘Tekst’-editor van WordPress, maar daar wordt het niet eenvoudiger en overzichtelijker van.

Twee kolommen, gedefinieerd in HTML, zou er zo uitzien:


<div style="width: 40%; padding: 0 10pt 0 0; float: left;">
Inhoud van Kolom 1 hier
</div>

<div style="width: 40%; padding: 0 10pt 0 0; float: right;">
Inhoud van kolom 2 hier
</div>

Dat is niet iets wat een gemiddelde WordPress gebruiker zonder uitgebreide kennis van HTML snel zal doen.

De oplossing: de plugin Column Shortcodes

column-shortcodesMet de plugin Column Shortcodes lossen we dit probleem snel op! Wanneer je deze plugin installeert, verschijnt er in je editor een knop naast je knop ‘Media Toevoegen’. Als je daarop klikt, zie je het scherm wat je hier rechts ziet.

In dit scherm kun je kiezen wat voor kolom je wilt toevoegen. Je hebt hier enorm veel vrijheid in.

Stel even dat we de pagina willen verdelen in twee kolommen die allebei even groot zijn. We klikken dan voor de eerste kolom op de optie ‘one half’. De plugin plaats dan een klein stukje code in je bericht of pagina.

Klik vervolgens nogmaals op de knop en kies voor ‘one half (last)’. Het is heel belangrijk dat je voor de laatste kolom van een pagina altijd voor de optie ‘last’ kiest!

Je krijgt dan:

[one_half][/one_half] [one_half_last][/one_half_last]

Tussen deze shortcodes kun je je inhoud voor de kolommen zetten. Tekst, afbeeldingen, alles is mogelijk.

Je kunt ook ongelooflijk veel variëren met kolommen. Voorbeeldje van een serie van 3 kolommen met verschillende breedtes:


Kolom 1 – Eén helft

Kolom 2 – Eén vierde

Kolom 3 – Eén vierde


De code voor deze kolommen is dan als volgt (let op de toevoeging ‘last’ bij de laatste kolom!)


[one_half]

Kolom 1 - Eén helft

[/one_half]

[one_fourth]

Kolom 2 - Eén vierde

[/one_fourth]

[one_fourth_last]

Kolom 3 - Eén vierde

[/one_fourth_last]

Ik geef toe, het lijkt wat complex, maar zeker met behulp van het dialoogvenster van Column Shortcodes is het dat zeker niet!

Over de schrijver

Rick Heijster

Ik ben de vaste schrijver van Goed Bezig met WordPress en de eigenaar van RAM ICT Services en WordPress Super Service.  Ik heb jarenlange ervaring met WordPress. Heb je een vraag of WordPress-probleem? Neem dan zeker even contact met me op. Ik kan je ongetwijfeld helpen!

Laat een reactie achter

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