Titel

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters

Tekst

Paragraaf

Het paragraaf blok in de WordPress Gutenberg editor is een van de meest gebruikte blokken voor het toevoegen van tekst aan je pagina’s en berichten. Het stelt je in staat om eenvoudig tekst in te voeren, te bewerken en op te maken zonder dat je code hoeft te gebruiken. Het paragraaf blok is de basis voor het schrijven van inhoud in WordPress.

Opmaakopties:

• Tekst uitlijnen: Kies links, rechts of gecentreerde uitlijning voor de tekst.
• Vetgedrukt: Maak de geselecteerde tekst vet.
• Cursief: Maak de geselecteerde tekst schuin.
• Link: Voeg een hyperlink toe aan de tekst.

Koptekst

Het koptekst blok in de WordPress Gutenberg editor is een belangrijk blok dat wordt gebruikt om koppen of titels in je content te creëren. Het helpt je om de inhoud op je pagina of bericht op te delen in logische secties, wat de leesbaarheid verbetert en de hiërarchie van de tekst aangeeft. Kopteksten worden ook vaak gebruikt voor SEO-doeleinden, omdat zoekmachines zoals Google deze gebruiken om de structuur van je pagina beter te begrijpen.

Kopniveau kiezen (H1, H2, H3, etc.):

• H1: Dit is het hoogste kopniveau en wordt doorgaans gebruikt voor de hoofdtitel van een pagina. Deze wordt over het algemeen via de code al uitgelezen en hoeft niet in de editor geplaatst te worden.
• H2: Dit is een subkop en wordt vaak gebruikt voor secties onder de hoofdtitel.
• H3: Nog een niveau lager, vaak gebruikt voor subsecties binnen een H2-sectie, enzovoorts tot H6.

Dit is een H1

Dit is een H2

Dit is een H3

Dit is een H4

Dit is een H5

Dit is een H6

Lijst

Het lijst blok in de WordPress Gutenberg editor is een eenvoudig maar krachtig hulpmiddel waarmee je lijsten met items kunt maken, zowel genummerde (geordende) als opsommingstekens (ongeordende) lijsten. Dit blok is handig voor het opsommen van punten, stappen of elke reeks items die gestructureerd gepresenteerd moeten worden.

In de toolbar van het lijst blok kun je kiezen tussen twee soorten lijsten:

Ongeordende lijst:

• Lijst optie 1
• Lijst optie 2
• Lijst optie 3

Geordende lijst:

1. Lijst optie 1
2. Lijst optie 2
3. Lijst optie 2

Citaat / Quote

Het quote blok in de editor stelt je in staat om citaten op een opvallende en gestileerde manier toe te voegen aan je berichten of pagina’s. Citaten worden vaak gebruikt om belangrijke uitspraken of teksten te benadrukken. Het quote blok biedt standaardopmaak om de citaten visueel aantrekkelijk te maken, en je kunt de stijl en indeling van het citaat aanpassen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend eros augue, eu posuere leo aliquam id. 

Citaat bron

Tabel

Het tabel blok maakt het gemakkelijk om tabellen toe te voegen aan je pagina’s en berichten. Een tabel is handig voor het overzichtelijk weergeven van gegevens in rijen en kolommen, zoals prijzen, vergelijkingen, specificaties of elke andere vorm van gestructureerde informatie.

• Standaardstijl: Een eenvoudige, basisstijl voor de tabel.
• Gestreepte rijen: Dit maakt de rijen in de tabel afwisselend gekleurd, wat het visueel aantrekkelijker en gemakkelijker te lezen maakt.

Media

Afbeelding

Het afbeeldingen blok is een van de meest gebruikte blokken, omdat het je in staat stelt om gemakkelijk afbeeldingen toe te voegen en te beheren in je pagina’s of berichten. Je kunt afbeeldingen uploaden, selecteren uit je mediabibliotheek, of via een URL invoegen. Dit blok biedt verschillende opties voor uitlijning, bijschriften en opmaak, zodat je afbeeldingen op een aantrekkelijke manier kunt presenteren.

Galerij

Het galerij blok maakt het eenvoudig om een groep van meerdere afbeeldingen op een visueel aantrekkelijke manier weer te geven. Dit blok is perfect om bijvoorbeeld een fotogalerij, portfolio, of verzameling productafbeeldingen te maken. Met het galerij blok kun je afbeeldingen uploaden, uit de mediabibliotheek kiezen, de lay-out aanpassen, en de weergave van de galerij volledig beheren.

Afbeeldingen carrousel

Een afbeeldingen carrousel blok in WordPress stelt je in staat om een reeks afbeeldingen in een roterend formaat te tonen, waarbij gebruikers door de afbeeldingen kunnen scrollen. Dit type blok is handig voor het tonen van meerdere foto’s, portfolio’s, of productafbeeldingen op een overzichtelijke en visueel aantrekkelijke manier.

Je kunt kiezen uit afbeeldingen die al zijn geüpload naar de mediabibliotheek, of je kunt nieuwe afbeeldingen uploaden vanaf je computer. Nadat je de afbeeldingen hebt geselecteerd, kun je ze eenvoudig in de gewenste volgorde slepen.

Audio

Het audio blok maakt het mogelijk om audiobestanden toe te voegen aan je pagina’s of berichten. Dit blok is ideaal voor het delen van podcasts, muziek, gesproken woord of andere audio content. Het audio blok biedt een ingebouwde audiospeler waarmee bezoekers direct op je website naar de audio kunnen luisteren.

Bestand

Het bestand blok is een handige manier om bestanden, zoals PDF’s, Word-documenten, Excel-spreadsheets, of andere downloadbare bestanden, beschikbaar te stellen op je website. Dit blok biedt een eenvoudige interface om bestanden te uploaden en aan bezoekers aan te bieden, met een ingebouwde download knop. De tekst van de knop kan aangepast worden en met de extra opties die in de rechterbalk verschijnen kan worden ingesteld of de link in het eigen of een extern venster geopend wordt.

Video

Het video blok maakt het gemakkelijk om video’s toe te voegen aan je pagina’s of berichten. Dit blok biedt je de mogelijkheid om video’s te uploaden vanaf je computer, of video’s in te voegen die gehost worden op platforms zoals YouTube, Vimeo, of andere videodiensten.

Nadat de video is toegevoegd, verschijnt er een ingebouwde videoplayer op de pagina. Hiermee kunnen bezoekers de video afspelen, pauzeren, en door de video heen spoelen.

De video wordt weergegeven op je website in een standaard HTML5 videoplayer, waardoor het bestand compatibel is met verschillende apparaten en browsers.

In de rechterzijbalk van de editor kun je verschillende instellingen aanpassen voor het video blok:

• Autoplay: Hiermee kun je instellen dat de video automatisch begint te spelen wanneer de pagina wordt geladen. Houd er echter rekening mee dat autoplay door sommige browsers kan worden geblokkeerd of beperkt.
• Loop (herhalen): Wanneer deze optie is ingeschakeld, wordt de video automatisch opnieuw afgespeeld zodra deze is afgelopen.
• Mute (dempen): Deze optie dempt het geluid van de video wanneer deze automatisch afspeelt of wordt geladen.
• Vooruit- en achteruitspoelen toestaan: Dit geeft gebruikers de mogelijkheid om door de video te spoelen, zowel vooruit als achteruit.
• In de zijbalkopties kun je een posterafbeelding instellen. Dit is een afbeelding die wordt weergegeven voordat de video begint af te spelen, wat handig is als je een specifieke thumbnail wilt tonen die de inhoud van de video weergeeft.

Dit is de videospeler met streaming video ondersteuning ontwikkeld door BWH.

Klik in de editor op de onderstaande video om de voorkeurs instellingen te bekijken.

Media & tekst

Het media en tekst blok is een veelzijdig blok waarmee je eenvoudig afbeeldingen, video’s, of andere media naast tekst kunt plaatsen. Dit blok is ideaal om een aantrekkelijke lay-out te creëren waarin media en tekst naast of boven elkaar staan, wat vaak wordt gebruikt om bijvoorbeeld afbeeldingen met beschrijvingen of een combinatie van tekst en video weer te geven. Door de vele mogelijkheden van dit blok is hier een stap-voor-stap uitleg over hoe het media en tekst blok werkt.

1. Media toevoegen – maak een keuze tussen een afbeelding of een video.
   • Afbeelding selecteer een bestaande afbeelding uit de mediabibliotheek of upload een nieuwe afbeelding.
2. Positionering – In de rechterzijbalk van de editor, kun je bepalen of de media aan de linkerkant, aan de rechterkant of boven de tekst wordt geplaatst.
   • Links – media wordt links weergegeven en de tekst rechts
   • Rechts – media wordt rechts weergegeven en de tekst links
   • Bovenaan – media wordt boven de tekst weergegeven. Deze optie is het beste te gebruiken in combinatie met het kolommen blok. Zie voorbeeld Media en tekst binnen kolommen met uitlijning boven.
3. Verhouding
   • Hier kun je de grootte van de linker- en rechterkant bepalen.
4. Tekst uitlijning
   • Hier kan de uitlijning van de tekst ten opzichte van de media ingesteld worden.
5. Witruimte
   • Hier kan een selectie gemaakt worden of het blok wel of niet voorzien moet worden van witruimte.
6. Thema
   • Hier kan de achtergrondkleur van het blok ingesteld worden. Er kan een thema (licht en donker), een vaste achtergrond kleur of een handmatige achtergrond- en tekstkleur geselecteerd worden.

Dit is een titel

Quisque eleifend quam elit. Donec auctor egestas lacus vel ultricies. In hac habitasse platea dictumst. Nam eget nunc et lectus porta condimentum. Ut volutpat mattis commodo. Fusce ut magna sed nisi malesuada sollicitudin quis quis lacus.

Media en tekst blok binnen een kolommen blok met uitlijning boven

Media en tekst met media boven

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Media en tekst met media boven

It is a long established fact that a reader will be distracted.

Ontwerp

Knoppen

Het Knoppen‐blok geeft je alle vrijheid om één of meerdere knoppen op je pagina precies zo te plaatsen en te stylen als je wilt. Zo kun je eenvoudig knoppen maken die perfect aansluiten op de lay-out en sfeer van je website, én gebruikers op een heldere manier doorverwijzen naar de gewenste content. Hieronder vind je een overzicht van alle mogelijkheden:

1. Richting
   Je kunt bepalen of je knoppen naast elkaar komen te staan of onder elkaar:
   • Horizontaal: knoppen worden in één rij naast elkaar uitgelijnd.
   • Verticaal: knoppen stapelen van boven naar onder in één kolom.
2. Uitlijning
   Per rij of kolom kies je hoe de knoppen binnen hun container komen te staan:
   • Links: alle knoppen worden tegen de linkerkant van de container geplaatst.
   • Midden: knoppen centreren automatisch.
   • Rechts: knoppen schuiven naar de rechterkant.
3. Link-instellingen
   Elke knop kan een eigen bestemming en gedrag meekrijgen:
   • Zoek een pagina of bericht – Koppel de knop direct aan een bestaande pagina of blogpost door te zoeken in je content.
   • Handmatige URL – Plak een link naar externe pagina’s of bestanden in het URL-veld en geef desgewenst een custom knoptekst op.
   • Open in nieuw tabblad – Activeer deze optie om de link in een nieuw browser­venster/tab te laten openen. Handig bij downloads of externe verwijzingen.
4. Weergave
   • Stijl van de knop – Elke kleurvariant is afgestemd op je huisstijl of contrasteert juist voor extra nadruk. Kies uit verschillende kleur­thema’s en afwerkingen:
     • Volle achtergrond (vol)
     • Omlijnd (lijn)
   • Grootte van de knop – Bepaal de zichtbaarheid en hiërarchie met drie formaten:
     • Klein
     • Gemiddeld
     • Groot
       

Klein

Gemiddeld

Groot

Kolommen

Het kolommen blok kan maximaal 4 kolommen beslaan en van iedere kolom kan een breedte worden ingesteld. Daarnaast kan via de selectie de ruimte tussen de kolommen ingesteld worden.
Binnen een kolom kunnen de volgende blokken gebruikt worden:

• Knoppen
• Paragraaf
• Koptekst
• Lijst
• Afbeelding

Indeling van 2 kolommen

Indeling van 3 kolommen

Indeling van 4 kolommen

Smalle kolom

Het Smalle Kolom-blok geeft je de mogelijkheid om gedeelten van je pagina in te springen en visueel te scheiden van de rest van de inhoud. Zo creëer je meer variatie en houd je de layout dynamisch en overzichtelijk. Om het Smalle Kolom-blok écht tot zijn recht te laten komen, kun je het moeiteloos combineren met andere blokken.

Smalle kolom optie 1

Dit is de smalste instelling die mogelijk is. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet arcu purus. Nulla metus odio, viverra quis tellus in, sodales cursus risus. Suspendisse potenti. Mauris diam ante, consequat ultrices magna sit amet, vehicula accumsan augue.

Klik hier

Smalle kolom optie 2

Dit is de middelste instelling die mogelijk is. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet arcu purus. Nulla metus odio, viverra quis tellus in, sodales cursus risus. Suspendisse potenti. Mauris diam ante, consequat ultrices magna sit amet, vehicula accumsan augue.

Klik hier

Smalle kolom Optie 3

Dit is de breedste instelling van de smalle kolom die mogelijk is. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet arcu purus. Nulla metus odio, viverra quis tellus in, sodales cursus risus. Suspendisse potenti. Mauris diam ante, consequat ultrices magna sit amet, vehicula accumsan augue.

Klik hier

Container

Het container blok is een veelzijdig blok waarmee je de opmaak van een pagina naar een hoger niveau kan brengen. Dit blok is ideaal om een aantrekkelijke lay-out te creëren waarin media, kleur en tekst samenkomen. Binnen dit blok kan vervolgens weer een grote selectie van de andere blokken geplaatst wat veelzijdige combinaties mogelijk maakt.

Door de vele mogelijkheden van dit blok is hier een stap-voor-stap uitleg over hoe het blok werkt.

1. Kader instellingen
   • Er kan gekozen worden om het blok gekaderd of over de gehele breedte te tonen.
2. Witruimte
   • De witruimte kan geselecteerd worden. Bij geen witruimte is alleen de minimale witruimte aanwezig. Met witruimte is er aanzienlijk meer witruimte in de container aanwezig.
3. Achtergrond
   • Hier kan de achtergrond van het blok ingesteld worden. Er kan een thema (licht en donker), een vaste achtergrond kleur, een afbeelding, een video of een handmatige achtergrond- en tekstkleur geselecteerd worden.

Enkele voorbeelden

Introductie

Het introductie blok wordt gebruikt om een korte inleiding (vaak in een groter of afwijkende letter) weer te geven in bijvoorbeeld de header van de pagina. Er kan maximaal 1 introductieblok per pagina geplaatst worden .

Witruimte

Het Witruimte blok is een handig hulpmiddel waarmee je lege ruimte kunt toevoegen tussen blokken op je pagina of in je bericht. Dit blok voegt visuele luchtigheid toe en helpt om de lay-out van je content beter te structureren, vooral als je secties wilt scheiden of een bepaald element beter wilt laten opvallen door ruimte eromheen te creëren.

Door de schuifregelaar heen en weer te bewegen kan er uit 4 verschillende witruimtes gekozen worden.

Widgets

In WordPress zijn de blokken “Eigen HTML” en “Shortcode” handige opties binnen de Gutenberg-editor, maar ze worden over het algemeen minder vaak gebruikt in vergelijking met andere blokken. Hier is een uitleg over wat deze blokken doen en waarom ze vaak een niche-toepassing hebben.

Eigen HTML-blok
Eigen HTML-blok stelt je in staat om handmatig HTML-code toe te voegen aan een pagina of bericht. Dit is ideaal voor gebruikers die aangepaste HTML willen invoegen die niet mogelijk is met de standaard Gutenberg-blokken.

Shortcode-blok
Het Shortcode-blok maakt het mogelijk om WordPress-shortcodes in te voegen. Shortcodes zijn speciale codes die je kunt invoeren om specifieke inhoud of functies in te voegen, zoals formulieren, galerijen, of andere dynamische content van plugins.

Insluitingen

Embed

Het embed blok maakt het eenvoudig om inhoud van externe websites, zoals video’s, sociale media posts, muziek, documenten en meer, direct in je WordPress-pagina’s of -berichten in te voegen. Er is ondersteuning voor een breed scala aan populaire platforms, waardoor je gemakkelijk multimedia en andere bronnen kunt delen zonder handmatige code in te voegen.

Je kan een video embedded door het Embed, YouTube/Vimeo (of andere sociale media) blok te plaatsen en hier vervolgens de url naar de video in te plakken. Ook kan de link naar de video direct in de editor geplakt worden. Dan wordt dit automatisch omgezet naar het juiste embed blok.

YouTube

Vimeo

Soundcloud

Spotify

Formulieren

Het Formulieren blok maakt het eenvoudig om formulieren die je met de Gravity Forms plugin hebt gemaakt, direct in je pagina’s of berichten in te voegen. Gravity Forms is een populaire plugin waarmee je geavanceerde formulieren kunt maken voor contact, inschrijvingen, betalingen en meer.

Let er op dat de volgende instellingen worden toegepast (te vinden aan de rechterkant).

• Formulier titel – uitgeschakeld
• Formulier beschrijving – uitgeschakeld
• Voorbeeld – ingeschakeld (onder Geavanceerd)
• AJAX* – ingeschakeld (onder Geavanceerd)

* Als je wilt dat het formulier wordt ingediend zonder dat de pagina opnieuw wordt geladen (asynchroon), kun je de optie Ajax inschakelen selecteren. Dit zorgt voor een vloeiendere gebruikerservaring.

Handleiding formulieren module

Beheren en verwerken persoonlijke gegevens
Aan het verwerken van persoonlijke gegevens zitten