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-shortcode-screenshotMet 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:


[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]


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

<pre>

[[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]]

[/pre]

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

 

Geef een reactie

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