Je huisstijl instellen in Webey

Een consistente huisstijl is de basis van een professionele website. In Webey stel je je merkkleuren, lettertypen en logo centraal in en worden deze automatisch toegepast op je hele website. In dit artikel leer je hoe je de huisstijlinstellingen optimaal configureert.

De huisstijlinstellingen openen

Je vindt de huisstijlinstellingen in je dashboard onder Site-instellingen (of Brand). Hier beheer je alle visuele aspecten van je website: kleuren, lettertypen en je logo. Wijzigingen die je hier maakt, worden direct doorgevoerd op alle pagina's van je site.

Primaire kleur instellen

De primaire kleur is de hoofdkleur van je website en wordt gebruikt voor knoppen, links, actieve menu-items en accenten. De standaardwaarde in Webey is brand-navy, een donkerblauw dat professioneel en betrouwbaar oogt. Je kunt deze kleur aanpassen naar elke gewenste tint via de kleurkiezer of door een hex-code in te voeren.

De primaire kleur wordt automatisch toegepast op:

• De achtergrondkleur van primaire knoppen
• Links in tekst
• Actieve en hover-states in het navigatiemenu
• Selectie- en focusindicatoren in formulieren
• Iconen en accenten in blokken zoals features en stats

Accentkleur instellen

De accentkleur is een secundaire kleur die wordt gebruikt voor visuele variatie en om specifieke elementen te laten opvallen. De standaardwaarde is brand-orange, een warm oranje dat goed contrasteert met de donkerblauwe primaire kleur. De accentkleur verschijnt in secundaire knoppen, badges, highlights en decoratieve elementen.

Kleuren kiezen die bij je merk passen

Bij het kiezen van je kleuren zijn er een paar principes waar je op kunt letten:

• Contrast — zorg dat je primaire en accentkleur voldoende van elkaar verschillen. Een donkere primaire kleur combineert goed met een heldere accentkleur.
• Leesbaarheid — tekst op gekleurde achtergronden moet altijd goed leesbaar zijn. Webey past automatisch de tekstkleur aan (wit of donker) op basis van het contrast.
• Merkherkenning — gebruik de kleuren uit je bestaande huisstijl. Als je al een logo, visitekaartjes of social media-kanalen hebt, gebruik dezelfde kleuren op je website.
• Beperkt palet — twee tot drie kleuren zijn voldoende. Te veel kleuren maken je website rommelig en onprofessioneel.

Lettertypen instellen

Webey biedt twee lettertype-instellingen die bepalen hoe tekst op je website eruitziet:

• Koppen-lettertype (heading font) — het lettertype voor alle koppen (h1 t/m h6). Een krachtig, opvallend lettertype werkt goed voor koppen. Populaire keuzes zijn sans-serif lettertypen zoals Inter, Poppins of Montserrat.
• Broodtekst-lettertype (body font) — het lettertype voor alineatekst, lijsten en andere lopende tekst. Kies een goed leesbaar lettertype. Schreefletter (serif) en schreefloze (sans-serif) lettertypen werken beide prima, afhankelijk van de uitstraling die je zoekt.

Een veelgebruikte combinatie is een opvallend sans-serif voor koppen en een rustig, goed leesbaar lettertype voor broodtekst. Je kunt ook hetzelfde lettertype gebruiken voor beide als je een uniforme uitstraling wilt.

Logo uploaden

Upload je logo via de huisstijlinstellingen. Je logo verschijnt in de header van je website en optioneel in de footer. Webey ondersteunt PNG, JPG, SVG en WebP formaten. Tips voor je logo:

• Gebruik bij voorkeur een SVG of transparante PNG zodat je logo er goed uitziet op elke achtergrondkleur
• Zorg dat het logo niet te groot is — een breedte van 150-250 pixels werkt goed in de header
• Heb je een donker logo? Overweeg ook een lichte variant te uploaden voor gebruik op donkere achtergronden

Hoe huisstijlinstellingen worden toegepast

Alle huisstijlinstellingen worden als CSS-variabelen doorgevoerd op je website. Dit betekent dat elke wijziging in je kleuren of lettertypen automatisch wordt toegepast op alle pagina's en blokken. Je hoeft niet handmatig per blok of pagina je kleuren aan te passen — het systeem regelt dit centraal.

De blokken in Webey zijn ontworpen om je huisstijl te respecteren. Knoppen gebruiken je primaire kleur, koppen gebruiken je heading-lettertype, en de algehele uitstraling is consistent over je hele website.

Dark mode ondersteuning

Webey ondersteunt dark mode. Als je dark mode inschakelt, worden de achtergrondkleuren omgekeerd naar donkere tinten en wordt tekst licht gekleurd. Je primaire en accentkleuren blijven behouden maar worden automatisch aangepast voor optimaal contrast op donkere achtergronden. Dark mode is een mooie optie voor technische websites, portfolio's of bedrijven die een moderne uitstraling willen.

Knopstijlen

De stijl van knoppen op je website wordt bepaald door je huisstijlinstellingen. Primaire knoppen gebruiken je primaire kleur als achtergrond met witte tekst. Secundaire knoppen hebben een transparante achtergrond met een rand in je primaire kleur. De border-radius (hoekafronding) van knoppen kun je aanpassen van scherpe hoeken tot volledig afgerond, afhankelijk van de stijl die je nastreeft.

Tips voor een consistente uitstraling

• Documenteer je kleuren — noteer de hex-codes van je primaire en accentkleur zodat je ze ook buiten Webey kunt gebruiken
• Test op meerdere schermen — bekijk je website op desktop, tablet en telefoon om te controleren of je kleuren en lettertypen overal goed werken
• Wees spaarzaam met kleurgebruik — gebruik je accentkleur alleen voor elementen die je wilt benadrukken
• Controleer het contrast — zorg dat tekst altijd voldoende contrasteert met de achtergrond voor goede leesbaarheid
• Houd het simpel — een consistente, ingetogen huisstijl oogt professioneler dan een overload aan kleuren en lettertypen

Door je huisstijl zorgvuldig in te stellen in Webey, bouw je een website die er professioneel en herkenbaar uitziet — op elke pagina en op elk apparaat.