---
title: Gebruik ontwerpmodus
description: Selecteer winkelvoorelementen en gebruik de visuele bewerkingsbesturingselementen van Runner veilig.
---

**Invoerpad:** Werkruimte → selecteer een winkel → **Winkel** → **Ontwerpmodus**

![Runner-winkelvoorbeeld en bediening](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## Wat deze gids behandelt

Open Ontwerpmodus op de nieuwste winkelversie, selecteer één zichtbaar element, maak een gecontroleerde wijziging en sla deze op als onderdeel van het huidige project.

## Waarom en wanneer u Ontwerpmodus gebruikt

Gebruik Ontwerpmodus voor gerichte visuele wijzigingen die gemakkelijker aan te wijzen zijn dan vanaf nul te beschrijven: herschrijf een kop, vervang een afbeelding, pas afstand aan, wijzig typografie of verwijder een zichtbaar element.

Gebruik Runner-chat voor breder werk dat meerdere pagina's omvat, winkelgedrag wijzigt of nieuwe functionaliteit vereist.

## Beschikbaarheid en vereisten

Ontwerpmodus is voorwaardelijk. Het is beschikbaar wanneer:

- u een desktopindeling gebruikt;
- de nieuwste winkelversie klaar is en geselecteerd;
- u geen oudere versie voorbeeldt;
- Runner verwerkt momenteel geen ander verzoek; en
- de functie Ontwerpmodus is ingeschakeld voor de werkruimte.

Als het voorbeeld nog steeds wordt voorbereid, een historische versie is geselecteerd of Runner werkt, kan de knop verborgen of uitgeschakeld zijn.

## Open Ontwerpmodus

1. Open uw project.
2. Selecteer **Winkel**.
3. Zorg ervoor dat het versieetiket **Huidige** zegt en het voorbeeld klaar is.
4. Selecteer **Ontwerpmodus** in de winkeltoolbalk.
5. Als een onderste bewerkingsbalk verschijnt met een ander **Ontwerpmodus** besturingselement, selecteer het om element-inspectie in te schakelen.
6. Beweeg over de winkel en selecteer het element dat u wilt wijzigen.

## Ontwerpmodus-besturingselementen

| Besturingselement | Waarom u het gebruikt | Wat gebeurt er wanneer u het selecteert |
| --- | --- | --- |
| **Ontwerpmodus** in de winkeltoolbalk | Voer de toegewijde bewerkingsweergave in. | Runner opent de huidige winkel in het ontwerpvenster. |
| **Ontwerpmodus** in de onderste balk | Schakel element-inspectie in of uit. | Wanneer ingeschakeld, worden selecteerbare elementen weergegeven en het selecteren van een element opent de bewerkingsbalk. Het uitschakelen wist de huidige bewerkingssessie. |
| **Vraag Runner AI** veld en verzendpijl | Beschrijf een wijziging voor het geselecteerde element. | Runner ontvangt de instructie met het geselecteerde element. Wanneer Runner begint, wist het de selectie en stelt de onopgeslagen directe bewerkingen en hun ongedaan maken/opnieuw uitvoeren-geschiedenis in. Sla dus eventuele directe bewerkingen op voordat u verzendt. |
| **Afstand** | Wijzig de ruimte binnen of rond het element. | Een venster opent voor horizontale en verticale marge en opvulling. |
| **Afbeelding** | Vervang een geselecteerde afbeelding of achtergrondafbeelding. | Een venster opent met **Uploaden** en **AI-gegenereerd** opties wanneer dat element media-bewerking ondersteunt. |
| **Tekst** | Wijzig typestijl. | Een venster opent voor tekengrootte, gewicht, familie, kleur, dekking en uitlijning wanneer ondersteund. |
| **Element verwijderen** | Verwijder het geselecteerde element uit de huidige bewerking. | Het element verdwijnt onmiddellijk in de editor. Gebruik **Ongedaan maken** als dit onopzettelijk was en controleer voordat u opslaat. |
| **Ongedaan maken** | Keer de nieuwste onopgeslagen visuele bewerking om. | Runner gaat achteruit door de huidige Ontwerpmodus bewerkingsgeschiedenis. |
| **Opnieuw** | Pas een bewerking die u zojuist ongedaan hebt gemaakt opnieuw toe. | Runner gaat vooruit door de huidige Ontwerpmodus bewerkingsgeschiedenis. |
| **Opslaan** | Houd de huidige visuele bewerkingen. | Runner schrijft de hangende wijzigingen, registreert een nieuwe versie-snapshot wanneer mogelijk, wist de ongedaan maken/opnieuw uitvoeren-geschiedenis van deze sessie en laadt het voorbeeld opnieuw. De knop is uitgeschakeld wanneer er niets op te slaan is. |
| **Sluiten** | Verlaat het toegewijde ontwerpvenster. | Runner keert terug naar normale winkelvoorbeelding en wist onopgeslagen bewerkingen en opdrachtgeschiedenis. Sla eerst op als u de wijzigingen wilt behouden. |

## Maak een veilige visuele wijziging

1. Navigeer naar de doelpagina in normale Voorbeeld voordat u Ontwerpmodus opent.
2. Voer Ontwerpmodus in en selecteer één element.
3. Kies één pad voor deze wijziging:
   - Voor een directe bewerking, gebruik **Afstand**, **Afbeelding**, **Tekst** of **Element verwijderen**, controleer het vervolgens met **Ongedaan maken** of **Opnieuw** en selecteer **Opslaan**.
   - Voor een AI-verzoek, sla eerst eventuele directe bewerkingen op, selecteer het element opnieuw indien nodig, voer de instructie in **Vraag Runner AI** in en verzend deze. Wanneer Runner begint, worden de selectie en onopgeslagen directe-bewerkingsgeschiedenis gewist.
4. Wacht tot de gekozen opslag of Runner-verzoek is voltooid en controleer vervolgens de pagina in normale Voorbeeld.
5. Controleer de pagina opnieuw in **PC**, **Tablet** en **Telefoon** indelingen.
6. Publiceer alleen nadat de opgeslagen voorbeeld uw beoordeling heeft doorstaan.

## Statussen, limieten en probleemoplossing

| Wat u ziet | Betekenis | Wat u moet doen |
| --- | --- | --- |
| **Ontwerpmodus starten…** | Runner bereidt de bewerkbare voorbeeld voor. | Houd de nieuwste versie geselecteerd. |
| **Ontwerpmodus is niet gestart** | De bewerkbare voorbeeld is niet gereed geworden. | Selecteer **Opnieuw proberen**. Als het zich herhaalt, ga terug naar normale Voorbeeld en vernieuw. |
| **Iframe wordt nog steeds geladen** | Element-inspectie is niet klaar. | Wacht tot de winkel klaar is met laden. |
| **Visuele editor uitgeschakeld terwijl AI verwerkt** | Runner verwerkt een ander verzoek. | Wacht tot het verzoek is voltooid en selecteer het element opnieuw. |
| Runner begint na een **Vraag Runner AI** verzoek | De visuele editor wordt opnieuw ingesteld voor de nieuwe taak. | Eventuele onopgeslagen directe bewerkingen en hun ongedaan maken/opnieuw uitvoeren-geschiedenis worden verwijderd. Sla directe bewerkingen op voordat u het verzoek verzendt. |
| **AI-bewerking niet beschikbaar voor dynamische inhoud** | De geselecteerde inhoud kan niet via dat besturingselement worden gewijzigd. | Beschrijf de pagina en het gewenste resultaat in normale Runner-chat. |
| **Niets om ongedaan te maken / opnieuw uit te voeren / op te slaan** | De huidige Ontwerpmodus-sessie heeft geen overeenkomende actie. | Selecteer eerst een bewerkbaar element en maak een wijziging. |
| **Opgeslagen wijzigingen in bronbestanden** | Runner voltooide de Ontwerpmodus-opslag. | Wacht tot het voorbeeld opnieuw wordt geladen en controleer de gewijzigde pagina opnieuw. |
| De bewerking is opgeslagen maar niet live | Het opslaan van wijzigingen werkt het project bij, niet de gepubliceerde winkel. | Controleer de huidige versie en selecteer vervolgens **Publiceer wijzigingen**. |

## Gerelateerde handleidingen

- [Bewerk inhoud, pagina's en media](./edit-content-pages-and-media)
- [Bekijk uw winkel](./preview-your-store)
- [Gebruik versiegeschiedenis](./version-history)