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.
Inhoud van dit artikel:
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:
kolom 1
kolom 2
kolom 3
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
