Wat is een WYSIWYG tekstveld en hoe ermee aan de slag in Craft CMS?

Wanneer je een bericht of pagina aanmaakt of bewerkt, kan je de tekstvelden doorgaans opmaken met gebruik van de Wysiwyg editor.

Wysiwyg is een afkorting voor 'what you see is what you get' of in het Nederlands 'wat je ziet is wat je krijgt'. Dit betekent dat je direct in het tekstveld in de backend kan zien hoe het resultaat op de website eruit zal zien, inclusief alle opmaak: vet, headings (tussenkoppen) etc.

Welke opmaak je kan selecteren hangt af van je project en van de plaats van het tekstveld op de website. Zo zal niet elk tekstveld dezelfde opmaakmogelijkheden hebben. Indien je hier graag iets aan zou veranderen, mag je ons dit laten weten. Dan bekijken we samen welke mogelijkheden er zijn.

We lichten de opmaakmogelijkheden hieronder even toe. Je zal zien dat deze overeen komen met andere tekst editors die je kent.

Tussentitels ('headers') worden gebruikt om je pagina overzichtelijk en gestructureerd te houden. Selecteer hiervoor eerst de tekst die je wil aanpassen, klik vervolgens op de paragraafknop, en kies de gewenste tussenkop bijvoorbeeld ‘Heading 1’, ‘Heading 2’ etc. Om de opmaak van de tussenkop weer te verwijderen, kan je de tekst opnieuw selecteren en dan op ‘Normal text’ klikken.

Belangrijk is wel dat je de boomstructuur van titels bewaard. Zo is een heading 1 steeds voor de hoofdtitel van de pagina gereserveerd. Nadien volgen headings een logische structuur op, waarbij headings 2 en 3 steeds voor grotere titels worden gebruikt en hiërarchisch boven headings 4 en 5 staan.

Het gebruik van headers binnen je website vormt niet alleen een visueel hulpmiddel en grafische toevoeging aan je content, maar is ook zeer belangrijk voor gebruikers met een beperking, die je website bijvoorbeeld via een screenreader bezoeken. Daarnaast dient het gebruik van headers ook voor het identificeren van belangrijke informatie door zoekmachines. Wees dus zeker consequent in het gebruik van deze elementen wanneer je content schrijft.

Met deze knoppen kan je een tekst vet of cursief maken.

Selecteer de bestaande tekst en klik op een van deze knoppen. Wil je deze stijl verwijderen? Selecteer dan je de tekst en klik nogmaals op deze knop.

Met deze knop kan je een lijst maken met opsommingstekens ervoor. Je kan kiezen voor een niet-genummerde oplijsting (unordered list) of voor een genummerde opsomming (ordered list).

Je kan dit op twee manieren in je bericht of pagina toevoegen:

• Druk eerst op deze knop en typ dan je tekst. Vervolgens druk je op de Enter knop en typ je tweede regel uit je opsomming.

• Of je selecteert de bestaande tekst. En drukt daarna op de opsommingsknop. Er wordt dan van elke regel een onderdeel van de opsomming gemaakt.

Wil je deze stijl verwijderen? Selecteer dan eerst je tekst, en klik vervolgens weer op de opsommingsknop.

De knoppen ‘outdent’ en ‘indent’ zijn standaard uitgegrijsd, ze worden pas aanklikbaar als je in een reeds bestaande oplijsting staat. Via deze knoppen kan je binnen een oplijsting een boomstructuur creëren door een bepaald item meer of minder te laten inspringen.

Naast het gebruik van headings, worden ook opsommingslijsten aangemoedigd vanuit SEO. Belangrijk is dat je dit op de nodige plaatsen toepast, maar dat je dit ook niet overdoet. Vraag ons gerust om extra advies indien je hier vragen over hebt.

Met deze knop kan je je tekst laten linken naar een interne pagina of een externe website.

Selecteer de tekst waar je de link aan wilt toekennen, en klik op de linkknop.

• 'Link to an entry' selecteer je voor een link binnen je eigen website. Nadat je hierop klikt krijg je de boomstructuur van je website te zien en kan je zo een bestaande pagina selecteren.

• 'Insert link' gebruik je voor een externe link bv. naar een andere website. Voer in het URL veld de volledige URL in van de pagina waarnaar je wil linken. Deze link moet beginnen met "http://" of "https://" anders zal het niet werken. Voor een externe link kan je ook de optie “Open link in new tab” aanvinken, zodat de link automatisch wordt geopend in een nieuw tabblad. Zo kan je bezoeker steeds jullie site terugvinden in een ander tabblad.

• ‘Unlink’ gebruik je wanneer je een aangemaakte link terug wil verwijderen van je tekst.

Met deze knop kan je je tekst laten linken naar een bestand bv: een afbeelding of een pdf-bestand.

Selecteer de tekst waar je de link aan wilt toekennen, en klik op de file-knop. De bestandenbibliotheek (asset library) van je site zal automatisch openen, waaruit je een bestand ken selecteren. De tekst wordt nu een link. Als de bezoeker hier op klikt, kan hij het bestand bekijken en/of downloaden.