AI Studio: Visual Edits

Leer hoe je Visual Edits in AI Studio kunt gebruiken om je project direct vanuit de live preview te verfijnen. Je leert hoe je in Visual Edit modus komt en bewerkbare elementen selecteert. Je ziet ook hoe je tekst, afbeeldingen, iconen, kleuren, spacing en layouts kunt bijwerken.

INHOUDSOPGAVE

Wat zijn Visual Edits in AI Studio

Visual Edits in AI Studio stelt je in staat om je AI-project direct vanuit de live preview te verfijnen nadat het is gegenereerd. Je kunt in tekst klikken, pagina-elementen selecteren, stijlinstellingen bijwerken of een gerichte prompt gebruiken om veranderingen aan specifieke delen van de pagina aan te brengen.

Deze functie is handig wanneer je AI-gegenereerde site bijna af is, maar je nog steeds de teksten, spacing, kleuren, knoppen, afbeeldingen, iconen of lay-out wilt verfijnen. Wijzigingen worden eerst in de live preview getoond, en niets wordt op het project toegepast totdat je het opslaat.

Opmerking: The AI model is only invoked when you explicitly send a prompt. Direct visual changes made through the editing controls do not require AI generation or consume tokens.

Belangrijke Voordelen van Visual Edits in AI Studio

  • Directe Pagina-bewerking: Klik op elementen in de preview en werk ze bij zonder de Code-editor te openen of AI te gebruiken.

  • Snellere Tekstupdates: Dubbelklik op tekst en typ direct op de pagina voor snelle inhoudswijzigingen.

  • Gerichte Promptwijzigingen: Selecteer een element (of elementen) en beschrijf de wijziging die je wilt toepassen.

  • Geen Tokengebruik voor Directe Bewerking: Wijzigingen die via directe visuele controles worden aangebracht, verbruiken geen AI-tokens.

  • Preview voordat je opslaat: Bekijk updates in de live preview voordat je ze op het project toepast.

Welke Elementen Kunnen Worden Bewerkt

Visual Edits ondersteunt de meest voorkomende pagina-elementen die gebruikt worden bij het verfijnen van een site. De beschikbare controles veranderen op basis van het geselecteerde element, zodat het bewerkingspaneel alleen opties toont die relevant zijn voor hetgeen je hebt geklikt.

Bewerkbare elementen zijn:

  • Koppen en Tekst: Update teksten, typografie, uitlijning, tekstkleur en stijl.

  • Knoppen: Verander labels, knopstijl, knoppentype, spacing en kleuren.

  • Afbeeldingen: Update afbeeldingsbron, afbeeldingsfit en alt-tekst.

  • Iconen: Wissel iconen en pas icon-grootte of styling aan.

  • Containers en secties: Pas spacing, randen, schaduwen, achtergronden en lay-outstyling aan.

Hoe Visual Edit Modus In Te Gaan

Visual Edit modus wordt ingeschakeld vanuit de AI Studio builder. Zodra het is ingeschakeld, wordt de preview interactief zodat je tekst, afbeeldingen, knoppen, iconen, containers en andere ondersteunde elementen kunt selecteren.

Om in Visual Edit modus te komen:

  1. Open AI Studio en klik in het project dat je wilt bijwerken.

  2. Klik op Visual Edits in het promptgebied links onderaan de builder.

  3. Klik op een element in de preview om te beginnen met bewerken.

Hoe Visual Edits Aan Te Brengen

Visual Edits biedt je verschillende manieren om een pagina bij te werken nadat je in Visual Edit modus bent gegaan. Je kunt elementen selecteren om contextuele controles te openen, tekst direct op de pagina bewerken, iconen wisselen, kleuren en spacing aanpassen, afbeeldingslay-out beheersen, iconen opnieuw schalen of prompts gebruiken over meerdere geselecteerde elementen.

Click to Select to Open Visual Controls

Klik op een element in de preview om het Visual Edits-paneel te openen. De controles passen zich automatisch aan op basis van wat je hebt geselecteerd, zoals tekst, knoppen, afbeeldingen, iconen, containers of lay-out elementen. Dit stelt je in staat om gerichte wijzigingen aan te brengen zonder door de projectcode te zoeken.

Kleur- en spacingcontroles zijn beschikbaar vanuit het Visual Edits-paneel wanneer ze van toepassing zijn op het geselecteerde element. De themakleuren van je project verschijnen naast het volledige Tailwind palet. Margin- en paddingcontroles verschijnen ook, zodat je de spacing kunt beheren.

Edit Text Inline

Inline tekstbewerking is het beste voor snelle tekstwijzigingen. Dubbelklik op een textelement en typ direct op de pagina om wijzigingen aan te brengen.

Update Icons

Iconencontroles maken het makkelijk om Lucide-iconen te vervangen of te schalen zonder de code te bewerken. Wanneer je een Lucide-pictogram selecteert, kun je een doorzoekbare bibliotheek van 1.600+ iconen openen en een vervanging kiezen die direct zonder herladen wordt gewisseld. Je kunt ook geselecteerde Lucide-iconen opnieuw schalen.

Adjust Image Layout

Afbeeldingscontroles helpen je om zowel de gebruikte afbeelding als hoe deze in het toegewezen gebied verschijnt te updaten. Wanneer je een afbeelding selecteert, kun je de afbeeldings-URL wijzigen om de afbeelding te vervangen, de alt-tekst bijwerken en de Lay-out dropdown gebruiken om het visuele resultaat te kiezen dat je wilt.

Use Prompts on Selected Elements

Promptbewerking stelt je in staat om een of meer elementen te selecteren en de wijziging die je wilt aanbrengen te beschrijven. Gebruik dit wanneer je een specifiek element in gewone taal wilt bijwerken of een gecoördineerde wijziging wilt toepassen over meerdere geselecteerde elementen.

Voor een enkel element is promptbewerking handig voor wijzigingen zoals het moderner maken van een geselecteerde sectie, het verbeteren van de spacing in een container, het verzachten van een knopstijl of het beter laten overeenkomen van een component met de rest van de pagina.

Voor meerdere elementen is het nuttig voor het toepassen van consistente styling over herhaalde componenten, zoals overeenkomende knopstijlen, het uitlijnen van spacing tussen containers, het bijwerken van herhaalde kaarten of kolommen, of het toepassen van dezelfde kleur op een groep geselecteerde elementen.

Opslaan of Afwijzen van Visual Edits

Visual Edits gebruikt een preview-eerst workflow zodat je wijzigingen kunt bekijken voordat je ze op het project toepast. Dit helpt om onbedoelde updates te voorkomen en geeft je de ruimte om verschillende stijlen of inhoudswijzigingen te testen.

Klik op Opslaan om de wijziging op het project toe te passen. Als je de visuele bewerkingsmodus verlaat zonder op te slaan, worden je wijzigingen ver discarded.

Als een wijziging het verkeerde element beïnvloedt, een ongewenste stijl creëert of niet overeenkomt met je bedoelde ontwerp, klik dan op Verwerpen om niet-opgeslagen wijzigingen te verwijderen en terug te keren naar de vorige versie.

Veelgestelde Vragen

Q: Moet ik een instelling inschakelen voordat ik Visual Edits gebruik?

Nee. Open een AI Studio-project en klik op Visual Edits in het beneden linker promptgebied van de builder om met bewerken te beginnen.

Q: Gebruikt Visual Edits AI-tokens?

Directe visuele bewerkingen gebruiken geen AI-tokens omdat de wijzigingen worden aangebracht via bewerkingscontroles in plaats van AI-gegenereerde prompts.

Q: Kan ik een prompt gebruiken op een specifiek geselecteerd element?

Ja. Selecteer het element dat je wilt wijzigen en voer een gerichte instructie in het Visual Edits promptgebied in.

Q: Kan ik meer dan één element tegelijk bewerken?

Ja. Multi-select bewerking kan worden gebruikt voor gecoördineerde updates zoals consistente spacing, gedeelde styling of herhaalde lay-out verfijningen.

Heeft dit je vraag beantwoord? Bedankt voor de feedback! Er was een probleem bij het versturen van je feedback. Probeer later nog eens.

Gerelateerde artikelen