Hoe gebruik je de WordPress-blokeditor: een handleiding voor beginners

De WordPress-blokeditor kan er in eerste instantie verwarrend uitzien. De lay-out is anders, alles werkt met blokken en het vinden van basisopties kan voor beginners langer duren dan verwacht.

De blokeditor is echter standaard WordPress-installaties

Als je eenmaal weet hoe blokken werken, kun je sneller pagina's bouwen, content eenvoudig opmaken en je lay-outs beter beheren dan ooit tevoren in de klassieke editor.

De blokkeneditor is ontworpen om intuïtief en flexibel te zijn, waardoor gebruikers blokken eenvoudig kunnen slepen en neerzetten. Met een beetje oefening kunt u binnen enkele minuten pagina's bouwen en aanpassen.

Kort samengevat:

• De WordPress-editor, ook wel bekend als Gutenberg , verving de klassieke editor in WordPress 5.0 en stelt je in staat om content te bouwen met behulp van afzonderlijke blokken.

• Elk element op je pagina, inclusief tekst, afbeeldingen, knoppen en lay-outs, bevindt zich in een eigen blok met specifieke instellingen.

• Je kunt kleuren, afstand, typografie en uitlijning rechtstreeks aanpassen vanuit het instellingenpaneel van het blok, zonder code te hoeven schrijven.

• Blokpatronen bieden je kant-en-klare lay-outs om mee te beginnen, terwijl herbruikbare blokken je in staat stellen je eigen elementen op te slaan en opnieuw te gebruiken op je hele website.

Wat is de WordPress blokeditor?

De blokeditor, ook wel bekend als Gutenberg, is de standaard contenteditor in WordPress. Deze verving de klassieke editor in WordPress 5.0 in december 2018.

In plaats van één tekstveld bouw je content op met afzonderlijke blokken. Elke alinea, afbeelding, kop, knop en video krijgt een eigen blok dat je onafhankelijk kunt verplaatsen, opmaken en aanpassen.

WordPress is overgestapt op een blokkensysteem, waardoor je meer controle hebt over je pagina-indelingen zonder dat je een aparte paginabouwer of aangepaste code nodig hebt.

WordPress blokeditor versus klassieke editor

De klassieke editor bood een eenvoudig tekstveld met beperkte opmaakmogelijkheden. Om meer te maken dan standaard tekst en afbeeldingen, moest je extra plug-ins installeren of technische kennis hebben.

Met de blokeditor krijgt elk element een eigen blok met specifieke instellingen. Je kunt content verplaatsen, kolomindelingen maken, knoppen toevoegen, media insluiten en de afstand aanpassen zonder ook maar één regel code te schrijven.

WordPress ontwikkelt de klassieke editor niet langer actief. Door over te schakelen naar de blokeditor krijg je toegang tot alles wat WordPress momenteel te bieden heeft, inclusief volledige sitebewerking, blokpatronen en herbruikbare blokken.

Hoe navigeer ik door de interface van de blokeditor?

Wanneer je de blokeditor voor het eerst opent, lijkt er misschien veel tegelijk op het scherm te gebeuren. Er zijn echter drie belangrijke onderdelen die je moet kennen. Zodra je die begrijpt, wordt het navigeren door de editor een stuk eenvoudiger.

• Bovenste werkbalk: De bovenste werkbalk bevindt zich bovenaan uw scherm. Gebruik deze om blokken toe te voegen, fouten ongedaan te maken, uw inhoud te bekijken en uw publicatie-instellingen te openen.

• Instellingenpaneel: Het instellingenpaneel bevindt zich aan de rechterkant van uw scherm. Het toont de blokinstellingen wanneer u op een blok klikt en schakelt over naar uw berichtinstellingen, zoals categorieën, tags en uitgelichte afbeelding, wanneer er niets is geselecteerd. U kunt hier het tabblad 'Blok' openen om de instellingen voor het geselecteerde blok te configureren.

• Blokken invoegen: De blokken invoeger is de blauwe plusknop linksboven. Klik erop om de zoekbalk te gebruiken om snel blokken te vinden en in te voegen, te bladeren op categorie of om herbruikbare blokken te vinden die je hebt opgeslagen.

Je kunt de lijstweergave ook gebruiken om je lay-outs effectiever te beheren en te organiseren.

Beschikbare soorten blokken

De blokkeneditor organiseert alles in vijf categorieën. Elke categorie groepeert blokken op basis van hun functie, waardoor je gemakkelijk precies kunt vinden wat je nodig hebt bij het bouwen van je pagina's en berichten.

De standaardblokken bestrijken een breed scala aan contenttypen, waardoor gebruikers pagina's met veel multimedia-elementen kunnen creëren, zoals afbeeldingen, video's, galerijen en meer.

Hieronder vindt u een overzicht van wat elk onderdeel inhoudt:

• Tekstblokken: alinea's, kopjes, lijsten, citaten, codefragmenten en tabellen. Alles wat je op je pagina schrijft, valt in deze categorie.

• Mediablokken: Afbeeldingen, video's, audiobestanden, fotogalerijen en downloadbare bestanden. Je kunt verschillende blokken, waaronder fotogalerijen, gebruiken om visueel aantrekkelijke content en pagina's met veel media te creëren.

• Ontwerpblokken: Kolommen, knoppen, groepen, scheidingslijnen en afstandhouders. Je kunt verschillende blokken en andere blokken combineren om complexe lay-outs te bouwen en te bepalen hoe de inhoud wordt weergegeven.

• Widgetblokken: zoekbalken, archieflijsten, categorielijsten, recente berichten en kalenders. Dit zijn de functionele elementen die extra waarde aan uw pagina's toevoegen.

• Integreer blokken: YouTube, Vimeo, Spotify, Twitter en tientallen andere platforms. Met de blokeditor kunnen gebruikers eenvoudig content van externe bronnen, zoals YouTube en Vimeo, rechtstreeks in hun pagina's integreren zonder code te hoeven schrijven.

Veelgebruikte WordPress-blokken door beginners

Als je net begint, hoef je niet alle blokken meteen te leren. Dit zijn de blokken die je op bijna elke pagina en in elk bericht zult gebruiken.

Alinea- en kopblokken

Het alineablok is het meest basale blok in de editor. Elke keer dat je begint met typen, gebruik je er een. Je kunt de lettergrootte, tekstkleur en uitlijning rechtstreeks vanuit de blokwerkbalk wijzigen zonder code aan te raken.

Kopteksten werken samen met alinea-elementen om structuur aan je content te geven. Je kunt kiezen uit H1 tot en met H6, afhankelijk van hoe je je pagina wilt organiseren.

Het correct gebruiken van kopniveaus helpt zoekmachines ook om uw content te begrijpen, wat belangrijk is voor SEO .

Afbeelding- en mediablokken

Met het afbeeldingsblok kunt u afbeeldingen rechtstreeks uploaden vanuit uw mediabibliotheek of via een URL. Zodra uw afbeelding is geplaatst, kunt u deze links, rechts of in het midden uitlijnen, het formaat aanpassen en alternatieve tekst toevoegen voor SEO en toegankelijkheid.

Bij meerdere afbeeldingen worden deze in een overzichtelijk raster weergegeven. U kunt zelf het aantal kolommen, de afbeeldingsformaten en het al dan niet weergeven van bijschriften onder elke afbeelding bepalen.

Knop- en linkblokken

Met het knopblok kunt u overal op uw pagina een call-to-action , zelfs zonder ontwerpkennis. U kunt de knoptekst, de link, de achtergrondkleur, de randradius en de tekstkleur allemaal aanpassen via het instellingenpaneel van het blok.

Voor inline links hoeft u alleen maar uw tekst in een alinea te selecteren en op het linkpictogram in de werkbalk te klikken. Geen code, geen plug-ins, gewoon een strakke hyperlink die in enkele seconden is toegevoegd.

Lijst- en citaatblokken

Met het lijstblok kunt u met één klik lijsten met opsommingstekens of genummerde lijsten maken. U kunt wisselen tussen verschillende lijststijlen, items inspringen om geneste lijsten te maken en tekst binnen elk lijstitem opmaken, net als bij een alineablok.

Het citaatblok benadrukt belangrijke uitspraken of citaten in uw tekst. Het geeft een stuk tekst visuele nadruk, waardoor het opvalt tussen de rest van uw pagina.

Gebruik het voor getuigenissen, kernpunten of alles wat je de lezers wilt laten opmerken.

Hoe voeg ik blokken toe, verplaats ik ze en verwijder ik ze?

Elke handeling die je in de Gutenberg-editor uitvoert, komt neer op drie dingen : blokken toevoegen, verplaatsen en verwijderen. Hieronder leggen we uit hoe elk van deze handelingen werkt.

Blokken toevoegen in de WordPress-editor

Je kunt op drie manieren een blok aan je pagina of bericht toevoegen. Je kunt een nieuw blok toevoegen door op de knop 'Nieuw blok toevoegen' te klikken of door de slash-opdracht te gebruiken (typ / gevolgd door de bloknaam):

• Blokken invoegen: Klik op de blauwe plusknop linksboven om het blokken invoegvenster te openen. Hier kunt u zoeken naar of bladeren door de blokken die u nodig hebt, en ook de blokpatroonbibliotheek verkennen voor vooraf ontworpen blokpatronen en lay-outs die u kunt invoegen en aanpassen.

• Inline invoeging: Beweeg de muis over de ruimte tussen bestaande blokken op uw pagina en klik op de kleine plusknop die ertussen verschijnt.

• Slash-opdracht: Klik op een leeg alineablok en typ vervolgens een schuine streep (/) gevolgd door de naam van het blok. Dit is een snelle manier om direct een nieuw blok toe te voegen.

Het verplaatsen en herschikken van blokken in Gutenberg

Er zijn drie manieren om een ​​blok naar een nieuwe positie op je pagina te verplaatsen:

• Pijlknoppen: Elk blok heeft twee pijlknoppen op de werkbalk. Gebruik ze om het blok één positie omhoog of omlaag te verplaatsen.

• Sleepgreep: Pak de sleepgreep met zes puntjes aan de linkerkant van het blok vast en sleep deze naar een willekeurige plek op uw pagina.

• Documentoverzicht: Open het documentoverzichtspaneel via de bovenste werkbalk om al uw blokken in de juiste volgorde te zien en sleep ze vervolgens naar de gewenste positie.

Blokken verwijderen in WordPress

Het verwijderen van een blokkering duurt slechts enkele seconden:

• Menu met drie puntjes: Selecteer het blok, klik op het menu met de drie puntjes in de blokwerkbalk en selecteer Verwijderen.

• Toetsenbord sneltoets: Selecteer het blok en druk op Backspace of Delete op uw toetsenbord om het direct te verwijderen.

• Een fout herstellen: Druk op Control Z in Windows of Command Z in Mac om een ​​blok te herstellen dat u per ongeluk hebt verwijderd.

Blokken aanpassen zonder te programmeren

Je hoeft geen code te kennen om het uiterlijk van je blokken aan te passen. Elk blok in de WordPress-editor heeft een eigen instellingenpaneel aan de rechterkant van je scherm.

Selecteer een blok en de zijbalk wordt direct bijgewerkt, zodat u precies kunt zien wat u voor dat blok kunt wijzigen.

Dit kunt u rechtstreeks vanuit het instellingenpaneel van het blok beheren:

• Tekstinstellingen: Pas de lettergrootte, het lettertype, de regelafstand en de letterafstand aan de stijl van uw tekst aan.

• Kleuropties: Wijzig de tekstkleur en achtergrondkleur van elk blok met behulp van de kleurenkiezer of door een hexadecimale code in te voeren.

• Afstandsinstellingen: Pas de opvulling en marge rondom uw blok aan om te bepalen hoeveel ruimte er boven, onder en rondom uw inhoud is.

• Uitlijningsinstellingen: Lijn uw blok links, in het midden, rechts uit of stel het in op de volledige breedte, afhankelijk van uw lay-outbehoeften.

• Herbruikbare patronen: Sla elk blok of elke groep blokken op als een herbruikbaar patroon. Gebruik het op meerdere pagina's en berichten zonder het elke keer opnieuw te hoeven opbouwen.

Het gebruik van blokpatronen en herbruikbare blokken

Zowel blokpatronen als herbruikbare blokken besparen je tijd bij het bouwen van pagina's, maar ze werken op verschillende manieren. Hieronder leggen we uit wat ze doen.

Blokpatronen zijn kant-en-klare lay-outs die standaard in de WordPress-editor zijn ingebouwd. Je vindt ze in de blokken-invoegtool onder het tabblad 'Patronen'. Je kunt ook de officiële blokpatroonbibliotheek raadplegen voor een ruime keuze aan vooraf ontworpen lay-outs op WordPress.org .

Kies er een die je mooi vindt, sleep hem naar je pagina, vervang hem door je eigen content en klaar! Je hoeft niets helemaal opnieuw op te bouwen.

Herbruikbare blokken worden nu 'gesynchroniseerde patronen' genoemd. Hiermee kunt u uw eigen content maken en opslaan, die u vervolgens in alle blokken op uw site kunt hergebruiken.

Eenmaal opgeslagen, kunt u een gesynchroniseerd patroon in elke pagina of elk bericht plaatsen. Als u het patroon bewerkt, wordt de wijziging automatisch overal toegepast waar het patroon verschijnt.

Perfect voor bijvoorbeeld call-to-action-secties, contactgegevens of disclaimers die je regelmatig gebruikt.

Veelgemaakte fouten van beginners met de blokeditor

De meeste beginners lopen tegen dezelfde problemen aan wanneer ze voor het eerst de blokeditor gebruiken. Let op de volgende punten:

• Overmatig gebruik van blokken: Niet alles hoeft een eigen blok te hebben. Het toevoegen van te veel aparte blokken voor kleine stukjes content maakt je pagina lastiger te beheren en vertraagt ​​je bewerkingsproces.

• Het negeren van de kopstructuur: Veel beginners kiezen kopgroottes op basis van hoe ze eruitzien in plaats van wat ze betekenen. Kopniveaus vertellen zoekmachines hoe je content is georganiseerd. Van H2 naar H4 springen of H1 meerdere keren gebruiken is schadelijk voor je SEO.

• De zijbalkinstellingen niet gebruiken: Het paneel met blokinstellingen is waar de meeste aanpassingen plaatsvinden. Als je dit overslaat, mis je de typografie-opties, kleurmogelijkheden en afstandsinstellingen die al ingebouwd zijn.

• Per ongeluk je lay-out beschadigen: Blokken verplaatsen met de sleepgreep is eenvoudig, maar een blok op de verkeerde plek neerzetten kan je lay-out verstoren. Druk op Control Z op Windows of Command Z op Mac om de actie ongedaan te maken en de lay-out snel te herstellen.

Conclusie

De Gutenberg-editor kan in eerste instantie intimiderend overkomen. Elk element is een blok, de interface is nieuw en het duurt even voordat je de basisopties hebt gevonden.

Als je eenmaal weet hoe blokken werken, wordt het bouwen van pagina's en het schrijven van content sneller en flexibeler. Je hebt de controle over je lay-outs, je kunt je content aanpassen en je hele website beheren zonder ook maar één regel code aan te raken.

Begin met de blokken die je het meest gebruikt. Leer het instellingenpaneel kennen. Bespaar tijd met patronen en herbruikbare blokken. Hoe meer je de editor gebruikt, hoe natuurlijker het aanvoelt.

Veelgestelde vragen over de WP Block Editor