4. De blokken/componenten

Je website bouw je uit blokken. Elk blok is een bouwsteen voor je website. Hieronder staat wat elk blok is en waar je het voor gebruikt.

Je vindt ze allemaal links in de editor onder Componenten. Je sleept ze eenvoudig naar je pagina en stelt ze in via het opmaakpaneel aan de rechterkant van de editor. 

Blokken voor structuur

"Kolommen"

Het kolommen-component is eigenlijk een overkoepelend blok. Hiermee zet je eenvoudig andere blokken naast elkaar. Kies een indeling: 1 kolom, 2 gelijk, 1 : 2, 2 : 1, 3 gelijk of 4 gelijk. Sleep vervolgens andere blokken in de kolommen.

Je kunt de tussenruimte instellen, de verticale uitlijning (boven, midden, onder), een achtergrondkleur of -afbeelding geven met een overlay eroverheen, en de volgorde omdraaien.

Op een telefoon stapelen de kolommen automatisch onder elkaar.

Dit is hét blok voor indeling. Alle andere blokken nemen standaard de volle breedte. Wil je twee dingen naast elkaar zetten? Dan begin je met het kolommen-component.

Kop en tekst

Hero — grote koptekst

Het grote openingsblok bovenaan je pagina. Een koptekst, een ondertitel, en tot twee knoppen.

Als achtergrond kun je een afbeelding kiezen met een lichte of donkere overlay eroverheen — zo blijft je tekst leesbaar. Of gewoon een kleur. De hoogte zet je op normaal of op de volledige vensterhoogte.

Titel

Een losse kop. Stel het titelniveau in (H1 t/m H4): dat bepaalt de grootte én hoe Google de opbouw van je pagina leest. Gebruik H1 één keer per pagina, voor de belangrijkste kop.

Tekst

Een tekstblok. Naast kleur en uitlijning kun je de lettergrootte, regelafstand en regelbreedte instellen. Die regelbreedte is het geheim van prettig lezen: te brede regels lezen vermoeiend.

Titel + tekst

Kop en tekst in één blok — scheelt slepen en zet ze meteen netjes onder elkaar.

Tekst met knop

Kop, tekst en een knop in één blok. Hiermee maak je gemakkelijk een Call To Action.

Knoppen en links

Knop

Een of twee knoppen naast elkaar. Per knop:

• Tekst op de knop en de Link;
• Stijl: Primair, Secundair of Aangepast. Primair en Secundair volgen de knopstijlen uit je site-instellingen — pas je die aan, dan veranderen álle knoppen mee. Kies alleen Aangepast als deze ene knop echt moet afwijken;
• Grootte (klein, normaal, groot) en Breedte (past bij tekst, of volledig).

Bij Link kies je tussen een pagina van je eigen site of een externe link. Kies je een eigen pagina, dan blijft de link kloppen ook als je de pagina later hernoemt.

Media

Afbeelding

Eén afbeelding. Kies de breedte (smal, normaal, site-breed of volledig breed zonder marges) en de hoogte met uitsnede: vullend (bijgesneden, altijd een strak vlak) of passend (helemaal zichtbaar). Bij vullend bepaal je met Positie welk deel in beeld blijft — handig als er een gezicht net wegvalt.

Verder: ronde hoeken, rand en een bijschrift.

Galerij

Meerdere afbeeldingen in een raster van 2, 3 of 4 kolommen. Alle foto's worden vierkant bijgesneden, zodat het raster strak blijft.

Logostrip

Een rij logo's — van klanten, partners of merken die je voert. Je stelt de hoogte en tussenruimte in.

Video

Een YouTube- of Vimeo-video. Plak de URL van de video en klaar.

De video laadt pas als een bezoeker erop klikt. Dat houdt je pagina snel.

Bedrijfsinformatie

Contactgegevens / WhatsApp

Je adres, telefoonnummer en e-mailadres netjes onder elkaar, met optioneel een WhatsApp-knop. Vul het WhatsApp-nummer in met landcode, dus bijvoorbeeld +316… in plaats van 06….

Openingstijden

Een net rijtje dagen met open- en sluitingstijden. Per dag kun je gesloten aanvinken.

Prijslijst

Diensten of producten met een naam, een optionele omschrijving en een prijs. De prijzen krijgen hun eigen accentkleur.

Kaart

Een Google-kaart met je adres of plaats erop. Stel het zoomniveau (1–20) en de hoogte in.

Standaard laadt de kaart pas als een bezoeker erop klikt — dat houdt je pagina snel. Tot die tijd staat er een vlak met je adres. Wil je de kaart tóch meteen zichtbaar hebben, zet dan Kaart laden onder Geavanceerd op live.

Contactformulier

Een formulier waarmee bezoekers je een bericht kunnen sturen. Zie handleiding 10 voor de complete uitleg.

Reviews en toegankelijkheid

Reviews

Tot drie beoordelingen naast elkaar, elk met tekst, een naam en een sterrenscore. Kleuren van de sterren en de reviewkaart stel je zelf in.

Icoon + tekst

Een icoon met een korte tekst ernaast. Je kunt kiezen uit een grote iconenbibliotheek. Perfect om in een Kolommen-blok drie of vier kernpunten naast elkaar te zetten.

FAQ / Accordion

Veelgestelde vragen. Elke vraag klapt open als de bezoeker erop klikt — zo blijft de pagina overzichtelijk.

Navigatie en social

Subpagina-menu

Een menu met de subpagina's van de pagina waar je op staat. Handig op een hoofdpagina met meerdere onderdelen eronder. Zie handleiding 5.

Sociale media

Een rij klikbare iconen: Facebook, Instagram, LinkedIn, X (Twitter), YouTube, WhatsApp en TikTok.

Instellingen die élk blok heeft

Onafhankelijk van welk blok je kiest:

• Interne ruimte (tab Layout) — de witruimte binnen het blok. Presets of fijn afstellen.
• Rand (tab Styling) — dikte, kleur en ronde hoeken.
• Achtergrondkleur (tab Styling) — effen of met een kleurverloop, en met instelbare transparantie.
• Geavanceerd:
  • Schaduw — Geen, Zacht, Normaal of Diep, eventueel alleen bij hover.
  • Zichtbaarheid per apparaat — verberg het blok op mobiel, tablet of desktop.
  • Lettertype — normaal volgt het blok je site-pakket; hier kun je afwijken.

Kleuren kiezen

In elke kleurkiezer staan je merkkleuren bovenaan als snelkeuze. (Deze zijn in te stellen via de Toolbar boven de editor en site-instellingen) Kies je zo'n merkkleur, dan blijft het blok eraan gekoppeld: pas je later je huisstijl aan, dan verandert dit blok automatisch mee.

Kies je een losse kleur, dan staat die vast. Beide kan — maar merkkleuren gebruiken scheelt je later veel werk.