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.
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
Inhoud
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.
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).
Zodra je de plugin hebt geïnstalleerd en geactiveerd, zul je in de WordPress Editor een nieuwe knop zien staan:
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:
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:
[one_half]Vul hier tekst in voor de linker kolom.[/one_half] [one_half_last]Vul hier tekst in voor de rechter kolom.[/one_half_last]
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:
De 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:
[one_third]Vul hier tekst in voor de linker kolom.[/one_third] [one_third]Vul hier tekst in voor de middelste kolom.[/one_third] [one_third_last]Vul hier tekst in voor de rechter kolom.[/one_third_last]
Ook hier zie je weer dat de laatste kolom de shortcode eindigend op “_last” gebruikt. Het resultaat is als volgt:
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:
[one_fifth]Vul hier tekst in.[/one_fifth] [three_fifth]Vul hier tekst in.[/three_fifth] [one_fifth_last]Vul hier tekst in.[/one_fifth_last]
In het bovenstaande voorbeeld heb ik drie kolommen toegevoegd, waarvan de middelste het breedste is. Dit ziet er als volgt uit:
Conclusie
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.
Hallo Wouter,
Dank je wel voor dit artikel. Ik gebruik het thema Savona en gebruik de oude editor van WordPress. Hoe kom ik erachter of dit thema al standaard een shortcode heeft voor kolommen?
Groetjes Barbara
Mijn advies is om even de handleiding van het thema te raadplegen.