Kolommen en layouts gebruiken in Webey

Een professionele website heeft meer nodig dan content die onder elkaar staat. Met kolommen en layout-blokken geef je je pagina's structuur, visuele variatie en een professionele uitstraling. In dit artikel leer je hoe je de kolommen-, card-grid-, hero-, spacer- en divider-blokken optimaal inzet.

Het kolommen-blok

Het kolommen-blok is een van de krachtigste blokken in Webey. Hiermee verdeel je een sectie van je pagina in meerdere naast elkaar staande kolommen. Je kunt kiezen uit 2, 3 of 4 kolommen. Na het toevoegen van een kolommen-blok selecteer je het gewenste aantal en kun je direct content in elke kolom plaatsen.

Aangepaste breedtes instellen

Standaard zijn alle kolommen even breed, maar je kunt de breedteverhoudingen handmatig aanpassen. Dit is handig als je bijvoorbeeld een smal zijpaneel naast een breed inhoudsvlak wilt maken. In de blokinstellingen pas je de breedte van elke kolom aan als percentage. Zorg ervoor dat het totaal altijd op 100% uitkomt. Veelgebruikte verhoudingen zijn:

• 70/30 — breed inhoudsvlak met smal zijpaneel
• 30/70 — afbeelding links, tekst rechts
• 25/50/25 — gecentreerde content met smalle zijkolommen
• 33/33/33 — drie gelijke kolommen voor features of diensten

Blokken nesten in kolommen

Elke kolom gedraagt zich als een eigen container waarin je andere blokken kunt plaatsen. Sleep een tekst-blok, afbeelding, button of zelfs een formulier naar een kolom. Je kunt meerdere blokken per kolom stapelen. Dit maakt complexe layouts mogelijk zonder code te schrijven.

Responsief gedrag

Op mobiele apparaten worden kolommen automatisch onder elkaar gestapeld. Een layout met drie kolommen wordt op een smartphone drie opeenvolgende secties. Dit zorgt ervoor dat je content altijd goed leesbaar blijft, ongeacht het schermformaat. Je hoeft hier niets voor in te stellen — Webey regelt dit automatisch.

Het card-grid-blok

Als je herhalende content wilt tonen — zoals diensten, teamleden of productcategorieën — is het card-grid-blok ideaal. Dit blok toont een raster van kaarten die elk een afbeelding, titel, beschrijving en optioneel een link bevatten. Het verschil met het kolommen-blok is dat card-grid ontworpen is voor gelijkvormige, herhalende items.

Voeg een card-grid-blok toe en configureer het gewenste aantal kolommen. Voeg vervolgens kaarten toe en vul elke kaart met content. Het card-grid past zich automatisch aan op kleinere schermen: op tablet worden 4 kolommen 2 kolommen, en op mobiel wordt alles onder elkaar gestapeld.

Het hero-blok met overlay

Het hero-blok is ontworpen voor grote, pakkende openingssecties. Je kunt een achtergrondafbeelding instellen met een kleur-overlay voor leesbaarheid. Voeg een kop, subtitel en call-to-action button toe. Het hero-blok strekt zich over de volledige breedte van de pagina uit en is perfect voor de eerste indruk van je website.

Tips voor een effectief hero-blok:

• Gebruik een hoge-resolutie achtergrondafbeelding die past bij je merk
• Stel de overlay-opacity in zodat tekst goed leesbaar blijft
• Houd de tekst kort en krachtig — maximaal een kop en één zin
• Voeg altijd een duidelijke call-to-action button toe

Spacer- en divider-blokken

Witruimte is essentieel voor een professioneel ontwerp. Gebruik het spacer-blok om verticale ruimte toe te voegen tussen secties. Je stelt de hoogte in pixels in, zodat je precies bepaalt hoeveel ademruimte er is.

Het divider-blok voegt een horizontale lijn toe die secties visueel scheidt. Dit is handig als je een subtielere scheiding wilt dan een groot kleurvlak of veel witruimte. Je kunt de dikte en kleur van de lijn aanpassen in de blokinstellingen.

Best practices voor paginastructuur

Een goed opgebouwde pagina volgt een logische structuur die bezoekers door je content leidt. Houd deze richtlijnen aan:

• Begin met een hero-blok — maak direct een sterke eerste indruk
• Wissel brede en smalle secties af — gebruik kolommen om variatie aan te brengen
• Gebruik witruimte bewust — voorkom dat blokken te dicht op elkaar staan
• Groepeer gerelateerde content — gebruik card-grids voor opsommingen en kolommen voor vergelijkingen
• Sluit af met een CTA — eindig elke pagina met een duidelijke actie die je bezoeker kan ondernemen
• Test op mobiel — controleer altijd hoe je layout eruitziet op een smartphone via de preview-functie

Veelgemaakte fouten

Vermijd deze veelgemaakte fouten bij het opzetten van je layout:

• Te veel kolommen op een rij — op desktop passen 4 kolommen prima, maar de content per kolom wordt dan smal. Gebruik maximaal 3 kolommen als je veel tekst hebt.
• Geen spacers gebruiken — blokken die direct tegen elkaar aan staan ogen rommelig. Voeg altijd spacers toe tussen belangrijke secties.
• Inconsistente breedtes — houd je kolommenverhoudingen consistent op vergelijkbare pagina's voor een professionele uitstraling.

Door slim gebruik te maken van kolommen, card-grids, hero-secties en witruimte bouw je pagina's die er professioneel uitzien en prettig lezen op elk apparaat.