Tekst met icoon erboven in 3 kolommen

Je kunt op je website 3 kolommen met een icoon plaatsen, met daarin een stuk tekst en een achtergrond. Op onze voorbeeld website gebruiken we deze voor de opleidingen. Maar je kunt het natuurlijk invullen zoals je zelf wilt. In dit artikel laat ik je zien hoe je dat kunt doen.

1. Schakel de 'Visual Builder' in
2. Klik op het groene '+' icoon om een sectie toe te voegen

3. Kies voor een indeling van 3 kolommen

   

4. Je kunt nu een module invoegen. Voeg een 'Blurb' module toe
5. Onder 'Content' bij 'Tekst' vul je een 'Titel' in. Zorg dat je deze niet te lang maakt zodat het op 1 regel blijft. 
6. Vul ook een 'Corps' tekst in. 
7. Scroll nu iets naar beneden naar 'Afbeelding en pictogram' en klap deze open
8. Zet 'Gebruik pictogram' op 'Ja', en kies een icoon uit de lijst. 
9. Open nu de 'Ontwerp' instellingen.
10. Onder 'Afbeelding en pictogram' kun je de kleur van je pictogram wijzigen. 
11. Klap 'Tekst' open en kies bij 'Tekstuitlijning' voor 'Midden'

12. Je kunt eventueel de 'Tekstkleur' licht maken als je voor een donkere achtergrond kiest

    

13. Klik op het groene vinkje rechts onderaan
14. Dupliceer de gemaakte 'Blurb' twee keer en verplaats deze naar de 2e en 3e kolom.
15. Open de 'Rij-instellingen' door in het groene menu op het tandwiel icoon te klikken.
16. Klik nu op het tandwiel icoon van de eerste kolom
17. Klik achtergrond open en voeg een achtergrondkleur naar keuze toe. Ik kies hiervoor voor een lichte achtergrond.
18. Onder 'Ontwerp' klap je 'Afstand' open. Vul bij 'Buffer' in elke regel ''30'' in.
19. Scroll naar beneden naar 'Rand' en vul bij 'Boordbreedte' '1px' in. En kies eventueel een 'Boordkleur'
20. Klik weer op het groene vinkje. Je komt nu weer in de 'Rij-instellingen'

21. Klik nu met je rechtermuisknop op de eerste kolom en kies voor 'Kopiëren Item Stijlen'

    

22. Klik nu met je rechtermuisknop bij de tweede kolom en kies voor 'Plakken Item Stijlen'. Doe dit ook voor de derde kolom. TIP: Soms moet je nog een keer met je rechtermuisknop klikken omdat hij het niet pakt. 
23. Klik nu op 'Ontwerp' open en vervolgens klik je 'Formaat wijzigen' open

24. Zet 'Kolomhoogten gelijk maken' op 'Ja', zodat de kolommen dezelfde hoogte blijven, ondanks dat er in de ene kolom meer tekst staat.

    

25. Klik op het groene vinkje om de wijzigingen op te slaan.
26. Je kunt nu de teksten aanpassen voor de kolommen die je 'gedupliceerd' hebt. Doe dit voor elke 'Blurb module' apart door in het grijze menu op het tandwiel icoon te klikken.
27. Vergeet niet om de pagina op te slaan als je klaar bent