Zelf teksten aanpassen in je AI-website

In een AI-website staat de tekst in de code, dus elke wijziging is een prompt of een codewijziging. Haal de teksten uit de componenten en zet ze in eigen bestanden, en zet daar een bewerkscherm op: een CMS dat die bestanden aanpast, of een headless CMS met een eigen database. Bewerken wordt daarmee makkelijk; de velden, de rechten en het opnieuw bouwen van de site vragen wel onderhoud.

Damian Madronal Munoz, oprichter

Bijgewerkt op 30 oktober 20265 min leestijd

Je AI-website staat online en je wilt de openingstijden aanpassen. Dat betekent nu een prompt schrijven, wachten en controleren of de rest van de pagina nog klopt. Hieronder staat waarom dat zo werkt, welke drie manieren er zijn om teksten bewerkbaar te maken, hoe je begint met de tool die je al gebruikt, en wat het daarna aan onderhoud vraagt.

Herken je dit?

Een openingstijd wijzigen kost een prompt en tien minuten nakijken.
Je vraagt om één andere zin en de tool past ook de kop en de knop aan.
Een collega die geen prompts schrijft, kan niets veranderen.
Je weet niet in welk bestand een tekst staat.
Elke nieuwe vacature of elk nieuw project is een pagina die je laat genereren.

In een AI-site zit de tekst in de code

Een AI-builder schrijft de tekst rechtstreeks in de componenten: <h1>Warmtepompen geplaatst en onderhouden</h1> staat in hetzelfde bestand als de opmaak eromheen. Tekst en vorm zijn één ding. Een tekst veranderen is daarom de code veranderen.

Vraag je het de tool, dan schrijft die het bestand opnieuw. Wat je niet vroeg, kan daarbij ook veranderen; waarom, staat in AI past meer aan dan je vraagt. De oplossing is de tekst los te halen van de vorm. De componenten bepalen hoe iets eruitziet, en lezen de woorden uit een plek die iemand anders mag aanpassen.

Drie manieren om teksten bewerkbaar te maken

Teksten in eigen bestanden

De eenvoudigste stap. Alle teksten van een pagina staan in één bestand, en de pagina leest ze daaruit.

# content/home.yml
hero:
  titel: Warmtepompen geplaatst en onderhouden
  tekst: Binnen een week een offerte, ook voor bestaande woningen.
openingstijden:
  - dagen: maandag tot en met vrijdag
    tijden: 08.00 tot 17.00 uur
  - dagen: zaterdag
    tijden: op afspraak

Een contentbestand voor de homepage. De component toont hero.titel, de opmaak staat ergens anders.

Aanpassen doe je in dat bestand, bijvoorbeeld in de webeditor van GitHub. Dat vraagt geen extra dienst, wel iemand die niet schrikt van een bestand met inspringingen.

Een git-CMS bovenop die bestanden

Een git-CMS zet een formulier op die bestanden. Je ziet velden in plaats van YAML, en elke keer dat je publiceert, schrijft het CMS een commit: een opgeslagen wijziging in de code. Daarna wordt de site opnieuw gebouwd. Decap CMS, TinaCMS en Nuxt Studio werken zo. Op naltex.nl bewerken we alle teksten in Nuxt Studio. Elke publicatie is een commit, en een paar minuten later staat de wijziging live.

Een headless CMS met een eigen database

Sanity, Storyblok en Contentful bewaren je inhoud in hun eigen omgeving. De site haalt hem op bij het bouwen. Dat past als meer mensen schrijven, als je berichten wilt inplannen of als je in meer talen publiceert. Je hebt dan wel een extra account en abonnement, en je gegevens staan bij een andere partij. Kijk waar die dat doet; AI-tools, de AVG en hosting zet de vragen op een rij.

Wil je pagina’s zelf kunnen maken in een compleet systeem, dan is WordPress ook een route. Hoe je een AI-ontwerp daarin krijgt, staat in je AI-design in WordPress zetten.

Zo begin je met de tool die je al gebruikt

1. Schrijf op wat je zelf wilt aanpassen

Niet alles. Teksten, openingstijden, prijzen, foto’s en blogberichten wel. De opbouw van een pagina blijft code, zodat niemand per ongeluk het ontwerp verbouwt.

2. Laat de teksten uit de componenten halen

Geef je AI-tool een opdracht die alleen de woorden verplaatst en de vorm met rust laat.

Haal alle zichtbare teksten uit de componenten van deze site.
- Zet ze per pagina in content/<pagina>.yml, in de volgorde van de pagina.
- Laat de componenten de tekst uit die bestanden lezen.
- Verander niets aan opmaak, klassen of volgorde van elementen.
- Zet bij afbeeldingen het pad en de alt-tekst ook in het bestand.
- Geef een lijst van teksten die je niet kon verplaatsen, met het bestand erbij.

Een opdracht die teksten uit de componenten haalt zonder de opmaak te veranderen.

3. Zoek wat er nog in de code staat

Een tool vergeet altijd wel een tekst: een knop, een foutmelding, de footer. Zoek ze op.

grep -rnE ">[A-Z][a-z]+ [a-z]+" src/components src/pages

Vindt regels waar tekst tussen tags staat die met een hoofdletter begint; pas de mappen aan je project aan.

4. Laat iemand testen die geen code schrijft

Zet er een git-CMS of headless CMS op en vraag een collega de openingstijden te wijzigen, zonder uitleg. Lukt dat in een paar minuten, dan is het af.

Bewerken wordt makkelijk, bewerkbaar houden kost werk

Krijgt de site een nieuwe sectie, dan moet iemand er velden voor aanmaken. Dat is werk in de code. Je beslist wie mag publiceren, en wie alleen een concept mag maken. En een site die vooraf wordt gebouwd, moet na elke publicatie opnieuw gebouwd worden; bij een headless CMS regel je dat met een webhook, een seintje dat het CMS bij publiceren naar je hosting stuurt. Op deze site faalt de build als een veld niet klopt, en blijft de vorige versie online. Zo komt een fout nooit live.

Veelgemaakte fouten

Alles bewerkbaar maken. Kleuren, marges en de volgorde van secties in het CMS zetten lijkt flexibel. Na een halfjaar lijkt de site niet meer op het ontwerp.
Een headless CMS zonder koppeling met de build. Je publiceert, en er verandert niets, omdat de site niet opnieuw is gebouwd.
Alleen de zichtbare tekst verplaatsen. De titel en beschrijving voor Google en de alt-teksten blijven dan in de code, en raken achter.
De AI-tool laten doorbouwen zonder dat hij van het CMS weet. De volgende prompt zet nieuwe tekst weer in een component. Zet in je instructiebestand voor de tool dat alle teksten in content/ staan.

Wanneer je hulp nodig hebt

Bouwen wij je site om, dan komt er een beheeromgeving bij waarin je teksten, foto’s en blogberichten zelf aanpast; dat staat bij een AI-ontwerp laten omzetten naar een echte website. Is het één wijziging die nu moet, dan helpt hulp bij je website je per uur. De rest van de weg van ontwerp naar site staat in onze designgidsen.

Veelgestelde vragen⁠

Kan ik niet gewoon de AI-tool blijven gebruiken voor tekstwijzigingen?

Voor af en toe een zin kan dat. Controleer dan na elke wijziging de hele pagina, niet alleen die zin. Is het wekelijks werk, of doet een collega het, dan is een bewerkscherm sneller.

Wat kost een CMS?

Een git-CMS als Decap CMS of Nuxt Studio is open source en draait op je eigen hosting. Headless diensten werken met abonnementen die per aanbieder verschillen. Reken in alle gevallen op de tijd om het in te richten.

Kan ik ook foto’s vervangen?

Ja, als de afbeelding een veld is: het bestand en de alt-tekst staan dan in de inhoud, niet in de code. Let op de grootte. Een foto van je telefoon is veel groter dan een pagina nodig heeft.

Kan ik dan ook nieuwe pagina’s maken?

Van een soort die al bestaat wel, zoals een blogbericht of een project, als daar een template voor is. Een nieuw soort pagina met een eigen opbouw blijft werk in de code.

Verder lezen⁠

Design omzetten naar website: Je ontwerp uit Claude Design, Google Stitch, Figma Make of een screenshot wordt een website die snel laadt, gevonden wordt en die je zelf bijhoudt.
AI-website niet in Google: Je site uit Lovable, Bolt, v0 of Claude Code staat niet in Google. Vaak krijgt een zoekmachine een lege pagina. Wij zorgen dat elke pagina als HTML klaarstaat.
AI-design laten verbeteren: Een review van je AI-site met de fixes erbij: de AI-patronen eruit, consistentie, typografie, mobiel en toegankelijkheid. Vaste prijs na een blik op je site.
Claude Design naar website: De HTML-export of de overdracht aan Claude Code, en wat je daarna nog regelt: beheer, een formulier, SEO per pagina en hosting.
Stitch naar website: Exporteren naar Figma of naar HTML met Tailwind, DESIGN.md meenemen, en bouwen wat Stitch niet maakt: alles achter de schermen.
HTML-export online zetten: Statische hosting, je eigen domein, HTTPS, een contactformulier dat echt mailt en bezoekers meten met een cookiemelding.
AI-design in WordPress: Waarom HTML plakken niet werkt, en hoe je het ontwerp nabouwt: als eigen blokthema, met patronen in je huidige thema of in een pagebuilder.
AI-design in Framer of Webflow: Importeren via Figma of de browserextensie, nabouwen met componenten en variabelen, en terugkerende inhoud in CMS-collecties.
Kapot op mobiel: Vaste breedtes, koppen die van het scherm lopen, menu’s die alleen op hover werken en een pagina die zijwaarts schuift: zo test en repareer je het.
Inconsistent AI-design: Elke pagina een ander grijs, elke knop een andere hoek: waarom een AI-tool per scherm nieuwe waarden kiest, en wat je ertegen doet.
DESIGN.md maken: Eén bestand met je kleuren, typografie, afstanden, componenten en verboden patronen, dat je designtool en je codeer-agent bij elke opdracht lezen.
Design tokens voor AI: Kleuren, lettergroottes, afstanden en afrondingen als benoemde variabelen in je code, zodat een AI-tool kiest uit jouw set in plaats van zelf waarden te verzinnen.
Huisstijl in AI-design: Je logo als SVG, de kleurwaarden uit je huisstijlhandboek en de echte fontbestanden aanleveren, en daarna controleren waar de tool toch afweek.
AI verandert te veel: Je vraagt een andere knopkleur en de hele sectie verschuift. Waarom dat gebeurt, en hoe je met afbakening, versiebeheer en vaste componenten alleen verandert wat je bedoelt.
AI-designtools vergeleken: Wat Claude Design, Google Stitch en Figma Make kunnen, wat ze kosten, wat je eruit exporteert en waar je vastloopt als het een echte website moet worden.
Toegankelijk AI-design: Lichtgrijze tekst, verdwenen focusranden, lege alt-teksten en menu’s die niet met het toetsenbord werken: zo vind en repareer je ze in een AI-design.
Haperende scroll-animaties: Blokken die bij het scrollen invliegen, haperen op een telefoon of laten de pagina verspringen. Waarom, en hoe je ze met CSS en een paar regels JavaScript licht maakt.
AI-website herkennen: Acht keuzes die een AI-tool maakt als niemand iets anders vraagt, en per keuze waar hij vandaan komt.
Minder generiek maken: Zes ingrepen die een AI-website uit het gemiddelde halen, in de volgorde waarin ze het meeste doen.
Designprompt zonder AI-look: De acht onderdelen van een prompt die een AI-designtool keuzes geeft in plaats van ruimte voor zijn standaard.
AI-teksten herkennen: Typische Nederlandse AI-zinnen, waarom ze zo klinken en hoe je ze herschrijft, met voorbeelden voor en na.
Lettertype kiezen: Waarom AI standaard Inter kiest, hoe je zelf een combinatie kiest, en hoe je die met de juiste licentie snel en zelf gehost op je site zet.
AI-afbeeldingen: Waarom gegenereerde beelden je site goedkoop laten ogen, wat je in plaats daarvan doet, en wanneer je moet melden dat een beeld met AI is gemaakt.

Wij maken je teksten bewerkbaar⁠

De kennismaking is gratis. We reageren binnen één werkdag.

Plan een kennismaking Bel direct