Klikken in design preview

In de design manager kun je het uiterlijk van je webshop aanpassen: kleuren, lettertypes, knoppen, formulieren en nog veel meer. Sinds een recente verbetering hoef je niet meer in lange lijsten te zoeken naar de juiste instelling. Klik gewoon op het element in de preview, en de juiste instellingen springen direct open in het zijpaneel.

Waar vind je het?

Ga naar Instellingen > Design. In het rechterdeel zie je een live preview van je webshop. Het linker- of zijpaneel toont de aanpasbare instellingen.

Hoe werkt het?

Een element via de preview aanpassen

  1. Ga naar Instellingen > Design.
  2. Beweeg met je muis over de preview rechts. Het element waar je overheen gaat krijgt een blauwe rand als hint dat je erop kunt klikken.
  3. Klik op het element dat je wilt aanpassen (bijvoorbeeld een knop, een titel of een prijs).
  4. Het zijpaneel scrollt automatisch naar de juiste instellingengroep en markeert deze kort.
  5. Pas de waardes aan (bijvoorbeeld kleur, lettertype of grootte).
  6. Klik op Sla wijzigingen op om je wijzigingen te bewaren.

De preview wordt direct bijgewerkt, dus je ziet meteen wat het effect is.

Aanpassen via het zijpaneel

Werkt liever via het zijpaneel? Dat kan nog steeds gewoon:

  1. Ga naar Instellingen > Design.
  2. Scroll in het zijpaneel naar de groep instellingen die je wilt aanpassen.
  3. Pas de waardes aan.
  4. Klik op Sla wijzigingen op .

Welke elementen zijn klikbaar?

Vrijwel alles wat je in de webshop ziet, is via de preview aan te passen:

  • Typografie: titels (h1 t/m h6), bodytekst, lettertype-families, lettergroottes en gewichten.
  • Kleuren: thema-kleuren, achtergronden, tekstkleuren, linkkleuren.
  • Knoppen: achtergrondkleur, tekstkleur, hover- en actieve staat.
  • Formulieren: invoervelden, labels, foutmeldingen.
  • Witruimtes: padding, marges, ruimtes tussen elementen.
  • Randen en schaduwen: ronde hoeken, lijndiktes, slagschaduwen.
  • Boxen en kaarten: containers waarin producten of blokken staan.
  • Afbeeldingen, badges, meldingen, dropdowns, tabellen en feature-blokken.

Hoe weet je of een element klikbaar is?

Beweeg je muis over een element in de preview:

  • Krijgt het element een blauwe rand rondom? Dan is het klikbaar en kun je de bijbehorende instellingen openen.
  • Krijgt het geen rand? Dan is dat element niet rechtstreeks aanpasbaar via de design manager (bijvoorbeeld vaste teksten of inhoud van blokken).

Veelgestelde vragen

De preview onderdrukt klikken op echte knoppen en links, om te voorkomen dat je per ongeluk wegklikt. In plaats daarvan opent het bijbehorende instellingenpaneel.

Werkt het paneel niet? Probeer:

  • De pagina opnieuw te laden.
  • Te controleren of het element écht een blauwe rand kreeg toen je eroverheen ging.
  • Een ander element in dezelfde sectie aan te klikken (sommige onderdelen delen instellingen).

Ja, voor specifieke interactieve elementen (zoals het uitklappen van het mobiele menu) is de klik gewoon actief. Zo kun je toch zien hoe een onderdeel eruitziet als het open of uitgeklapt staat.


De preview wordt direct bijgewerkt zodra je een waarde aanpast. Zie je geen verandering?

  • Sla je wijzigingen eerst op door op Sla wijzigingen op te klikken.
  • Vernieuw de preview met de pagina-reload-knop.
  • Controleer of je het juiste element hebt aangepast (in sommige gevallen heeft een element verschillende staten: normaal, hover, actief).

Nee. De design manager is voor het algemene uiterlijk van je webshop (kleuren, typografie, knoppen, formulieren). Wil je de inhoud of de instellingen van een blok aanpassen, ga dan naar de pagina-editor van die specifieke pagina.


Ja. De design manager bepaalt de basisstijl van je hele webshop. Als je bijvoorbeeld de kleur van een knop verandert, zie je dat op iedere pagina waar dat type knop voorkomt.

Tips

Begin met de basiskleuren

Stel eerst je hoofdkleuren in (primair, secundair, achtergrond). De rest van de webshop bouwt voort op die kleuren, dus je hebt direct een herkenbare uitstraling.


Gebruik de preview om te ontdekken

Klik gewoon ergens in de preview om te ontdekken welke instellingen er voor dat element bestaan. Het is een snelle manier om de mogelijkheden van de design manager te leren kennen.


Sla regelmatig op

Heb je veel wijzigingen gedaan? Sla regelmatig tussentijds op met Sla wijzigingen op . Zo voorkom je dat je werk verloren gaat als de pagina vernieuwt.


Controleer hover-effecten

Sommige elementen (zoals knoppen en links) hebben een aparte stijl als je er met de muis overheen gaat. Klik in de preview op het element en kijk in het zijpaneel of er een hover-staat beschikbaar is. Pas die afzonderlijk aan voor een verzorgde uitstraling.