De blokken-editor van WordPress gebruiken (beginnershandleiding)

WordPress block editor is net als elke andere page builder waarmee je verbazingwekkende inhoud en webpagina's voor je website kunt maken en ontwerpen. Het is ingebouwd in WordPress, dus iedereen kan vanaf nul een website maken.

De Gutenberg Blok-editor, ook wel blok-editor genoemd, is de nieuwe editor die de oude klassieke editor heeft vervangen. De blok-editor werkt anders dan de klassieke editor.


WordPress Blok-editor! Wat is dat?

WordPress Blok-editor is de nieuwe standaard editor op basis van blokken. Blokken zijn net als de inhoudselementen die nodig zijn om een website of inhoud op te bouwen.

Het biedt een moderne, blokgebaseerde aanpak voor het maken van inhoud, waardoor het ontwerpen en opmaken van pagina's en berichten eenvoudiger wordt zonder dat er uitgebreide codering of tools van derden nodig zijn.


Interface voor blok-editor

Laten we eens kijken naar de interface van de Gutenberg Block Editor en de functionaliteit ervan.

Hier volgt een kort overzicht van de elementen van de Gutenberg-editorinterface: 

  1. Blok toevoegen
  2. Knop Herhalen/Ongedaan maken
  3. Overzicht documenten
  4. Bekijk
  5. Instellingen (Blokken & Post)
  6. Opties voor editor

Er zijn er nog meer. Bekijk de afbeelding hieronder.

  1. Optie zoekbalk
  2. Titel van de post of pagina toevoegen
  3. Blokken toevoegen in het inhoudsgebied
  4. Geïnstalleerde & WordPress kernblokken
  5. Knop Blok toevoegen
  6. Opties voor berichten en pagina's
  7. Blok Opties
  8. Blokstijlen en instellingen
  9. Blokken, patronen & media

Nu je bekend bent met de interface van de blokkeneditor, laten we eens kijken naar de blokken die bij Gutenberg worden geleverd. 


WordPress blokken

Aangezien de Gutenberg Blok-editor op blokken is gebaseerd, laten we eens kijken welke blokken bij de Blok-editor horen en wat ze precies doen.

Inhoud blokken

Deze blokken vormen de basis voor het maken van op tekst gebaseerde inhoud:

  • Paragraaf: Dit is voor het toevoegen van gewone tekst met opmaakopties.
  • Rubriek: Voor het maken van koppen met zes niveaus (H1 tot H6).
  • Lijst: Geordende (genummerde) of ongeordende (opsommingstekens) lijsten toevoegen.
  • Citaat: Formatteer tekst als een blokcitaat met optioneel citaat.
  • Code: Geeft onbewerkte codefragmenten weer in een opgemaakt blok.
  • Voorgeformatteerd: Voegt tekst toe met behoud van spatiëring en uitlijning.
  • Tabel: Maakt eenvoudige tabellen voor de presentatie van gegevens.
  • Vers: Voor gedichten of andere voorgeformatteerde tekst met speciale spatiëring.

Maak prachtige tafels
Met blok-editor

Media Blokken

Met deze blokken kun je verschillende soorten media insluiten en weergeven:

  • Afbeelding: Voegt afzonderlijke afbeeldingen toe met bijschriften en uitlijningsopties.
  • Galerij: Creëert afbeeldingsgalerijen met aanpasbare lay-outs.
  • Video: Sluit video's in die zijn geüpload naar de Mediabibliotheek.
  • Audio: Voegt direct afspeelbare audiobestanden toe aan de pagina.
  • Bestand: Uploaden en links naar bestanden om te downloaden.
  • Media en tekst: Combineert tekst en media naast elkaar in één blok.
  • Omslag: Voegt een afbeelding of video toe met overlappende tekst, perfect voor koppen of secties.

Blokken ontwerpen

Deze blokken helpen bij de paginastructuur en het visuele ontwerp:

  • Kolommen: Maakt lay-outs met meerdere kolommen.
  • Groep: Groepeer meerdere blokken voor betere organisatie en styling.
  • Rij: Lijnt blokken horizontaal uit in een rij.
  • Knoppen: Voegt aanpasbare knoppen met links toe.
  • Afstandhouder: Voegt ruimte toe tussen blokken voor lay-outaanpassingen.
  • Scheider: Voegt horizontale lijnen in om secties te verdelen.

Blokken insluiten

WordPress ondersteunt het insluiten van inhoud van verschillende platforms met deze blokken:

  • YouTube: Sluit YouTube-video's in.
  • Twitter: Voegt tweets direct in op de pagina.
  • Instagram: Voegt Instagram-posts in.
  • Spotify: Voegt Spotify-afspeellijsten, albums of nummers toe.
  • Andere insluitingen: Ondersteuning voor Vimeo, Facebook, TikTok, SoundCloud en meer.

Thema Blokken

Deze blokken worden gebruikt om themagerelateerde inhoud toe te voegen:

  • Titel: Geeft de titel van de huidige post of pagina weer.
  • Post Inhoud: Voert de inhoud van de huidige post of pagina uit.
  • Plaats Aanbevolen afbeelding: Geeft de uitgelichte afbeelding van een bericht weer.
  • Query-lus: Toont dynamisch een lijst met berichten op basis van specifieke criteria.
  • Navigatie: Voegt navigatiemenu's toe.

Widget Blokken

Maakt het mogelijk om traditionele widgetinhoud toe te voegen aan blokgebaseerde ontwerpen:

  • Zoek op: Voegt een zoekbalk toe.
  • Laatste berichten: Geeft een lijst met recente berichten weer.
  • Categorieën: Toont een lijst met berichtcategorieën.
  • Tag wolk: Toont tags in een visueel aantrekkelijk formaat.

Herbruikbare en aangepaste blokken

Herbruikbare blokken: Een blok of groep blokken opslaan voor hergebruik op de hele site.

  • Aangepaste HTML: Voeg aangepaste HTML toe voor geavanceerde aanpassingen.

Deze kernblokken bieden de basis voor het maken van verschillende paginalay-outs en inhoudstypen zonder extra tools, waardoor WordPress veelzijdig en toegankelijk is voor gebruikers van alle niveaus.


Hoe gebruik je de blok-editor van WordPress?

De blok-editor is kinderlijk eenvoudig te gebruiken. De WordPress blok-editor is krachtig en flexibel, waardoor je gemakkelijk pagina's en berichten kunt ontwerpen. Door vertrouwd te raken met de functies, kun je snel visueel aantrekkelijke en boeiende inhoud maken!

Blokken invoegen

Deze nieuwe editor ondersteunt de drag-and-drop functie, wat betekent dat je slepen en neerzetten de blokken om nieuwe lay-outs en secties van een webpagina te maken. Klik op " " om blokken te slepen en neer te zetten.Nieuw blok toevoegen" bovenaan en sleep de

Je kunt blokken toevoegen of invoegen door simpelweg op de "blok toevoegen" in de editor, typ de naam van het blok en voeg het in de editor in.

Er is een andere methode die je kunt gebruiken om blokken toe te voegen aan de editor. Typ gewoon "/Blokkennaam." Hieronder vind je een demo. Zorg ervoor dat je hem bekijkt.

Een blok dupliceren

Blokken dupliceren is een eenvoudig proces. Je kunt een blok dupliceren door het blok te selecteren en de sneltoets Ctrl+Shift+D

Je kunt dat ook handmatig doen. Selecteer een blok en klik op de drie verticale punten in het instellingenmenu van het blok (1) om het te dupliceren. Kies de optie "Dupliceren". (2). Eenmaal geklikt, wordt het blok onmiddellijk gedupliceerd.

U kunt blokken dupliceren door het blok te selecteren en de sneltoets Ctrl+Shift+D

Een blok verplaatsen

Je kunt gemakkelijk blokken verplaatsen met de sleepfunctie of de knoppen omhoog en omlaag.

Selecteer het blok en je ziet twee pijlen (omhoog en omlaag). Klik op de pijl omhoog of omlaag om het blok verticaal te verplaatsen.

Je kunt ook de sleepgreep gebruiken om het blok te verplaatsen waar je maar wilt.

Een blok verwijderen of wissen

Een blok verwijderen is supergemakkelijk. Selecteer het blok en druk op de sneltoets Shift+Alt+Z van je toetsenbord.

Je kunt dat handmatig doen door op de blokkeringsinstellingen te klikken en de optie Blokkering verwijderen te selecteren.

Patroon creëren

Een opvallende functie van de blokbewerker is Patroon creëren. Dit zijn blokken die je kunt opslaan en hergebruiken in meerdere berichten of pagina's. Deze functie is ongelooflijk handig, omdat je tijd kunt besparen door zelf ontworpen blokken opnieuw te gebruiken.

Om een patroon te maken, open je de blokinstellingen van de geselecteerde blokken of een blok door op de drie puntjes te klikken en selecteer je Patroon creëren.

Wijs vervolgens een naam toe (1) en categorieën (2) naar uw blok of blokken en klik op de Voeg toe knop (3).

Dit slaat uw blok op in de Gutenberg blokbibliotheek, waardoor het toegankelijk wordt voor toekomstig gebruik. Wanneer je het nodig hebt, kun je het herbruikbare blok gewoon invoegen, net als elk ander blok.

Sneltoetsen

U kunt profiteren van het gebruik van de Gutenberg Block editor via sneltoetsen. Deze sneltoetsen kunnen gebruikers helpen snel te navigeren, tekst op te maken en blokken te beheren zonder afhankelijk te zijn van de muis.

Deze sneltoetsen werken in de hele interface van de editor:

  • Ctrl + S (Windows) / Cmd + S (Mac): Sla het concept op.
  • Ctrl + Z (Windows) / Cmd + Z (Mac): De laatste actie ongedaan maken.
  • Ctrl + Y: De laatste actie opnieuw uitvoeren.
  • Ctrl + Shift + Alt + M (Windows) / Cmd + Shift + Optie + M (Mac): Schakelen tussen de modi Visual en Code editor.
  • Ctrl + Shift + D: Een geselecteerd blok dupliceren
  • Ctrl + Shift + , : Het instellingenpaneel verbergen of weergeven

Als je wilt, kun je zie de sneltoetsen van de editor van WordPress.org.


Voeg meer blokken toe met Ultimate Blocks!

De standaardblokken in de blokkeneditor zijn fantastisch om visueel aantrekkelijke posts en pagina's te maken. Maar wat als je meer flexibiliteit nodig hebt?

Gelukkig ondersteunt de blok-editor aangepaste blokontwikkeling, waardoor ontwikkelaars hun eigen unieke blokken kunnen maken. Dit heeft geresulteerd in een breed scala aan indrukwekkende Gutenberg blok plugins gemaakt door de community. Zo'n plugin is Ultieme Blokken.

Ultieme Blokken is een krachtige plugin die is ontworpen om de WordPress blokbewerker te superchargen met 25+ Aanpasbare blokken. Het is perfect voor bloggers en marketeers en bevat functies zoals beoordelingsblokken, inhoudsfilters en call-to-action-blokken om de betrokkenheid en functionaliteit te verbeteren.


Laatste gedachten!

Het beheersen van de Gutenberg Block Editor opent eindeloze mogelijkheden voor het maken van boeiende en visueel verbluffende inhoud op je WordPress site.

Ik hoop dat de tutorial nuttig en makkelijk te volgen was. Laat me weten wat je ervan vindt in het commentaargedeelte hieronder. Laat het je vrienden ook weten via je sociale media.

Lees meer!



Het Tableberg-team