De Designopties zijn het krachtige designpaneel waarmee je het uiterlijk van je webshop volledig zelf kunt vormgeven. Je vindt hier alles om je webshop een eigen identiteit te geven: van logo en kleuren tot lettertypes, footer en de modules op je homepagina. Alle wijzigingen zie je direct in de live preview, zodat je meteen ziet hoe je webshop eruit komt te zien.
Designopties openen
- Log in op je TSB beheeromgeving.
- Ga in het hoofdmenu naar Designopties.
- Het designpaneel opent met links de instellingen en rechts een live preview van je webshop.
Het designpaneel
Het designpaneel bestaat uit twee delen:
- Links zie je een zijpaneel met 9 tabbladen (Algemeen, Winkel, Header, Achtergrond, Kleuren, Lettertypes, Modules, Footer en CSS). Klik op een tabblad om dat onderdeel te openen en de instellingen aan te passen.
- Rechts zie je een live preview van je webshop. Zodra je een instelling wijzigt, wordt de preview direct bijgewerkt. Met de knoppen bovenaan kun je schakelen tussen desktop-, tablet- en mobielweergave.
Automatisch opslaan en publiceren
Alle wijzigingen die je maakt worden automatisch opgeslagen — je ziet linksboven de tekst “Alles opgeslagen” verschijnen. Om je aanpassingen daadwerkelijk live te zetten op je webshop klik je rechtsboven op de knop Publiceer.
De 9 onderdelen van de Designopties
Hieronder vind je uitgebreide uitleg over alle onderdelen van de Designopties. Klik op een onderwerp voor meer informatie:
- Algemeen — logo, favicon, zoekbalk, lay-out type en weergave op grote schermen.
- Winkel — webshopfuncties aan- of uitzetten (checkout, verlanglijst, cadeaubon, etc.) en productweergave.
- Header — sticky header varianten en achtergrondkleur van de header.
- Achtergrond — pagina-achtergrondkleur, afbeelding, positie en herhaalopties.
- Kleuren — alle kleurinstellingen: hoofdkleur, tekstkleuren, randen en meer.
- Lettertypes — fonts voor tekst, menu, titels, prijzen en knoppen.
- Modules — modules slepen naar de live preview om je pagina-indeling te bouwen.
- Footer — widgets (contact, social media, betaallogo’s) toevoegen aan de footer.
- Eigen CSS — extra aanpassingen via eigen CSS-code.
Tip voor beginners
Maak geen grote wijzigingen tegelijk. Begin bij Algemeen om je logo en favicon in te stellen, ga daarna naar Kleuren en Lettertypes voor de huisstijl, en bouw vervolgens je homepagina op via het tabblad Modules. Zo werk je stap voor stap en kun je elke wijziging direct beoordelen in de preview.
