Visueel bewerken en voorbeeldweergave

Visueel bewerken werkt rechtstreeks in de App Viewer. Gebruik de werkbalk onder de voorbeeldweergave om elementen te selecteren, tekst te bewerken, afbeeldingen te vervangen, een thema toe te passen en een voorbeeld van je wijzigingen te bekijken voordat je publiceert.

Gebruik Select element voor door AI ondersteunde wijzigingen, Edit Text voor directe tekstwijzigingen en Theme voor globale stijlen zoals kleuren, lettertypen en effecten.

Hoe visueel bewerken werkt

Wanneer de AI-agents een taak voltooien, verschijnt de App Viewer bovenaan het project. De werkbalk voor visueel bewerken bevindt zich onder de voorbeeldweergave.

• Select element laat je een of meer elementen selecteren en de agents vragen deze aan te passen.
• Edit Text laat je tekst rechtstreeks in de voorbeeldweergave bewerken.
• Theme opent de themabediening voor globale stijlen.

De werkbalk kan worden ingeklapt wanneer je die niet nodig hebt.

Voordat je begint

Voordat je begint met bewerken, zorg ervoor dat:

• Je project een voltooide build heeft. De tools voor visueel bewerken zijn beschikbaar vanuit de App Viewer nadat de agents een taak hebben voltooid.
• Je weet dat wijzigingen niet live zijn totdat je publiceert. Je openbare URL blijft ongewijzigd totdat je de bijgewerkte versie publiceert.
• Je weet dat een thema alleen gedeelde stijlen bereikt. Elementen die met vaste waarden zijn gebouwd, behouden hun oude uiterlijk na een themawijziging. Zie Als een thema er niet goed uitziet hieronder.

Stel globale stijlen in met Theme

Een thema is het ontwerpsysteem van je project. Het definieert globale variabelen — paletten, typografie en afstand — die in je hele app worden toegepast, in plaats van instellingen op één element.

Theme gebruik je het best tijdens de voorbereidingsfase, voordat je begint met bouwen. Als je er vroeg een toepast, volgt alles wat de agents genereren het vanaf het begin.

Kies een thema

Selecteer Theme in de werkbalk onder de App Viewer. Het Theme-paneel bevat een veld Search Themes en groepeert thema's in secties:

• Current Theme — wat je project nu gebruikt. Voordat je iets toepast, staat er No theme applied yet, en de knop + ernaast maakt een nieuw thema.
• Featured Theme — 15 door ontwerpers samengestelde presets. Elk wordt getoond als een voorbeeld van een pagina die ermee is gebouwd, met de naam en een rij kleurstalen die het palet tonen. Deze kunnen niet worden verwijderd.
• Your Theme — thema's die je hebt gemaakt of aangepast. Deze kunnen worden hernoemd en verwijderd.

Elk thema verschijnt als een voorbeeld van een pagina die ermee is gebouwd, met de naam en een rij kleurstalen die het palet tonen, zodat je de richting kunt beoordelen voordat je het toepast.

Het tabblad Theme, met bovenaan een toegepast thema en daaronder je opgeslagen thema's.

Om er een toe te passen:

1. Selecteer het thema dat je wilt.
2. Atoms vraagt "Do you want to apply theme name?"
3. Selecteer Apply om te bevestigen, of Cancel om terug te gaan.
4. Controleer de voorbeeldweergave.

Verwacht resultaat: de voorbeeldweergave wordt bijgewerkt naar het thema dat je hebt gekozen, en het verschijnt nu onder Current Theme.

Opmerking: Als je niet-opgeslagen tekst- of afbeeldingswijzigingen hebt, vraagt Atoms je deze op te slaan of te verwerpen voordat je een nieuw thema toepast.

Werk een toegepast thema bij

Een stip op het tabblad Theme betekent dat er een nieuwere versie van je toegepaste thema beschikbaar is.

Om die te gebruiken, selecteer je Update op je huidige thema en bevestig je Do you want to re-apply theme name? Je project gebruikt dan de nieuwere versie.

Je hoeft niet bij te werken. Als je dat niet doet, blijft je project de versie gebruiken die je hebt toegepast.

Opmerking: Opmerking: Als je app er niet uitziet zoals het thema dat je hebt geselecteerd, kunnen afzonderlijke elementen stijlen hebben die het thema overschrijven. Die overschrijvingen zijn gericht op specifieke inhoud en blijven bestaan na een themawijziging.

Bouw of bewerk een thema in Theme Manager

Selecteer + naast Current Theme om er een helemaal opnieuw te bouwen, of open een bestaand thema om het te wijzigen. Beide openen Theme Manager, waar je een thema verfijnt met een live voorbeeldweergave.

De instellingen staan op drie tabbladen:

• Color — de kleurrollen die je app gebruikt, gegroepeerd op doel: Base Colors, Card, Popover, Primary, Secondary en meer. Elke rol heeft zijn eigen waarde, dus het wijzigen van Primary bereikt elk element dat deze gebruikt.
• Fonts — je lettertypen Serif, Sans-serif en Mono.
• Effects — hoek-Radius en een Shadow die je instelt met kleur, dekking, vervaging, spreiding en offset.

De voorbeeldweergave ernaast is opgebouwd uit echte componenten — aanmeldformulieren, knoppen, invoervelden, gewone tekst en monospace-tekst — zodat je een wijziging direct kunt beoordelen in plaats van te moeten gokken. Gebruik de schakelaar voor licht en donker eronder om beide te controleren, omdat een palet dat werkt op lichte oppervlakken contrast kan verliezen op donkere.

Onder de voorbeeldweergave heb je ook Undo en Redo om door je wijzigingen te stappen, en Reset om het thema terug te zetten naar het beginpunt.

Theme Manager. De voorbeeldweergave wordt bijgewerkt wanneer je een waarde wijzigt, en de bedieningselementen eronder omvatten ongedaan maken, opnieuw uitvoeren, exporteren, importeren en resetten.

Sla een thema op

1. Selecteer Save.
2. Geef het een Theme Name, of behoud de voorgestelde naam.
3. Selecteer Save om te bevestigen.

Verwacht resultaat: je thema verschijnt onder My Theme op het tabblad Theme, met het palet weergegeven als kleurstalen. Pas het op dezelfde manier toe als elk ander thema.

Opmerking: Bewerkingen worden niet bewaard totdat je ze opslaat. Atoms houdt je tegen en biedt aan om op te slaan of te verwerpen als je een ander thema probeert toe te passen terwijl er nog niet-opgeslagen wijzigingen zijn.

Hergebruik een thema in meerdere projecten

Theme Manager heeft Export en Import onder de voorbeeldweergave. Exporteer een thema naar een bestand en importeer het vervolgens in een ander project om dezelfde ontwerprichting te hergebruiken, of geef het aan een teamgenoot zodat diens project overeenkomt met het jouwe.

Als een thema er niet goed uitziet

Het toepassen van een thema is geen compatibiliteitscontrole, dus het mislukt normaal gesproken niet. Een thema vervangt de gedeelde stijlwaarden waarop je app is gebouwd, wat betekent dat elk thema in de kiezer meestal op elk project kan worden toegepast.

Wat je in plaats daarvan kunt zien, is een thema dat succesvol wordt toegepast maar niet alles bereikt. Hiervoor is geen foutmelding — het ziet er gewoon verkeerd uit.

Een deel van je app behoudt zijn oude uiterlijk. Dit is het meest voorkomende probleem. Een element dat een vaste waarde heeft gekregen, een specifieke kleur of lettertype dat er direct op is ingesteld, in plaats van een van de gedeelde stijlen van je app — kan niet worden bereikt door een themawijziging, dus het behoudt zijn vorige uiterlijk en kan botsen met alles eromheen. Selecteer het betreffende element en beschrijf de wijziging in de projectchat.

Tekst wordt moeilijk leesbaar. Een donker thema dat wordt toegepast op een lay-out die is ontworpen voor lichte oppervlakken, kan ervoor zorgen dat tekst te weinig contrast heeft. Pas de betreffende elementen aan in de Visuele Editor, of kies een thema dat dichter bij je bestaande ontwerp ligt.

Atoms vertelt je dat het thema niet kan worden toegepast. Dit komt zelden voor en betekent dat de interface van je project niet is gebouwd op het themasysteem van Atoms. Gebruik in plaats daarvan de Visuele Editor — alles is nog steeds element voor element mogelijk.

Belangrijk: Kies zo vroeg mogelijk een thema. Wanneer de agents bouwen met een thema dat al is toegepast, gebruiken ze vanaf het begin de gedeelde stijlen ervan, zodat minder elementen eindigen met vaste waarden die een latere themawijziging niet kan bereiken.

Bewerk elementen met Visuele Editor

1. Beweeg over de werkbalk voor visueel bewerken en selecteer Select element.
2. De werkbalk toont Click to select, Ctrl/Cmd + Click for multiple.
3. Selecteer een element in de voorbeeldweergave. Om meerdere elementen te selecteren, houd je Ctrl op Windows of Cmd op Mac ingedrukt tijdens het selecteren.
4. Je selecties worden toegevoegd aan de projectchat. De werkbalk toont het aantal geselecteerde items, zoals Edit 1 selection in chat window.
5. Beschrijf de wijziging die je wilt in de projectchat en verstuur je bericht.
6. Selecteer Select element opnieuw om de selectiemodus te verlaten.

Gebruik de projectchat voor wijzigingen zoals lay-out, kleuren, afstand, styling of wijzigingen die meerdere geselecteerde elementen beïnvloeden.

Bewerk tekst rechtstreeks

1. Selecteer Edit Text in de werkbalk onder de App Viewer.
2. Wanneer Click text content to edit verschijnt, selecteer je de tekst die je wilt wijzigen.
3. Bewerk de tekst rechtstreeks in de voorbeeldweergave.
4. Je kunt meerdere tekstelementen bewerken voordat je opslaat. De werkbalk toont het aantal openstaande bewerkingen, zoals 1 text change of 2 text changes.
5. Selecteer Save om alle openstaande tekstwijzigingen te behouden, of Discard om ze te verwijderen.

Je kunt ook dubbelklikken op tekst terwijl je Select element gebruikt om deze direct te gaan bewerken.

Sla je wijzigingen op of verwerp ze

Directe tekst- en afbeeldingswijzigingen worden pas toegepast nadat je ze hebt opgeslagen. Wanneer er wijzigingen openstaan, toont de werkbalk het aantal wijzigingen samen met Discard en Save.

• Save past alle openstaande directe bewerkingen toe.
• Discard verwijdert de openstaande bewerkingen en zet de betreffende elementen terug naar hun vorige staat.

Als je de bewerkingsmodus probeert te verlaten terwijl er nog wijzigingen openstaan, toont Atoms:

Niet-opgeslagen wijzigingen

Je hebt niet-opgeslagen wijzigingen. Sla wijzigingen op of verwerp ze voordat je de bewerkingsmodus verlaat.

Selecteer Cancel om door te gaan met bewerken of Discard om te vertrekken zonder de wijzigingen te behouden.

Opslaan werkt het werkproject bij. Het werkt de live site pas bij nadat je publiceert.

Vervang een afbeelding

1. Ga naar de modus Select element.
2. Selecteer de afbeelding die je wilt vervangen.
3. Kies een afbeelding uit de afbeeldingsbibliotheek, of gebruik de uploadbediening op de geselecteerde afbeelding.
4. Controleer de vervanging in de voorbeeldweergave.
5. Selecteer Save om de afbeeldingswijziging toe te passen, of Discard om deze te verwijderen.

Als je ook een instructie invoert in de projectchat, kunnen de afbeeldingsvervanging en de chatinstructie samen worden verzonden.

Het tabblad Library met afbeeldingscategorieën en Popular Images.

Waar de afbeeldingen vandaan komen

Image is de ingebouwde collectie. Gebruik Search assets voor iets specifieks, of blader door een categorie — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings en People, met More tags voor de rest. Door een categorie te selecteren, open je deze; gebruik de pijl terug om terug te keren. Popular Images hieronder toont een algemene selectie. Beweeg over een afbeelding en selecteer Use asset om deze toe te passen.

Generate maakt een nieuwe afbeelding op basis van een beschrijving en vereist een Pro- of Max-plan. Typ wat je wilt onder Describe the image you want to generate en selecteer Generate. Resultaten verschijnen onder het veld. Selecteer een voltooide miniatuur om deze op je element toe te passen.

Upload voegt je eigen bestand toe via slepen en neerzetten, plakken of klikken. Afbeeldingen kunnen in JPEG-, PNG-, GIF-, BMP-, TIFF- of WEBP-indeling zijn, tot 4 MB. Geüploade afbeeldingen verschijnen onder het neerzetgebied — selecteer er een om deze toe te passen.

Opmerking: Use asset verschijnt alleen op de ingebouwde afbeeldingen. Afbeeldingen die je genereert of uploadt, worden in plaats daarvan toegepast door hun miniatuur te selecteren.

Beschrijf wijzigingen in de chat

Nadat je een of meer elementen hebt geselecteerd met Select element, beschrijf je in de projectchat het resultaat dat je wilt.

Bijvoorbeeld:

• "Maak deze sectie rustiger, met meer witruimte en een kleinere kop."
• "Laat deze knoppen overeenkomen met de styling op de prijspagina."

Wees specifiek over het beoogde resultaat. Instructies zoals "maak het mooier" kunnen onvoorspelbare resultaten opleveren

Bekijk een voorbeeld van je wijzigingen

Gebruik de werkbalk boven de voorbeeldweergave:

• Device view — schakel tussen schermformaten om responsiviteit te testen. Thema- en typografiewijzigingen die er goed uitzien op desktop, gaan vaak mis op mobiel, dus controleer mobiel altijd voordat je publiceert.
• Page selector — ga tussen de pagina's van je app heen en weer.
• Refresh — laad de voorbeeldweergave opnieuw als deze verouderd lijkt.
• Open in a new tab — bekijk de app op volledige breedte in een apart browsertabblad.
• Console — open het logpaneel wanneer iets er niet goed uitziet.

Verwacht resultaat: je wijzigingen zijn zichtbaar op elke pagina en bij elke apparaatbreedte die je wilt ondersteunen.

Herstel van een probleem met de voorbeeldweergave

Als de voorbeeldweergave verouderd lijkt, blijft laden of rode fouten toont, kan het probleem bij de App Viewer liggen in plaats van bij je visuele bewerkingen. Zie Problemen oplossen bij build en preview voor de stappen voor probleemoplossing — Refresh, het paneel Console, Resolve en hoe je een fout meldt die blijft bestaan.

Als het lijkt alsof je directe tekst- of afbeeldingsbewerkingen zijn verdwenen, controleer dan of je ze hebt opgeslagen. Niet-opgeslagen wijzigingen kunnen worden verworpen wanneer je de bewerkingsmodus verlaat — zie Sla je wijzigingen op of verwerp ze.

Publiceer je wijzigingen

Visuele bewerkingen blijven in je werkproject totdat je publiceert. Selecteer Publish in de rechterbovenhoek, of Update als het project al live is.

Opmerking: Als je project Specify Versie gebruikt in plaats van Always Latest, blijft de live site vergrendeld op de versie die je hebt gekozen, en je ontwerpwijzigingen verschijnen niet openbaar totdat je een nieuwe versie publiceert.

Voor de fouten die de agents tijdens een build melden, zie Probleemrapport.