CMS Les 3: Afbeeldingen aanpassen op je website

Vervang eenvoudig bestaande afbeeldingen en geef je website een persoonlijke uitstraling

Deze les is onderdeel van de handleiding: Webbuilder: Het CMS voor uw website uitgelegd in 5 stappen

Vorige > CMS Webbuilder Les 2: Het toevoegen van tekst op pagina's

Je website is al gevuld met zorgvuldig gekozen afbeeldingen door ons onboarding-team. Denk aan foto’s van kamers, ontbijt, faciliteiten of de omgeving. In deze les leer je hoe je deze afbeeldingen eenvoudig zelf kunt vervangen en beheren met de Smarthotel Editor.

Je hebt geen technische kennis nodig — gewoon klikken en vervangen.

De meeste afbeeldingen staan al op je website

Je hoeft je pagina’s niet vanaf nul op te bouwen. Alle belangrijke visuele elementen — zoals headers, galerijen, of blokken met afbeelding en tekst — zijn al toegevoegd. Je hoeft alleen maar op een bestaande afbeelding te klikken om deze te vervangen.

Er zijn grofweg twee soorten afbeeldingen:

• Header- of achtergrondafbeeldingen – vaak bovenaan een pagina

• Afbeeldingen in contentblokken – naast tekst of in een sectie

Zo vervang je een afbeelding

1. Ga naar https://editor.smarthotel.nl en log in

2. Ga naar Pagina’s en open de pagina die je wilt bewerken

3. Klik direct op de afbeelding die je wilt wijzigen

4. Er verschijnt een pop-up: upload een nieuwe afbeelding of kies er één uit je bibliotheek

5. Klik op "Selecteren" en de afbeelding wordt direct vervangen

Tip: Je kunt niets stukmaken. Klik gerust rond – de Smarthotel Editor maakt het makkelijk om te testen en eventuele wijzigingen ongedaan te maken.

Header- of achtergrondafbeeldingen vervangen

Sommige pagina’s hebben bovenaan een grote afbeelding met tekst eroverheen. Dit is een achtergrondafbeelding binnen een sectie.

Zo vervang je een achtergrondafbeelding:

1. Beweeg je muis over de sectie met de grote afbeelding

2. Klik op Sectie bewerken

3. Ga naar Achtergrond > Afbeelding

4. Upload een nieuwe afbeelding of kies er een uit je bibliotheek

5. Pas indien nodig de overlay of doorzichtigheid aan zodat de tekst goed leesbaar blijft

Tip: Gebruik heldere, kwalitatief goede beelden zonder te veel details, zodat tekst goed zichtbaar blijft.

Wil je liever een video gebruiken dan een afbeelding?

Sommige headers ondersteunen ook een videobackground.

Zo voeg je een achtergrondvideo toe:

1. Beweeg je muis over de gewenste sectie

2. Klik op Sectie bewerken

3. Ga in het linkermenu naar het tabblad Design

4. Scroll naar Media Type en kies Video in plaats van Afbeelding

5. Je kunt nu een video uploaden of een YouTube- of Vimeo-link invoegen

Let op: Je kunt een video uploaden vanuit je eigen computer, maar dit kan je website vertragen.
We raden aan om een video in te laden via YouTube of Vimeo voor betere prestaties.

Sommige secties ondersteunen standaard geen video. Zie je de optie niet? Probeer dan een andere voorgemaakte sectie.

Afbeeldingen optimaliseren voor kwaliteit en snelheid

Goede afbeeldingen zijn belangrijk, maar bestanden die te groot zijn maken je website traag.

Aanbevolen instellingen:

• Max. breedte: 2000 pixels

• Bestandsgrootte: max. 500 KB

• Bestandstype: .jpg of .webp (vermijd .png tenzij nodig voor transparantie)

Gebruik bijvoorbeeld:

• https://tinypng.com

• https://squoosh.app

Voeg een alt-tekst toe (voor SEO en toegankelijkheid)

Bij elke afbeelding kun je een alt-tekst invullen — een korte beschrijving voor zoekmachines en voor bezoekers die gebruikmaken van schermlezers.

Voorbeeld alt-tekst:
“Deluxe kamer met balkon en uitzicht op zee in Hotel Bellevue, Nice”

Je kunt dit doen bij het uploaden of bewerken van een afbeelding.

Gebruik de SEO Assistant om ontbrekende alt-teksten te vinden

In de Smarthotel Editor kun je de SEO Assistant gebruiken om snel te controleren of je afbeeldingen een alt-tekst hebben.

Zo werkt het:

1. Open de pagina die je wilt controleren

2. Klik op het SEO-icoon in de bovenste werkbalk

3. De SEO Assistant toont suggesties, zoals afbeeldingen zonder alt-tekst

4. Klik op de afbeelding en voeg een korte, duidelijke alt-tekst toe

5. Sla je wijzigingen op

Tip: Beschrijf wat er op de afbeelding te zien is, en gebruik waar mogelijk relevante zoekwoorden (bijv. “Hotelkamer met zeezicht”).

Controleer je afbeeldingen op mobiel

Wat er goed uitziet op desktop, ziet er soms anders uit op mobiele schermen.

1. Klik op het mobiel-icoon in de bovenste werkbalk van de editor

2. Scroll door je site en controleer of afbeeldingen nog goed worden weergegeven

3. Pas indien nodig de uitlijning of sectieruimte aan

Tip: Op mobiel werkt minder vaak beter. Houd het overzichtelijk en vermijd grote visuals boven de vouw.

Zorg voor een consistente stijl

Voor een professionele uitstraling:

• Gebruik foto’s met gelijke kleuren en belichting

• Meng geen professionele foto’s met snelle telefoonfoto’s

• Gebruik consistente formaten en verhoudingen binnen een sectie

• Rek afbeeldingen niet uit — behoud de juiste proporties

Veelgemaakte fouten (en hoe je ze voorkomt)

Samenvatting

• Klik op een afbeelding om deze te vervangen

• Gebruik Sectie bewerken > Achtergrond voor grote banners

• Voeg een video toe via YouTube of Vimeo als alternatief

• Gebruik geoptimaliseerde, lichte bestanden

• Voeg een alt-tekst toe voor SEO

• Controleer je site ook in mobiele weergave

• Houd de visuele stijl consistent

• Vergeet niet op Publiceren te klikken

Liever zien hoe het werkt?

Bekijk deze video:
Effortlessly manage your website’s pages with the Smarthotel Editor CMS
https://helpguide.smarthotel.nl/en/effortlessly-manage-your-websites-pages-with-smarthotel-editor-cms

Of lees de algemene uitleg:
Manage and customize your website with the Smarthotel Editor
https://helpguide.smarthotel.nl/en/manage-and-customize-your-website-with-the-smarthotel-editor

Volgende les

Lees verder:
CMS Les 4: Knoppen, links en call-to-actions toevoegen

Hulp nodig?

Mail ons gerust via support@smarthotel.nl – we helpen je graag verder.