Het uiterlijk van je website wijzigen: stijl, kleuren, lettertypen en logo

Bijgewerkt

Het uiterlijk van je website stel je in in het paneel Stijl van de editor: een basisstijl, een paar lettertypen, je eigen kleuren, de vorm van de foto’s en de witruimte. Elke wijziging verschijnt meteen in het voorbeeld, en je bezoekers zien haar na je volgende publicatie. Je logo en het kleine pictogram in het browsertabblad staan in Website-instellingen.

Het paneel Stijl openen

  1. Open in de editor het menu … in de balk bovenaan.
  2. Klik op Stijl.

Elke wijziging wordt vanzelf opgeslagen en verschijnt direct in het voorbeeld: je hoeft niet op Bijwerken te klikken. Elke wijziging is ook een versie, dus de pijl voor ongedaan maken en Versies werken zoals bij elke andere bewerking.

Je hebt een eerste stijl gekozen toen je de website aanmaakte. Hier kun je die op elk moment wijzigen.

Het paneel Stijl: basisstijlen, lettertypen en kleuren

De 4 basisstijlen

Onder Basisstijl bepaalt elke kaart de kleuren en lettertypen van de hele site.

StijlKleurenLettertypen
Leisteenwitte achtergrond, diep blauwgroene knoppen en linksElegant
Kustgebroken witte achtergrond, zeeblauwKlassiek
Plattelandwarme crèmekleurige achtergrond, olijfgroen en okerWarm
Stadsloftlichtgrijze achtergrond, baksteenrood, bijna zwarte tekstModern

De lettertypen en kleuren die je zelf kiest (hieronder), blijven behouden als je naar een andere basisstijl overstapt. Zo kun je de vier stijlen uitproberen zonder je merkkleur kwijt te raken.

Lettertypen

Elk paar Lettertypen heeft één lettertype voor titels en één voor de tekst:

  • Elegant: Gilda Display voor titels, Hanken Grotesk voor tekst
  • Klassiek: Playfair Display en Source Sans 3
  • Warm: Lora en Nunito Sans
  • Modern: Manrope en Inter

Klik op een paar om het te gebruiken. Om terug te gaan naar de lettertypen van je basisstijl, klik je op Lettertypen van de stijl gebruiken.

Op een site in het Russisch is Elegant grijs met Niet beschikbaar in het Russisch: die lettertypen hebben geen Russische letters. Pagina’s in het Chinees gebruiken de Chinese lettertypen van het apparaat van de bezoeker.

Er is geen instelling voor de grootte van de tekst.

Je eigen kleuren

Onder Kleuren kun je drie kleuren van de stijl vervangen:

  • Hoofdkleur (knoppen en links)
  • Achtergrond
  • Tekst
  1. Klik op het kleurvakje om een kleur te kiezen, of typ de code in het veld ernaast (bijvoorbeeld #1d6a85) en druk op Enter.
  2. Bekijk het voorbeeld onder de kleuren: een knop Boeken en Een link laten zien hoe ze eruit zullen zien.
  3. Om je kleuren te laten vallen en terug te gaan naar die van de stijl, klik je op Kleuren van de stijl gebruiken.

Eén set kleuren geldt voor de hele site: een blok kan geen eigen kleuren hebben, en er is geen donkere versie van de site.

Heeft je website een logo, dan toont Kleuren uit je logo tot 3 kleuren die erin zijn gevonden. Klik op een ervan om er je hoofdkleur van te maken. Wit, zwart en grijstinten worden genegeerd, dus bij een zwart-wit logo zie je “Geen kleur gevonden in je logo.”

Hoe Nowistay je kleuren leesbaar houdt

Sommige kleuren zijn op een website slecht leesbaar, bijvoorbeeld een lichtgele knop met witte tekst. Nowistay past ze voor je aan:

  • Knoppen houden je hoofdkleur. Is die te licht om af te steken tegen de achtergrond, dan maakt Nowistay haar net genoeg donkerder. De tekst op de knop is wit of donker, wat het best leest.
  • Links gebruiken zo nodig een donkerdere tint van je hoofdkleur, zodat ze leesbaar zijn op de achtergrond.
  • De achtergrond blijft altijd licht, en de tekst blijft donker genoeg om te lezen.

Past Nowistay een van je kleuren aan, dan meldt het paneel: “Aangepast zodat alles leesbaar blijft: links gebruiken een donkerdere tint van je kleur, achtergronden blijven licht en tekst donker genoeg.”

Voorbeeld: je verhuurt een villa aan zee, Villa Azur, en je logo is een lichtgele zon. In Kleuren uit je logo klik je op het geel. In het voorbeeld worden de knoppen iets dieper geel met donkere tekst, en de links een donkerdere tint van hetzelfde geel, terwijl de achtergrond licht blijft. Wil je krachtigere knoppen, typ dan zelf een dieper geel in Hoofdkleur (knoppen en links).

Vorm en witruimte

Onder Vormen en witruimte:

  • Vorm van de foto’s: Vierkant, Licht afgerond (licht afgeronde hoeken) of Boog (afgeronde bovenkant). Dit wijzigt de foto’s van de hoofdbanner en van de accommodatiekaarten.
  • Witruimte: Ruim laat meer ruimte tussen de delen van elke pagina, Standaard zet ze dichter bij elkaar.

Logo en pictogram

Het logo en het pictogram stel je in bij de website-instellingen.

  1. Open het menu … en dan Website-instellingen.
  2. Klik in Identiteit van de website, onder Logo, op Uploaden en kies je bestand. Gebruik Vervangen of Verwijderen om het later te wijzigen.
  3. Klik onder Pictogram op Uploaden en kies een vierkante afbeelding.
LogoPictogram
Waar het verschijntbovenaan elke pagina en in de voettekstin het browsertabblad, en als afbeelding wanneer iemand je site aan het startscherm van een telefoon toevoegt
BestandPNG, JPEG of WebP, tot 2 MB, minstens 200 px breedeen vierkante PNG, JPEG of WebP, minstens 512 × 512 px, tot 2 MB
Zonderde naam van je website wordt geschreven in het lettertype van de titelsgeen eigen pictogram in het tabblad

De bovenkant van je pagina’s heeft altijd een lichte achtergrond, dus gebruik de versie van je logo die gemaakt is voor lichte achtergronden (een wit logo zou niet zichtbaar zijn). Beide zijn optioneel.

Meer over de andere instellingen in Website-instellingen: naam, contactgegevens, accommodaties en Google.

Vraag het liever de AI

De AI kan de basisstijl, lettertypen, kleuren, vorm van de foto’s en witruimte voor je wijzigen. Bijvoorbeeld:

  • “Gebruik de stijl Platteland met foto’s in boogvorm.”
  • “Maak de hoofdkleur het blauw van onze luiken, iets donkerder.”

Het logo en het pictogram kan de AI niet wijzigen. Zie Je website bewerken met AI.

Het nieuwe uiterlijk online zetten

Het voorbeeld toont je nieuwe uiterlijk meteen. Om het op een klein scherm te controleren, klik je op het pictogram Telefoon in de balk van de editor.

Je bezoekers zien het nadat je hebt gepubliceerd: klik op Publiceren en dan op Wijzigingen publiceren. Daarna neemt ook de boekingskalender op je site je kleuren en lettertypen over. Zie Je website publiceren en wijzigingen online zetten.

Klaar om je verhuur op de automatische piloot te zetten?

Sluit je aan bij meer dan 1.000 verhuurbeheerders die elke week uren besparen met AI-gestuurde gastcommunicatie.