WPLounge
Home » Tutorials » Kolommen maken in WordPress

Kolommen maken in WordPress

Kolommen maken in WordPress

Het toevoegen van kolommen in WordPress is bij veel (premium) themes standaard mogelijk door middel van een shortcode. Maar als je theme dit niet standaard ondersteunt, kun je het beter met een plugin oplossen.

In dit artikel laat ik verschillende plugins zien waarmee je kolommen aan je WordPress-site kunt toevoegen.

Let op:
Binnenkort komt de nieuwe editor voor WordPress uit: Gutenberg. In onze Gutenberg Handleiding lees je hoe je kolommen maakt (zonder extra plugin) met Gutenberg!

Voorbeeld van kolommen in WordPress

Het theme dat we op WPLounge.nl gebruiken (Gridlove) geeft standaard de mogelijkheid om met shortcodes kolommen aan te maken. Ook ons favoriete theme Divi (van Elegant Themes) biedt deze mogelijkheid natuurlijk standaard.

Voorbeeld
Door met kolommen te werken, kun je je pagina in twee, drie of meer kolommen “opsplitsen”. In dit voorbeeld heb ik twee kolommen aangemaakt. Als je deze pagina op een mobiele telefoon bezoekt zullen de kolommen onder elkaar worden gezet. De kolommen zijn dus automatisch ook responsive, waardoor ze er ook op kleinere devices goed uit zien.
Ben je op zoek naar een manier om tabellen te maken in plaats van kolommen? Lees dan: Tabellen maken in WordPress »

Hoe krijg je dit soort kolommen op jouw website als dit niet standaard in je theme zit ingebouwd? Er zijn gelukkig verschillende plugins die shortcodes voor kolommen toevoegen.

Kolommen maken in WordPress met een plugin

Eén van de bekendste plugins voor het maken van kolommen is Column Shortcodes (“Kolom Shortcodes” in de Nederlandse versie van WordPress).

Column Shortcodes CodePress

Zodra je de plugin hebt geïnstalleerd en geactiveerd, zul je in de WordPress Editor een nieuwe knop zien staan:

Column Shortcodes knop

Wanneer je op deze knop klikt, zal er een nieuw scherm geopend worden waarin je kunt bepalen welke kolommen je aan je pagina wilt toevoegen:

Kolommen kiezen

Twee kolommen

Wil je bijvoorbeeld twee kolommen gebruiken, klik dan op “half” en daarna een keer op “half (laatste)“. De volgende shortcodes worden dan aan je pagina of bericht toegevoegd:

Het is belangrijk dat de laatste kolom in een rijtje altijd de shortcode krijgt die eindigt op “_last”. Het bovenstaande voorbeeld geeft het volgende resultaat:

Resultaat twee kolommenDe plugin zorgt er automatisch voor dat de twee kolommen op een mobiele device (met een klein scherm) onder elkaar worden getoond, zodat het geheel goed leesbaar blijft.

Drie kolommen

Voor drie kolommen gebruik je de volgende shortcodes:

Ook hier zie je weer dat de laatste kolom de shortcode eindigend op “_last” gebruikt. Het resultaat is als volgt:

Resultaat drie kolommen

Niet heel mooi, omdat ik (op mijn testomgeving) een theme gebruik waar de tekst van een pagina niet zo veel ruimte krijgt. Of het er bij jou wel mooi uit ziet, ligt vooral aan het theme dat je gebruikt. Soms helpt het ook om het template van je pagina aan te passen naar “Full width” (volledige breedte) om alle kolommen goed te laten tonen.

Kolommen met verschillende groottes

De Column Shortcodes plugin biedt je de mogelijkheid om tot zes kolommen in de breedte toe te voegen. Maar je kolommen hoeven natuurlijk niet allemaal even groot te zijn. Zo kun je ook afwisselen:

In het bovenstaande voorbeeld heb ik drie kolommen toegevoegd, waarvan de middelste het breedste is. Dit ziet er als volgt uit:

KolommenConclusie

Kolommen maken in WordPress is redelijk eenvoudig. Je moet er vooral op letten dat je theme niet al standaard een shortcode heeft voor kolommen. Het is dan namelijk zonde om er ook nog een plugin voor te installeren.

Beoordeel dit artikel

(1 ratings, gemiddeld: 5,00 van de 5)
Wouter Postma

Wouter Postma

Eigenaar van WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

Reageer

Advertenties

Blijf op de hoogte!