Studio Two-editor: Custom CSS toevoegen
Dit artikel verwijst naar de nieuwe Studio Two-editor, die in november 2026 is uitgebracht. Als je niet zeker weet of je de Studio Editor of de Studio Two-editor gebruikt, lees dan hier meer.
Custom CSS is een opmaaktaal die bepaalt hoe elementen eruitzien op een website. Met CSS kun je aspecten zoals kleuren, afstand, randen, animaties en aanwijseffecten aanpassen.
In de Studio Two-editor kun je AI gebruiken om CSS voor elk element te genereren door het gewenste effect in duidelijke taal te beschrijven. Dit artikel behandelt hoe je CSS kunt genereren met AI en wat je kunt doen als het resultaat moet worden aangepast.
Custom CSS is van toepassing op het specifieke element dat je selecteert. Om een stijl toe te passen op alle elementen van hetzelfde type (bijvoorbeeld: elke primaire knop op je website), gebruik je in plaats daarvan gestylede elementen.
AI gebruiken om CSS aan een element toe te voegen
Beschrijf het effect dat je wilt, en Aria genereert de CSS-code voor je. Het resultaat wordt onmiddellijk toegepast op het element, zodat je het op het canvas kunt zien.
Beschrijf 1 effect tegelijk. Combineer niet meerdere wijzigingen in één prompt, omdat de kans groter is om de uitvoer te verwarren.
Voeg indien relevant de status toe; bijvoorbeeld: 'bij aanwijzen' 'wanneer de pagina wordt geladen', 'indien geselecteerd'.
Wees specifiek. In plaats van 'laat de knop opvallen', probeer 'een dikke rode rand toe te voegen rond de knop bij het aanwijzen'.
Om CSS met AI te genereren:
Klik op het element dat je wilt opmaken:
Scrol in het Inspector-paneel rechts omlaag naar Custom CSS en klik op + Toevoegen.
Klik in het Custom CSS-paneel op het CSS-code met AI genereren-veld en typ een beschrijving van het gewenste effect (bijvoorbeeld: 'voeg een gloeiende blauwe rand toe bij het aanwijzen').
Klik op Enter.
De CSS wordt gegenereerd en toegepast op het element op het canvas. Er verschijnt onder het veld een Stijloverzicht met een beschrijving in eenvoudige taal van wat de code doet.
Problemen met je CSS oplossen
Als het AI-resultaat er niet uitziet zoals je verwachtte, zijn er twee dingen die je kunt proberen om het te verbeteren: herschrijf je prompt of bewerk de code rechtstreeks.
Om je prompt te herschrijven:
Wis in het CSS-code met AI genereren-veld je vorige prompt en typ een nieuwe beschrijving.
Klik op Enter. De nieuwe CSS vervangt het vorige resultaat op het canvas.
Om de CSS handmatig te bewerken:
Als het AI-resultaten dichtbij maar niet helemaal gelijk is, kun je de code rechtstreeks wijzigen zonder opnieuw te beginnen.
Klik in het Custom CSS-paneel op CSS handmatig bewerken.
Werk de code bij in de Custom CSS-editor.
Klik op Opslaan.
Veelgestelde vragen
Klik op een vraag hieronder om meer te lezen over Custom CSS.