De Ultieme Gids voor het Gebruik van de Content Editor
Welkom bij deze complete handleiding voor het gebruik van onze content editor! Dit brede tekstblok is speciaal ontworpen als eerste paragraaf direct onder de paginatitel. Het geeft je artikel een krachtige opening met meer visuele impact. Voor het beste resultaat plaats je hierna direct een relevante afbeelding die je verhaal ondersteunt - zoals je hieronder zou doen in een echt artikel.
Over deze pagina
Deze pagina geeft verschillende voorbeelden van hoe je de opties in de content editor moet gebruiken zodat er over de gehele site een consistente style aangehouden wordt. Standaard is deze pagina niet gepubliceerd. Maar als je het resultaat even wilt zien, kan je hem even publiceren, zolang je hem daarna maar niet vergeet te de-publiceren (en de cache een schop te geven).
Paragraphs & new lines
Als je standaard in de editor op enter drukt zal de editor een nieuwe paragraaf aanmaken. Na deze zin is er op enter gedrukt, en daarom verschijnt er een beetje ruimte tussen deze tekst en de tekst na de enter. Een paragraaf kan je op een website zien als een element, net als een H1, H2, of een afbeelding. Tussen alle elementen zit een standaard ruimte. Tenzij dit in het design anders is ontworpen, dan zal de code dit ook een beetje aanpassen.
Zie hier de volgende paragraaf. Je ziet dat er ruimte is geplaatst tussen deze paragraaf, en de bovenstaande. Het opdelen van teksten in verschillende paragrafen is een goede zaak, maar je kan hier van afwijken. Doe dit met beleid, gezien dit ook direct een afwijking is op het design. Je kan dit doen door middel van shift+enter.
Zoals je ziet begint deze zin nu direct onder de bovenstaande tekst. Maar zonder dat er een nieuwe paragraaf is gemaakt.
H2: De Koning van de Koppen
Dit is een H2 kop - gebruik deze voor hoofdsecties in je artikel. Een H2 is als de kapitein van een voetbalteam: belangrijk, zichtbaar, en geeft structuur aan het spel. Praktijkvoorbeeld: Op een "Over ons" pagina gebruik je H2 voor "Onze missie", "Ons team", "Onze geschiedenis", etc.
H3: De Rechterhand van H2
En dit is een H3 kop!
Zie het als de assistent-manager. H3 koppen gebruik je voor subsecties binnen een H2 sectie. Ze zijn iets kleiner en staat iets dichter op de volgende paragraaf.
Je gebruikt een H3 als je:
- Voor onderverdelingen binnen een H2 sectie
- Bij het opsplitsen van complexe onderwerpen in kleinere delen
- Voor vragen in een interview
Praktijkvoorbeeld: Onder H2 "Onze diensten" gebruik je H3 voor "Webdesign", "Online marketing", "Hosting", etc.
Belangrijke tip: Gebruik koppen hiërarchisch! Begin dus niet met een H3, en daarna een H2. Niet handig voor je websitebezoekers én zoekmachines.
Nog een klein detail: de H3 koppen worden alleen ingezet op de detail pagina van een nieuws item. Op andere plaatsen, zullen ze als H2 weergegeven worden.
Tekstopmaak: De Basis
Vet gedrukt (Bold)
Vet gedrukte tekst trekt de aandacht. Het is perfect om belangrijke woorden of zinnen te benadrukken. Maar pas op: gebruik het met mate! Een tekst vol vet gedrukte woorden is als iemand die constant schreeuwt - na een tijdje luister je niet meer.
Fout gebruik: Gebruik vet NIET als vervanging voor koppen. Dat is zoals een hamer gebruiken om een schroef in te draaien - technisch mogelijk, maar er zijn betere tools voor!
Cursief (Italic)
Cursieve tekst geeft een subtiele nadruk. Het is perfect voor foreign words, boektitels zoals De Hobbit, of om een zin een bepaalde toon mee te geven.
Wanneer gebruik je Italic? ➡️
- Voor boek- en filmtitels: Harry Potter en de Steen der Wijzen
- Bij vreemde woorden: Het Franse je ne sais quoi
- Voor scheepsnamen: De Titanic zonk in 1912
- Bij gedachten of innerlijke monoloog in verhalen
- Voor wetenschappelijke namen: Homo sapiens
- Om een woord te benadrukken zonder te schreeuwen: Dat was echt bijzonder
Onderstrepen (Underline)
Onderstreepte tekst wordt tegenwoordig minder gebruikt omdat het verward kan worden met links.
Let op!: Onderstreep nooit zomaar voor de lol - je bezoekers zullen denken dat het een link is en gefrustreerd raken wanneer er niets gebeurt bij het klikken!
Lijsten: Orde in de Chaos
Ongeordende lijst (Bullet points)
Gebruik bullet points voor items zonder specifieke volgorde:
Wanneer gebruik je bullet points? ➡️
- Voor producteigenschappen en features
- Bij het opsommen van diensten die je aanbiedt
- Voor ingrediënten in recepten (waar volgorde niet uitmaakt)
- Bij voordelen van een product of dienst
- Voor downloads en documenten
- Bij het vermelden van vereisten of voorwaarden
Lijstjes kan je ook met icons laten beginnen. Hier een voorbeeldje daarvan:
- ☕️ koffie
- 🧘🏼♀️ zen
- 🤘🏼 Rock-on!
- 💾 Floppie
Geordende lijst (Numbered list)
Gebruik genummerde lijsten wanneer de volgorde wél belangrijk is. Hier zijn enkele voorbeelden 👉🏻
- Voor stap-voor-stap instructies
- Bij het beschrijven van een proces of procedure
- Voor receptinstructies waar volgorde cruciaal is
- Bij ranglijsten of prioriteiten
- Voor tijdlijnen of historische gebeurtenissen
- Bij installatie-instructies
Pro tip: Gebruik geen lijsten als vervanging voor koppen of paragrafen. Een lijst van één item is zoals een feestje voor één persoon - technisch mogelijk, maar mist het punt een beetje.
Quotes: Laat Anderen aan het Woord
Wanneer gebruik je een standaard quote?
- Voor klanttestimonials en recensies
- Bij het citeren uit onderzoeken of rapporten
- Voor inspirerende uitspraken van thought leaders
- Bij het weergeven van persberichten
- Voor belangrijke uitspraken uit interviews
- Bij het citeren van wetteksten of officiële documenten
Custom Quote met Highlight
De Speciale Quote geeft je de mogelijkheid om tekst in de quote te highlight'en.
Links: Verbind je Content
Links zijn de bruggen van het internet. Je kunt een link naar een andere pagina maken door tekst te selecteren en op het link-icoon te klikken.
Brede Introductie Tekst: Maak een Statement
Brede introductie tekst: Dit speciale block is ontworpen als de eerste paragraaf direct onder je paginatitel. Het wordt breder weergegeven dan normale tekst en heeft meer visuele impact. Voor het perfecte resultaat plaats je hierna altijd een afbeelding - dit creëert een professionele flow die je bezoekers direct in je verhaal trekt.
Anders komt er onder direct een normale paragraaf, en dat staat niet zo pro.
De perfecte opbouw:
- Paginatitel (H1 - meestal automatisch)
- Afbeelding of relevante visual
- Vervolg met normale content
Standaard Afbeelding knop
En dan moeten we het nog even over de bug hebben in de standaard afbeelding knop (in de balk). Als je daar geen lege paragraaf onder zet leest het systeem hem niet uit. Helaas een bug in het CMS systeem waar niet echt tegenaan te programmeren is, laten we hopen dat dit binnenkort opgelost wordt met een update van het CMS.
Ondertussen is het daarom ook mogelijk om via het plusje een afbeelding toe te voegen, en dit werkt gewoon altijd naar behoren.