UITLEG afbeelding hieronder:

• De blauwe blokken zijn zg. ‘secties’ Dit zijn de HOOFDonderwerpen. Een sectie wordt dus gebruikt om content te groeperen/bundelen.
• In de SECTIE vind je een rij (groene balk) en die kun je opdelen in maximaal 6 kolommen. Een beetje veel, vind ik. Dat ziet er in veel schermen vaak niet zo fraai uit. Persoonlijk zou ik me aan maximaal 3 kolommen houden.
• Elke kolom kun je vullen met verschillende modules. Dit zijn de zwarte blokken in het plaatje.

De meest gebruikte modules zijn:

• Tekst,
• afbeelding,
• knoppen (buttons),
• video,
• blog,
• aanbevelingen (referenties),
• contactformulier.

Omdat je in een tekst-module ook afbeeldingen, knoppen, links en meer kunt plaatsen, is dit in mijn ogen één van de meest belangrijkste modules. In de video's op deze pagina vind je meer informatie hierover.

❓ Wat is de (klassieke) editor?

De editor op je website is het hulpmiddel waarmee je teksten, afbeeldingen en opmaak toevoegt aan een pagina of bericht. In de klassieke editor zie je meestal verschillende opmaaktools (vet, cursief, opsomming, uitlijning, linkjes en meer). Ook zie je twee tabbladen 'Visueel en Tekst'. 1️⃣ Visueel

• Dit lijkt op een gewone tekstverwerker (zoals Word).
• Je ziet de opmaak zoals die ongeveer op de website verschijnt.
• Je kunt makkelijk kopteksten kiezen, tekst vet of cursief maken, lijsten invoegen en links toevoegen.
• Handig voor wie geen code wil zien of bewerken.

2️⃣ Tekst of HTML Hier zie je de achterliggende code (HTML). Bijvoorbeeld: h2Mijn koptekst/h2

Dit is een alinea met tekst.

• In deze weergave kun je precies zien welke koppen, alinea’s, links of lijstjes er in de code staan.
• Het is handig om ongewenste opmaak (bijv. meegekopieerd uit Word) te verwijderen.
• Ook kun je hier kleine aanpassingen maken als de Visuele editor niet doet wat je wil.

Wat is HTML eigenlijk?

• HTML staat voor HyperText Markup Language.
• Het is de taal waarin webpagina’s worden opgemaakt.
• HTML vertelt de browser wat iets is: een titel, een alinea, een afbeelding, een link, een lijst, enz.

Voorbeelden van HTML-tags: voor een paragraaf.

💡 Kort advies

✔️ Werk je meestal in Visueel? Prima – maar kijk soms even in Tekst/HTML om te controleren of er geen rommelige code of rare opmaak is meegekomen. ✔️ Gebruik de Visuele editor vooral voor structuur en leesbaarheid, niet voor “schoonheidsopmaak” die niet bij de huisstijl past.

Als je tekst direct uit Word, Google Docs of andere bronnen plakt in de editor, neem je vaak onzichtbare opmaakcodes mee. Denk aan extra HTML, stijlen of lettertypen die niet passen bij de opmaak van je website. Gevolgen kunnen zijn:

• Verspringende koppen of lettertypen.
• Onverwachte witruimte.
• Problemen met mobielvriendelijkheid.
• Moeilijker beheer of latere aanpassingen.

Tip: Plak bij voorkeur eerst in de Tekst-weergave van de editor (zie onderstaande afbeelding). Zo wordt alle overbodige opmaak verwijderd en werk je met ‘schone’ HTML. Daarna kun je in 'Visueel' de tekst naar smaak opmaken. Klik op het tabblad Tekst (CODE: ofwel HTML-weergave):

Plak de tekst:

Maak de tekst op:

Vergeet niet om alles op te slaan.

Soms lukt het niet goed om een tekst netjes op te maken in de Visueel-weergave. Knoppen reageren niet zoals je verwacht, of de opmaak laat zich niet verwijderen/ aanpassen. Dan kan het ook beter zijn om even m.b.v. de Tekst-tab in de HTML-weergave te werken (ofwel: CODE).

Bijvoorbeeld, je ziet dit:

Dit is een koptekst (heading 1) Dit is de vervolgtekst

Maar je wil natuurlijk dit zien:

Dit is een koptekst (heading 1)

Dit is de vervolgtekst.

Dit soort dingen zijn soms makkelijker te herstellen in de HTML-weergave.

Het probleem zijn vrijwel altijd de tags die de opmaak bepalen. In dit geval gaat het om de h1 tag die de browser vertelt dat dit een 'heading 1' is. Deze wordt afgesloten met h1

Omdat /h1 achter 'Dit is een vervolgtekst' staat, gaat het mis. Het enige wat je dus moet doen, is de /h1 achter 'Dit is een koptekst (heading 1)' te zetten.

wordt dan:

Selecteer de tekst waaraan je de link wil toevoegen:

Klik op 'Link toevoegen/bewerken':

Plaats de volledige url (dus altijd met https ervoor) in dit vak:

> En klik op het blauwe pijltje.

Wil je een link plaatsen naar een andere site (in een nieuw venster / tab)?
Klik dan op het tandwieltje. Hier plaats je een vinkje bij 'Link in een nieuwe tab openen'.

Klik op Updaten. (Uiteraard moet je je volledige bericht later ook nog eens opslaan als je je bijgewerkte bericht wil publiceren)

In de broncode (tabje Tekst of Code) ziet dit er zo uit:

target="_blank" zorgt ervoor dat een nieuw venster wordt geopend.

rel="noopener" wordt automatisch toegevoegd en zorgt ervoor dat een link die in een nieuw tabblad opent, niet kan “terugkijken” naar je eigen website. Het is dus een veiligheidsmaatregel en voorkomt dat de nieuwe site invloed heeft op jouw site.

Bij het schrijven op de website gebruik je meestal Enter om een nieuwe alinea te maken. Dat is ook belangrijk om de koppen op te maken. Alinea's uit te lijnen, of opsommingen te maken.

✅ Enter ↵)

• Maakt een nieuwe alinea.
• Wordt in de code meestal een p-tag (nieuwe alinea) p en /p.
• Zorgt voor een witregel tussen koppen, opsommingen en alinea's

Voorbeeld in HTML

pDit is de eerste alinea./p

pDit is de tweede alinea./p

✅ Shift + Enter (Nieuwe regel ↩︎ + Shift)

• Maakt géén nieuwe alinea, maar een regelafbreking in dezelfde alinea.
• Wordt in de code een br
• Gebruik Shift + Enter alleen als je echt een nieuwe regel wil binnen dezelfde alinea.

Voorbeeld in HTML

Adresregel 1br
Adresregel 2

Als je een kop wil maken plaats dan altijd een Enter ↵ om de tekst te scheiden van de rest.
Selecteer vervolgens de tekst en kies de gewenste heading, in dit geval h2.

Zo voorkom je dat de rest van je tekst óók als kop wordt opgemaakt.

Bijvoorbeeld:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
↩︎
h2Dit is een koptekst /h2
↩︎
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Dit wordt dan:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Dit is een koptekst

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

📌 Waarom je grote afbeeldingen moet verkleinen vóórdat je ze op je website gebruikt.

NB: in de tweede video onderaan op deze pagina, wordt onder meer voorgedaan hoe je afbeeldingen toevoegt. Vandaar dat deze uitleg alleen uitlegt waarom en hoe je grote afbeeldingen moet verkleinen. Grote afbeeldingen zorgen voor:

• Langzamere laadtijden (je website wordt trager en zoekmachines houden alleen van snelle sites).
• Meer opslagruimte op je server.
• Onnodig dataverbruik bij bezoekers (belangrijk op mobieltjes).

Een goede vuistregel: houd afbeeldingen voor je website meestal onder 200–300 KB, tenzij het echt een groot of detailrijk beeld moet zijn.

✅ Hoe kun je een afbeelding makkelijk verkleinen?

🖼️ Op Windows (met Paint)

1️⃣ Open de afbeelding in Paint.
2️⃣ Klik op Formaat wijzigen in de menubalk.

3️⃣ Kies Percentage of Pixels en stel een kleiner formaat in (bijvoorbeeld breedte 1000px voor webgebruik).

4️⃣ Controleer dat Verhoudingen behouden is aangevinkt. Het icoontje is dan blauw:

5️⃣ Klik op OK.
6️⃣ Kies Bestand > Opslaan als → bij voorkeur JPEG.
7️⃣ Geef het bestand een nieuwe naam om het origineel te behouden.

🍏 Op Mac (met Voorvertoning)

1️⃣ Open je afbeelding in Voorvertoning (dubbelklik erop).
2️⃣ Ga in de menubalk bovenaan naar Extra's > Pas grootte aan...
3️⃣ Er verschijnt een venster Afbeeldingsgrootte.
4️⃣ Voer de gewenste breedte in (bijv. 1200 pixels).
5️⃣ Zorg dat Schakel proportioneel aanpassen is aangevinkt.
6️⃣ Klik op OK.
6️⃣ Kies Archief > Bewaar of Bewaar als en selecteer bij voorkeur JPEG.

📌 Lees eerst waarom je grote afbeeldingen moet verkleinen vóórdat je ze op je website gebruikt (hierboven).

 Ga naar de MEDIA-map in het menu in je dashboard

Klik op 'Mediabestand toevoegen'

En dan op 'Bestanden selecteren'

Selecteer de gewenste bestanden. 

Wacht tot alles geüpload is, en klik op 'Bewerken' om de belangrijkste gegevens toe te voegen.

Typ (of verbeter) de naam (titel) van je afbeelding.

Indien het niet om een decoratieve afbeelding gaat -zoals een sierlijntje- typ hier dan altijd een alternatieve tekst waarin je beschrijft wat er te zien is op de afbeelding. Vuistregel is maximaal 125 tekens, tenzij je een hele complexe afbeelding beschrijft.  Lange alt-teksten worden namelijk woord voor woord voorgelezen, wat vermoeiend of verwarrend kan zijn

Je kunt ook een bijschrift maken, maar dat hoeft alleen als je dit onder de afbeelding wenst te zien. 

Voorbeeld bijschrift:

Vergeet niet om dit op te slaan!

 

Kopteksten (Headings) zoals H1, H2, H3 enzovoort zijn niet alleen een manier om tekst mooi op te maken. Ze geven structuur en betekenis aan je pagina, zowel voor je bezoekers als voor zoekmachines zoals Google.

✅ 1. SEO – Zoekmachines gebruiken headings

• Zoekmachines “lezen” je headings om te begrijpen waar een pagina over gaat.
• Belangrijke zoekwoorden in kopteksten helpen om beter gevonden te worden.
• Maar overdrijven of rommelig gebruik kan dit juist tegenwerken.

✅ 2. Structuur en volgorde zijn belangrijk

• Headings geven een hiërarchie aan de inhoud.
• H1 is de belangrijkste titel van de pagina – meestal maar één keer per pagina.
• Daarna gebruik je H2 voor hoofdonderdelen, H3 voor subonderdelen, enz.

Goed voorbeeld:

H1: Recept voor appeltaart

H2: Ingrediënten
H3: Deegwaren

H2: Bereiding
H3: Voorbereiden van het deeg
H3: Bakken

Fout voorbeeld:

H1: Over ons
H3: Onze missie
H3: Teamleden
→ Hier spring je van H1 naar H3 en dan terug naar H2 – dat is onlogisch en verwarrend voor zoekmachines én lezers die afhankelijk zijn van hulpmiddelen om een site te lezen (WCAG).

✅ 3. Gebruik headings niet alleen voor opmaak

• Gebruik headings niet zomaar omdat ze groot en vet zijn.
• Kies een heading omdat het echt een titel of subtitel is die het onderwerp beschrijft.
• Voor opmaak kun je beter stijlen toepassen (bijvoorbeeld grotere tekst zonder heading-tag).

NB: gebruik je bijvoorbeeld graag de H1 opmaak omdat je de H2 te klein vindt? Vraag dan aan je webbouwer of hij/zij de stijl wil aanpassen in het theme.

Veel mensen maken opsommingsteksten door zelf streepjes of cijfers te typen, bijvoorbeeld: - Eerste punt - Tweede punt - Derde punt of: 1. Eerste stap 2. Tweede stap 3. Derde stap Dat lijkt in de editor misschien netjes, maar het zijn geen echte lijsten in HTML.

📌 Wat is het probleem?

• De website ziet het gewoon als gewone tekst met tekens ervoor.
• Er is geen correcte HTML-structuur (De opmaak kan op mobiel verspringen of inconsistent worden).
• Zoekmachines herkennen het niet als een lijst, waardoor je minder kans hebt op bijvoorbeeld een uitgelichte “featured snippet” in Google.
• Het is lastiger om de stijl of indeling later aan te passen met de opmaak van de website.

✅ Hoe doe je het goed?

• Gebruik altijd de ingebouwde lijst-knoppen in de editor:
• Voor een onopgemaakte opsomming (bullet list): ![Bullet list icoon]
• Voor een genummerde lijst: ![Numbered list icoon]

Ofwel:

• Plaats een witregel m.b.v. ENTER ↩︎  boven en onder de tekst met de opsomming (zie eerste uitleg hier).
• Selecteer vervolgens de tekst (of zet je cursor in de test die opgesomd moet worden.
• Klik vervolgens op het gewenste icoontje:

Veel mensen willen hun tekst extra opvallend maken door allerlei kleuren, lettergroottes en stijlen te kiezen. Bijvoorbeeld: Voorbeeld fout gebruik: Rode tekst hier, blauwe kop daar, gearceerd in geel en allemaal op één pagina.

📌 Wat is het probleem?

• De pagina oogt onrustig en chaotisch.
• Het ziet er onprofessioneel uit.
• Het maakt het moeilijker voor bezoekers om de structuur en inhoud te begrijpen.
• Kan storend zijn voor mensen met leesproblemen of visuele beperkingen.
• Het doorbreekt de huisstijl – bezoekers herkennen de site minder goed.

✅ Waarom is consistentie belangrijk?

Een website heeft vaak een huisstijl of vooraf ingestelde standaardopmaak (kleuren, lettertypes, kopgroottes).

• Die zorgt voor een herkenbare, professionele uitstraling.
• Consistente opmaak maakt een pagina rustiger en prettiger leesbaar.
• Het helpt je merk of organisatie betrouwbaar over te komen.

✅ Hoe doe je het goed?

• Gebruik de standaard stijlen in de editor voor koppen, alinea’s, lijsten en citaten.
• Houd je aan de vooraf ingestelde kleuren (bijvoorbeeld de thema- of huisstijlkleuren).
• Pas alleen opmaak aan als het echt nodig is – bijvoorbeeld om een belangrijk onderdeel subtiel te benadrukken.