Samenvatting
In de thema-instellingen configureer je de visuele basis van je website: kleuren, lettertypes, afstanden en de standaard stijl voor alle elementen. Het thema-scherm biedt een uitgebreide interface waarmee je variabelen instelt, lay-out componenten stylet en element-specifieke opmaak definieert. Dit artikel geeft je een compleet overzicht.
Hoe werkt het
Het thema-scherm openen
De thema-knop vind je in de editor, naast de Website instellingen-knop. Klik hierop om het thema-scherm te openen. Je ziet drie panelen: categorieën (links), preview (midden) en styling-opties (rechts).
Variabelen instellen
In de linker sidebar vind je de variabelen — dit zijn de basiswaarden die je hele website beïnvloeden:
Kleuren
Hier definieer je je kleurenpalet. De beschikbare kleurgroepen zijn: Primary (400/500/600), Secondary, Success, Danger, Neutral tinten (050–900), plus Zwart en Wit. Elke kleurgroep heeft een eigen rol — Primary is je hoofdkleur (voor knoppen en links), Neutral is voor achtergronden en randen, enzovoort.
Lettertypes
Configureer de fonts voor je website: het lettertype en gewicht voor Headings (koppen), Subheadings (subkoppen) en Text (lopende tekst). Je stelt hier ook de groottes in voor heading-niveaus H1 tot en met H6, plus de regelafstand per niveau.
Ruimtes
Stel de standaard afstanden in: Block spacing (ruimte tussen blokken), Container width (maximale breedte van content), Column spacing (ruimte tussen kolommen), Card spacing (ruimte binnen kaarten) en Element spacing (ruimte tussen elementen).
Lay-out stijlen
Onder Lay-out configureer je hoe de structuurcomponenten van je pagina eruitzien:
| Component | Wat je kunt instellen |
|---|---|
| Pagina's | Achtergrond, padding, maximale breedte |
| Blokken | Achtergrond, padding, marges |
| Containers | Breedte (standaard 1056px), uitlijning, padding, achtergrond |
| Rijen | Uitlijning verticaal/horizontaal, content terugloop, containertype, ruimtes |
| Kolommen | Padding, achtergrond, randen |
| Viewports | Responsive styling per schermgrootte |
Rijen — lay-outopties
Bij rijen kun je instellen hoe de content zich gedraagt:
| Instelling | Opties |
|---|---|
| Uitlijning verticaal | Uitvullen, Boven, Midden, Onder |
| Uitlijning horizontaal | Links, Midden, Rechts |
| Content terugloop | Aan/uit — bepaalt of kolommen naar een nieuwe regel gaan als ze niet passen |
| Containertype | Standaard (beperkte breedte) of Volledig (volledige pagina-breedte) |
Element stijlen
Onder Elementen vind je alle elementtypes die je op thema-niveau kunt stylen. Hier bepaal je hoe elk type element er standaard uitziet op je hele website:
Cards (kaarten)
Per locatie kun je kaarten apart stylen: Header card, Content card, Item card, Tegel card en Footer card. Zo zien kaarten in je header er anders uit dan in je footer, als je dat wilt.
Headings (koppen)
Ook koppen kun je per locatie instellen: Header heading, Content heading, Item heading, Footer heading en Zoekresultaat heading.
Teksten
Tekstelementen per locatie: Header tekst, Content teksten (intro + hoofdtekst), Item teksten (intro + hoofdtekst), Footer tekst en Zoekresultaat tekst.
Buttons (knoppen)
Er zijn drie knoptypes, elk met een standaard en alternatieve variant:
| Type | Stijl | Gebruik |
|---|---|---|
| Actie button | Filled (gevuld met kleur) | De belangrijkste actieknop, bijvoorbeeld "Bestel nu" |
| Bekijk button | Outlined (alleen rand) | Een subtielere knop, bijvoorbeeld "Meer info" |
| Lees meer button | Link-stijl (tekst met onderstreping) | Voor terugkerende "lees meer" links |
Controls (bedieningselementen)
Menu control (hamburger), Pijl control (navigatiepijlen), Bullet control (slide-indicatoren), Play control (media play/stop), Tijdlijn control en Paginering control.
Media
Logo media, Content media, Item media en Achtergrond media — elk met eigen styling.
Scheiders
Header scheider en Content scheider — horizontale lijnen om secties visueel te scheiden.
States en hover-effecten
Voor elk element kun je twee states instellen via de tabs bovenin het styling-paneel:
| State | Wanneer actief |
|---|---|
| Standaard | De normale weergave van het element |
| Mouseover | Hoe het element eruitziet als een bezoeker er met de muis overheen gaat |
Zo kun je bijvoorbeeld instellen dat een knop van kleur verandert bij hover, of dat een kaart een schaduw krijgt.
Kleurmodus (Licht/Donker)
Het thema ondersteunt kleurmodi. Per element kun je stijlen definiëren voor zowel de Licht- als de Donker-modus. De juiste stijl wordt automatisch toegepast op basis van de actieve kleurmodus van het blok.
Responsive instellingen
Bovenin het thema-scherm staan device-iconen voor Desktop, Tablet en Mobiel. Klik op een icoon om de preview te wisselen en stijlen per breakpoint aan te passen. Zo kun je op mobiel bijvoorbeeld een kleiner lettertype of andere afstanden gebruiken.
Stappenplan: element stijlen aanpassen
- Selecteer de element-categorie in de linker sidebar (bijv. Headings)
- Kies het specifieke elementtype in de preview
- Pas de styling aan in het rechter paneel:
- Ruimtes (margin, padding)
- Typografie (font, grootte, kleur)
- Overgangen (animaties)
- Test de hover state via de Mouseover-tab
- Controleer hoe het eruitziet op verschillende devices via de device-knoppen
Let op: Wat je hier instelt, geldt voor je hele website. Wil je een uitzondering voor één blok of element? Doe dat dan op blok- of elementniveau in de editor, niet in het thema.
Wanneer gebruik je dit
- Je wilt de visuele basis van je website configureren voordat je begint met bouwen
- Je zoekt een overzicht van alle beschikbare thema-opties
- Je wilt standaard stijlen instellen die automatisch op alle elementen worden toegepast