Stijl & kleuren

Hier bepaal je in één keer de uitstraling van je hele site. Alle blokken, knoppen en koppen nemen deze stijl automatisch over, zodat alles bij elkaar past.

Opslaan en live voorbeeld

Op een breed scherm zie je rechts een Live voorbeeld van je homepage. Je keuzes zie je daar meteen, maar ze staan pas op je site als je onderaan op Stijl & kleuren opslaan klikt. Die knop blijft onderin beeld staan. Alleen de favicon, eigen lettertypes en eigen kleurthema's worden direct bewaard.

Kleurenschema

Je werkt met een schema van vijf kleuren. Klik op Ander thema kiezen voor een kant-en-klaar kleurthema, of stel je eigen kleuren in met de vijf kleurkiezers (je kunt ook een kleurcode als #0081A7 intypen). Met Bewaar deze kleuren als eigen thema geef je je combinatie een naam; je vindt hem daarna bovenaan bij Mijn thema's in het themavenster, waar je hem ook weer kunt verwijderen. Je kunt maximaal 12 eigen thema's bewaren; bewaar je er meer, dan valt het oudste af. De sitebuilder zorgt er automatisch voor dat tekst op een gekleurde achtergrond altijd goed leesbaar blijft.

Fijnafstelling

Onder het kleurenschema staat het ingeklapte kopje Fijnafstelling. Voor de meeste sites hoef je hier niets te veranderen; de standaard volgt je kleurenschema. Je vindt er drie dingen:

Accentkleuren in webshop & blog

Heb je een webshop of blog? Dan kies je hier welke van je vijf kleuren die modules gebruiken. Je stelt twee dingen apart in: één kleur voor Knoppen & actieve onderdelen, en één kleur voor Prijzen & tekstaccent. De tekst blijft automatisch goed leesbaar, maar een wat donkerder kleur laat knoppen en prijzen het best opvallen.

Automatische blokachtergrond

Blokken op Automatisch (om en om) (de standaard) wisselen om en om wit en een lichte kleurtint af. Met de rij tint-knoppen kies je welke van je kleuren die tint wordt, en met de schuif eronder maak je alle tinten sterker of zachter.

Volle huisstijlkleuren ook als blokachtergrond

Wil je ook een gewoon blok in een volle kleur uit je schema kunnen zetten? Vink dan Volle huisstijlkleuren ook als blokachtergrond aan. In de werkbalk van elk blok in de pagina-editor staan dan naast wit en de tinten ook je vijf kleuren zelf. De tekst blijft automatisch leesbaar, maar lichte tinten ogen meestal rustiger. Standaard staat dit uit.

Typografie

• Lettertype tekst: het lettertype van je lopende tekst. Klik op Wijzigen om er een te kiezen; je ziet meteen een voorbeeld.
• Tekstgrootte: Klein, Normaal of Groot. De koppen schalen automatisch mee.
• Lettertype voor titels (H1, H2, H3): een apart lettertype voor je koppen, of Zelfde als tekst.
• Paginatitel (H1): hoe groot de titel bovenaan een pagina wordt: Standaard of XL paginatitel voor een extra opvallende kop.
• Sectietitels (H2): de grootte van de koppen boven je blokken: Standaard of Groot. Groot geeft je site opvallende koppen, zoals je die op veel moderne websites ziet.
• Dikte van de koppen: Vet (de standaard) of Medium. Medium geeft rustigere, lichtere koppen en staat mooi samen met Sectietitels Groot.

Onder de keuzes zie je een voorbeeld van een paginatitel, sectietitel, ondertitel en lopende tekst in jouw instellingen.

In de keuzelijst staan deze standaard lettertypes: Inter, DM Sans, Figtree, Outfit, Plus Jakarta Sans, Rubik, Quicksand, Lato, Nunito, Nunito Sans, Open Sans, Poppins, Raleway, Roboto, Work Sans, Ubuntu, Merriweather, Playfair Display, Lora, Montserrat, Josefin Sans en Dancing Script. Elk ander Google-lettertype (bijvoorbeeld Sora, Newsreader, Bricolage Grotesque of Libre Franklin) voeg je zelf toe als eigen lettertype, zie hieronder. Het lettertype van het menu in de header kies je bij Header: dat is je teksttype of je titeltype.

Eigen lettertype toevoegen

Zit het lettertype dat je zoekt er niet bij? Klik dan onder Eigen lettertype toevoegen op Bladeren door Google Fonts. Je bladert door de complete Google Fonts-bibliotheek en kiest er een uit; die wordt automatisch gedownload, op je eigen site gehost (dus zonder verbinding met Google voor je bezoekers) en bovenaan je keuzelijst gezet, onder Eigen lettertypes. Weet je precies welke je wilt, klap dan Of typ zelf een naam open, typ de naam (bijvoorbeeld Pacifico) en klik op Toevoegen. Je kunt maximaal 5 eigen lettertypes hebben; met het kruisje haal je er een weg.

Hoeken & schaduw van afbeeldingen

Kies bij Hoeken of foto's Afgerond of Scherp zijn. Bij Schaduw zet je de schaduw onder afbeeldingen voor de hele site aan of uit: Met schaduw of Zonder schaduw. Standaard zijn de hoeken afgerond, met een lichte schaduw. Je ziet een voorbeeldfoto meteen meeveranderen.

Favicon

De favicon is het kleine icoontje dat in het tabblad van de browser verschijnt. Klik op Afbeelding uploaden en kies bij voorkeur een vierkante afbeelding (JPG, PNG, GIF, WebP of BMP, tot 5 MB). GO! maakt er automatisch een icoon van 192 bij 192 pixels van en bewaart hem meteen. Google gebruikt hetzelfde icoon naast je site in de zoekresultaten; het kan wel even duren voordat Google het nieuwe icoon toont. Met Verwijderen haal je de favicon weg.

Licht of donker

Bij Licht of donker kies je de basis van je hele site. Licht is de standaard: witte achtergrond met donkere letters. Kies je Donker, dan wordt je site zwart met witte letters. Foto's en kunstwerken komen daar vaak extra goed op uit. Blokken in een volle kleur uit je schema blijven als accent in die kleur. Header en footer krijgen bij donker altijd een donkere kleur: kies je daar een lichte kleur, dan worden ze zwart. Je ziet het nieuwe thema op je site zodra je hebt opgeslagen.

Ruimte op de pagina

Kies hoeveel witruimte er boven en onder elk blok zit: Standaard (rustig en luchtig) of Compact (meer op één scherm). Je klikt op het miniatuurtje dat je het mooist vindt. De keuze geldt voor alle blokken én voor je modulepagina's (webshop, blog, galerij, agenda, gastenboek en links), zodat je hele site dezelfde uitstraling houdt. De header verandert niet mee.

Vloeiende animaties bij scrollen

Zet het vinkje Animaties aanzetten aan en je site krijgt een levendig, modern gevoel. Zodra een bezoeker naar beneden scrolt, groeien de blokken rustig in beeld: tekst, foto's en kaarten verschijnen één voor één. De grote foto bovenaan, de header en de footer blijven stil staan. De animaties staan standaard uit.

Je pagina's laden er niet trager door. Bezoekers die op hun telefoon of computer "minder beweging" hebben ingesteld, zien je site gewoon zonder animaties.

Knoppen onderaan op de mobiele website (smartphone)

Op een telefoon staan deze knoppen onderin beeld, op elke pagina. Elke knop heeft een eigen schakelaar Aan/Uit; het voorbeeld laat meteen zien hoe het wordt.

• Knop 1 (bellen): je telefoonnummer en de tekst op de knop (leeg = "Bel ons").
• Knop 2: de tekst op de knop, en bij Gaat naar waar hij heen gaat: je Contactpagina, WhatsApp (vul je nummer in, de knop wordt groen), een Pagina van je site (bijvoorbeeld een pagina met een eigen formulier) of een Link naar een ander webadres.