Ontwerp & thema

De sectie Ontwerp & thema is waar je bepaalt hoe je website eruitziet (de kleuren, lettertypen, ruimte tussen elementen en de algehele visuele stijl) zonder dat je code hoeft te schrijven of een designer hoeft in te huren. Elke SitePack-website is gebouwd op een thema, dat functioneert als een kant-en-klare outfit voor je site: een professioneel ontworpen startpunt dat er al goed uitziet, en dat je vervolgens kunt aanpassen aan je eigen merk.

Deze handleiding legt uit wat een thema is, hoe je naar een ander thema overschakelt, en hoe je de details (kleuren, lettertypen en indeling) van het thema dat je gebruikt verfijnt.

De sectie Ontwerp bevat ook drie contenttools die op je hele website terugkomen:

• Topbalk: de dunne balk helemaal bovenaan je site, met je USP's en contactgegevens of één aankondigingsregel.
• USP's: je centrale lijst met verkoopargumenten (gratis verzending, snelle levering, eenvoudig retourneren) die je site overal hergebruikt, ook in de topbalk.
• Footer: het blok onderaan elke pagina, opgebouwd met elementen die je versleept, inclusief een categoriemenu dat de hoofdcategorieën van je winkel automatisch toont.

Thema's begrijpen

Een thema bepaalt de algehele indeling en visuele identiteit van je website: waar het menu staat, hoe productoverzichten zijn ingedeeld, hoe je knoppen eruitzien, en meer. Omdat elk SitePack-thema is gebouwd om samen te werken met de content- en winkelfuncties van het platform, kun je tussen thema's wisselen zonder je pagina's, producten of content te verliezen. Alleen de visuele weergave verandert.

Je huidige thema bekijken

In het themaconfiguratievak zie je belangrijke informatie over het thema dat je site momenteel gebruikt:

• Themanaam: De naam van het actieve thema.
• Versie: Het huidige versienummer van het thema. Themaontwikkelaars brengen af en toe updates uit met verbeteringen of bugfixes, en dit vertelt je welke versie jouw site gebruikt.
• Ontwikkelaar: De SitePack Partner (een zelfstandige designer of bureau) die het thema heeft gebouwd en onderhoudt.

Je thema wijzigen

Als je een andere algehele uitstraling voor je website wilt, zit je niet vast aan je oorspronkelijke keuze. Klik op de knop Thema wijzigen om het tabblad thema's van de Marketplace te openen. Daar staan alle thema's die zijn beoordeeld en goedgekeurd voor SitePack.

Elk thema staat op een kaart met een screenshot, de naam van de partner die het heeft gebouwd, een korte omschrijving en de prijs. Het thema dat je site nu gebruikt staat vooraan, met het label Huidig thema en een knop Aanpassen die je terugbrengt naar de thema-instellingen.

Zo stap je over op een ander thema:

1. Rondkijken: klik op een kaart om de details te openen, met alle screenshots, een uitgebreidere omschrijving en de belangrijkste functies.
2. Klik op Activeren: gebruik de knop Activeren op de kaart of in het detailvenster.
3. Bevestigen: SitePack vraagt je de wissel te bevestigen. Daarna staat het nieuwe thema direct live op je website.

Als je een nieuw thema activeert, begint het met zijn eigen kleuren en ontwerpinstellingen. Je merkkleur en je lettertypen worden meegenomen, zodat de site nog steeds als die van jou aanvoelt. Je pagina's, blogposts, producten en bestellingen blijven precies zoals ze zijn. Daarna kun je het nieuwe thema verder verfijnen onder Ontwerp & thema, zoals hieronder beschreven.

Als een thema niet geactiveerd kan worden

Soms staat de knop Activeren op slot. Ga er met je muis op staan, of open de details van het thema, om te zien waarom:

• Je website gebruikt een maatwerkthema: als een partner een thema speciaal voor jouw website heeft gebouwd, kun je niet naar een ander thema overstappen. Zo blijft het werk aan je maatwerkontwerp beschermd. Een melding bovenaan de themapagina legt dit uit. Neem contact op met je webbouwer als je iets aan je ontwerp wilt laten veranderen.
• Betaald thema: premium thema's kun je nog niet vanuit de admin activeren. Neem contact op met support als je interesse hebt in zo'n thema.
• Geen ondersteuning voor een webshop: als je website een webshop is, kun je geen thema activeren dat geen webshop ondersteunt, omdat je productpagina's en checkout dan niet meer werken.

Ontwerpelementen aanpassen

Naast het kiezen van een thema laat SitePack je specifieke visuele details van dat thema direct verfijnen. Geen CSS of code nodig. Deze opties bevinden zich in dezelfde sectie Ontwerp & thema en worden direct op je hele website toegepast.

Kleuren

Elk thema definieert een kleine set kernkleuren (meestal primair, secundair en achtergrond) die consistent op je hele site worden hergebruikt, voor knoppen, koppen, achtergronden en accenten. Als je ze hier wijzigt, wordt de uitstraling van je hele website in één keer bijgewerkt, zodat alles visueel consistent blijft.

1. Selecteer een kleur: Klik op het gekleurde vierkantje naast de instelling die je wilt wijzigen om een visuele kleurkiezer te openen.
2. Voer een hexcode in (optioneel): Als je merk een specifieke kleur heeft, zoals een kleur uit je logo, kun je de hexcode direct intypen (bijvoorbeeld #1e3346) in plaats van de kleurkiezer te gebruiken. Een hexcode is simpelweg een korte, precieze manier om een exacte kleur te beschrijven die designers en drukkerijen gebruiken. Je webdesigner of logobestand kan deze meestal aanleveren.

Tip: Weet je niet zeker welke kleuren je moet kiezen, kijk dan naar je logo of bestaand marketingmateriaal en probeer de primaire kleur te matchen met de hoofdkleur van je merk voor een samenhangende uitstraling.

Lettertypen & typografie

Typografie (de lettertypen en tekststijl die op je hele site worden gebruikt) heeft een grote invloed op hoe professioneel en leesbaar je website aanvoelt.

• Lettertypeselectie: Kies uit een samengestelde lijst met websafe lettertypen en Google Fonts, een grote gratis bibliotheek met lettertypen die snel laden en consistent worden weergegeven op elk apparaat en elke browser.
• Tekstdecoratie: Pas stijldetails aan voor specifieke tekstelementen, zoals het onderstrepen van links of het toevoegen van een doorhaaleffect waar toepasselijk.

Tip: Beperk je tot één of twee lettertypen voor je hele site, bijvoorbeeld één voor koppen en één voor lopende tekst. Te veel verschillende lettertypen gebruiken kan een website rommelig en onprofessioneel laten aanvoelen.

Indeling & afmetingen

Verfijn het structurele gevoel van je website met eenvoudige schuifregelaars:

• Randradius: Bepaalt hoe afgerond de hoeken van knoppen, kaarten en vakken eruitzien. Een hogere waarde geeft een zachtere, modernere uitstraling, terwijl een lagere waarde scherpe, traditionele hoeken creëert.
• Containerbreedte: Past de maximale breedte van het hoofdcontentgebied van je site aan, en bepaalt hoeveel lege ruimte er aan de zijkanten van je content verschijnt op grote schermen.

Omdat dit schuifregelaars zijn in plaats van codevelden, kun je vrij experimenteren en het effect direct zien, totdat de indeling goed aanvoelt voor jouw merk.

Themabugs melden

Als je een visuele fout opmerkt, bijvoorbeeld elementen die overlappen of een knop die verkeerd wordt weergegeven, kun je de link Bug melden in de sectie Ontwerp & thema gebruiken om de ontwikkelaar van het thema hiervan direct op de hoogte te stellen. Omdat thema's worden gebouwd en onderhouden door SitePack Partners (zie Partners: Thema's maken), zorgt het rechtstreeks doorsturen van de melding ervoor dat de oplossing zo snel mogelijk bij de juiste mensen terechtkomt.

Veelgestelde vragen

Verwijdert het wijzigen van mijn thema mijn pagina's of producten?

Nee. Je content (pagina's, blogposts, producten en bestellingen) wordt los van je thema opgeslagen. Het wisselen van thema verandert alleen hoe die content wordt weergegeven, niet de content zelf.

Heb ik ontwerpervaring nodig om mijn website aan te passen?

Nee. Alle aanpassingstools in deze sectie (kleurkiezers, lettertype-dropdowns en schuifregelaars) zijn gemaakt voor mensen zonder designachtergrond. Je hoeft geen CSS, HTML of andere code te kennen om te veranderen hoe je site eruitziet.

Wat is een hexcode en moet ik er een gebruiken?

Een hexcode is een korte code (zoals #1e3346) die een exacte kleur weergeeft. Het is volledig optioneel. Je kunt net zo goed op de kleurkiezer klikken en visueel kiezen. Hexcodes zijn vooral nuttig als je een heel specifieke merkkleur exact wilt matchen.

Kan ik een nieuw thema bekijken voordat ik ernaar overschakel?

Ja. In de Marketplace, die je opent via de knop Thema wijzigen, heeft elk thema screenshots. Klik op een thema om ze allemaal te zien, samen met de omschrijving en functies, voordat je het op je live site activeert.

Waarom kan ik niet naar een ander thema overstappen?

Waarschijnlijk draait je website op een maatwerkthema dat een partner speciaal voor jou heeft gebouwd. Om dat werk te beschermen staat thema wisselen uit voor deze websites. Neem contact op met je webbouwer als je iets wilt laten veranderen. Een thema kan ook op slot staan omdat het een betaald thema is, of omdat het geen webshop ondersteunt terwijl jouw website er wel een is.

Houd ik mijn kleuren als ik van thema wissel?

Gedeeltelijk. Het nieuwe thema begint met zijn eigen kleuren en ontwerpinstellingen, maar je merkkleur en je lettertypen worden meegenomen. Je kunt alles daarna aanpassen onder Ontwerp & thema.

Wat moet ik doen als ik een visuele bug in mijn thema vind?

Gebruik de link Bug melden in de sectie Ontwerp & thema. Dit stuurt je melding rechtstreeks naar de ontwikkelaar die verantwoordelijk is voor het onderhoud van dat thema.

Wie maakt SitePack-thema's?

Thema's worden ontworpen en onderhouden door SitePack Partners, zelfstandige designers en bureaus die zowel gratis als premium thema's bouwen voor de Thema Marketplace. Je kunt meer lezen over hoe thema's worden gebouwd in de handleiding Partners: Thema's maken.