Je AI-design in WordPress zetten

Je hebt een ontwerp uit Claude Design of Google Stitch, en je site draait op WordPress. De snelste gedachte is de HTML in een blok te plakken. Dat ziet er even goed uit en wordt daarna onbeheerbaar. Hieronder staat waarom, en drie manieren om het ontwerp na te bouwen, met de stappen en een voorbeeld per route.

Herken je dit?

Geplakte HTML is in WordPress een vreemd lichaam

WordPress bouwt een pagina uit blokken en een thema. Het blok Aangepaste HTML laat je code zien zoals hij is, maar de rest van WordPress werkt eromheen. De CSS van je thema geldt ook voor jouw HTML, dus koppen, knoppen en marges krijgen dubbele regels. Gebruikt de export Tailwind-klassen, dan ontbreekt de CSS die daarbij hoort. Scripts haalt WordPress er afhankelijk van de rol van de gebruiker uit, en dan werkt het menu niet.

Het grootste verlies zie je pas later. De tekst in een HTML-blok is code. Je collega kan hem niet als tekst bewerken, en elke pagina is een losse kopie. Daarmee mis je precies waarvoor je WordPress gebruikt: zelf pagina’s aanpassen.

Nabouwen kan op drie manieren

Kies de route die past bij hoeveel je wilt veranderen en wie de site bijhoudt.

Route 1: een eigen blokthema

De nette route als het hele uiterlijk verandert. Een blokthema legt kleuren, lettertypes en afstanden vast in één bestand, theme.json. Header en footer zijn template parts, terugkerende secties patronen.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "merk", "name": "Merk", "color": "#2b4c7e" },
        { "slug": "inkt", "name": "Inkt", "color": "#1a1a1a" },
        { "slug": "wit", "name": "Wit", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontFamilies": [
        { "slug": "kop", "name": "Kop", "fontFamily": "Archivo, sans-serif" }
      ]
    },
    "spacing": {
      "spacingSizes": [
        { "slug": "s", "name": "Klein", "size": "1rem" },
        { "slug": "l", "name": "Groot", "size": "3rem" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Laat je een AI-tool het omzetten, geef dan het doel precies op. Anders krijg je een thema dat de HTML in één blok zet.

Zet de HTML in export/ om naar een WordPress-blokthema.
- Kleuren, lettertypes en afstanden in theme.json (version 3), niet in losse CSS.
- Header en footer als template parts in parts/.
- Elke sectie van de homepage als patroon in patterns/, opgebouwd uit core-blokken.
- Geen eigen JavaScript voor het menu: gebruik het Navigatie-blok.
- Teksten in de blokken, zodat ze in de editor te bewerken zijn.

Route 2: patronen in je huidige thema

Past je huidige thema in grote lijnen, en wil je vooral een paar pagina’s vernieuwen, dan hoef je niet te wisselen. Zet de kleuren en lettertypes uit het ontwerp in de Site-editor onder Stijlen. Bouw de nieuwe secties na met standaardblokken. Bewaar een sectie die op meer pagina’s terugkomt als gesynchroniseerd patroon: pas je hem op één plek aan, dan verandert hij overal.

Route 3: de pagebuilder die je al hebt

Werk je al met een pagebuilder als Elementor, bouw het ontwerp daar dan na. Zet eerst de kleuren en lettertypes in de globale instellingen van de builder, zodat je ze niet per element invult. Weet wel wat je kiest: de pagina’s blijven afhankelijk van die plugin, en wisselen betekent later opnieuw bouwen. Controleer de mobiele weergave per sectie; een builder heeft daar aparte instellingen voor.

WordPress vraagt beheer, welk thema je ook kiest

WordPress draait op PHP. Het thema, de plugins, WordPress zelf en de PHP-versie op de server moeten bijblijven. Dat er in oktober 2026 een lek in PHP zelf zat, raakte elke site die op PHP draait, niet alleen WordPress. Voor PHP 8.2 stoppen de beveiligingsupdates op 31 december 2026. Hoe minder plugins je ombouw nodig heeft, hoe minder er bij te houden valt. Wat doorlopend beheer inhoudt, staat bij WordPress onderhoud en beveiliging.

Veelgemaakte fouten

Wanneer je hulp nodig hebt

Loop je vast in het thema of in een plugin, dan helpen we per uur, ook bij WordPress: hulp bij je website. Hoeft het geen WordPress te zijn, dan kunnen we je AI-design omzetten naar een site zonder PHP op de server, met een eigen beheeromgeving. Wat er nog meer bij een AI-ontwerp komt kijken, staat in de gidsen over design.