Je bent hier: Home » WordPress » Kolommen in WordPress

Kolommen in WordPress

Sommige WordPress themes zoals die van Studiopress Genesis Framework hebben standaard kolommen. Andere themes ondersteunen kolommen niet van nature. In dit artikel laten we je zien hoe je kolommen aanbrengt op jouw website.

Hulp nodig bij digital marketing?

Breng je digital marketing in topvorm.
Leer je bedrijf kennen vanuit een marketing-oogpunt.
Pas strategieën toe die werken voor jou.

Inhoud van dit artikel:

Kolommen in WordPress

Kolommen met CSS in je HTML

Onderstaande code kun je gebruiken door ze rechtstreeks in je WordPress te plakken en de kolom 1 tekst en kolom 2 tekst te vervangen door jou tekst.

Twee kolommen

Code:


<div style="width:40%;padding:0 10pt 0 0;float:left;">
kolom 1 tekst
</div>


<div style="width:40%;padding:0 10pt 0 0;float:left;">
kolom 2 tekst
</div>

Resultaat:

kolom 1 tekst

kolom 2 tekst

Meerdere kolommen kun je niet zo netjes oplossen met CSS in HTML. Als je meer dan twee kolommen nodig heb kun je dit beter doen met een plugin (tenzij je zelf in je CSS wilt toevoegen maar dit is voor de geavanceerde gebruikers onder ons en dit gaan we hier niet bespreken).

Kolommen plugin voor WordPress

https://wordpress.org/plugins/column-shortcodes/
Met deze plugin kun je rechtstreeks in je visuele of tekst editor shortcodes toevoegen zodat je zelf geen code moet toevoegen.

Kolommen in Studiopress themes

De volgende code werkt alleen wanneer je met een Studiopress theme werkt die x-aantal kolommen ondersteunt.

2 kolommen

Code:


<div class="one-half first">
<p>colom 1</p>
</div>
<div class="one-half">
<p>colom 2</p>
<div class="clearfix"></div>

Resultaat:

kolom 1

kolom 2

3 kolommen

Code:


<div class="one-third first">
<p>kolom 1</p>
</div>
<div class="one-third">
<p>kolom 2</p>
</div>
<div class="one-third">
<p>kolom 3</p>
<div class="clearfix"></div>

Resultaat:

4 kolommen

Code:


<div class="one-fourth first">
<p>kolom 1</p>
</div>
<div class="one-fourth">
<p>kolom 2</p>
</div>
<div class="one-fourth">
<p>kolom 3</p>
</div>
<div class="one-fourth">
<p>kolom 4</p>
<div class="clearfix"></div>

Resultaat:

kolom 1

kolom 2

kolom 3

kolom 4

6 kolommen

Code:


<div class="one-sixth first">
<p>kolom 1</p>
</div>
<div class="one-sixth">
<p>kolom 2</p>
</div><div class="one-sixth">
<p>kolom 3</p>
</div><div class="one-sixth">
<p>kolom 4</p>
</div><div class="one-sixth">
<p>kolom 5</p>
</div><div class="one-sixth">
<p>kolom 6</p>
<div class="clearfix"></div>

Resultaat:

kolom 1

kolom 2

kolom 3

kolom 4

kolom 5

kolom 6

Dominic Heselmans is een van Europa's meest gepassioneerde online marketingexperts. Nadat hij ervaring opdeed bij verschillende bedrijven en digital agencies, besloot hij dat het ook anders en beter kon. Daarvoor moest hij dan wel zelfstandig een eigen bureau opzetten. Dat lukte dankzij intelligentie, inzicht en een innovatieve aanpak. Met zijn ondernemerschap leidde hij de afgelopen tien jaar talloze bedrijven door de jungle van digitale marketing. Zijn beproefde methodes maken groei mogelijk en transformeren gestagneerde bedrijven tot machines die oneindig veel waarde toevoegen aan hun markt! Een gesprek met zaakvoerder Dominic leidt zeker tot een energy-boost. Maar misschien wel belangrijker: Door een 1-op-1 gesprek van ondernemers onder elkaar, krijg je ideeën over hoe ook jouw bedrijf meer online succes kan realiseren.