Na het aanmaken van een pagina is het tijd om deze te vullen met content. Met behulp van widgets bouw je eenvoudig een pagina op door tekst, afbeeldingen, tabellen en meer toe te voegen. De WYSIWYG-editor (What You See Is What You Get) is beschikbaar in veel widgets en werkt vergelijkbaar met programma’s zoals Microsoft Word. Dit maakt het eenvoudig om tekst en afbeeldingen toe te voegen en te bewerken.
Onder het kopje ‘Inhoud’ kun je een widget kiezen of toevoegen, bijvoorbeeld ‘Tekst met afbeelding’ of ‘Tekst’. Met de ‘Tekst met afbeelding’-widget kun je eenvoudig een 50/50 opmaak maken, waarbij de afbeelding automatisch naast de tekst wordt geplaatst. Met de ‘Tekst’-widget kun je meer indelingsopties kiezen, zoals 1, 2 of 3 kolommen. Binnen deze widget voeg je afbeeldingen toe via de WYSIWYG-editor.
Volg onderstaande stappen om een afbeelding toe te voegen aan jouw pagina via de WYSIWYG-editor:
Stap 1 | Bepaal de Locatie van de Afbeelding
Denk na over de plaats van je afbeelding:
-
Afbeelding naast tekst
Plaats de cursor aan het begin van de alinea waar je de afbeelding wilt uitlijnen (bijvoorbeeld links of rechts van de tekst). Vermijd het plaatsen van afbeeldingen midden in een tekstblok, omdat dit de leesbaarheid op mobiele apparaten kan verstoren.
-
Afbeelding op volledige grootte
Wil je de afbeelding op volledige breedte toevoegen? Maak een nieuwe alinea door op Enter te drukken en klik daarin om de afbeelding op die plek te zetten.
Stap 2 | Afbeelding Selecteren
Nu de plek voor de afbeelding is bepaald, kun je de afbeelding zelf invoegen door in de WYSIWYG-editor op de knop ‘Afbeelding invoegen’ te klikken. Er verschijnt een pop-upvenster genaamd ‘Eigenschappen afbeelding’. Klik op ‘Bladeren op server’ om een nieuwe afbeelding te uploaden.
Stap 3 | Afbeelding Uploaden
Om je afbeelding toe te voegen aan de server gebruik je de CKFinder. Dit venster toont alle eerder geüploade afbeeldingen en biedt de mogelijkheid om nieuwe afbeeldingen te uploaden.
Tip: Voor een betere vindbaarheid van je website is het slim om afbeeldingen goed te benoemen. Gebruik relevante zoekwoorden in de bestandsnaam, zonder hoofdletters of spaties, bijvoorbeeld: een-goede-bestandsnaam.jpg.
Stap 4 | Afbeelding Invoegen op de Pagina
Nu je afbeelding in de CKFinder staat, kun je deze invoegen. Kies de gewenste afbeelding en klik op ‘Choose’ of dubbelklik op de afbeelding.
In het pop-upvenster kun je nu een alternatieve tekst toevoegen. Dit veld is belangrijk voor de toegankelijkheid (voor blinden en slechtzienden) en SEO (zoekmachineoptimalisatie). Alt-tekst geeft een beschrijving van de afbeelding voor gebruikers met een visuele beperking en helpt zoekmachines om de inhoud van je afbeelding te begrijpen.
Stap 5 | Afbeelding Uitlijnen
De afbeelding is toegevoegd op volledige grootte. Om deze mooi weer te geven op verschillende schermformaten, kun je gebruikmaken van de uitlijnings-opties onder de stijl-knop:
-
Responsive image: de afbeelding wordt op volledige grootte weergegeven en schaalt mee met het apparaat.
-
Links 10% - 80%: afbeelding links van de tekst plaatsen, met opties voor grootte.
-
Rechts 10% - 80%: afbeelding rechts van de tekst plaatsen, met opties voor grootte.
Kies een uitlijn-optie voor de beste weergave op desktop en mobiel.
