In WordPress 5.0 werd de klassieke inhoudeditor vervangen door een gloednieuwe blokeditor, beter bekend als Gutenberg. Sindsdien hebben verschillende van onze lezers ons gevraagd om een uitgebreide handleiding te maken over het gebruik van de Gutenberg-blokeditor in WordPress.
WordPress block editor is een geheel nieuwe en andere manier om content te maken in WordPress. In deze zelfstudie laten we u zien hoe u de nieuwe WordPress-blokeditor gebruikt en deze beheert om visueel verbluffende blogberichten en pagina’s te maken.
Wat is het verschil tussen Block Editor (Gutenberg) en Classic Editor?
Voordat we in de nieuwe editor duiken, laten we eerst de verschillen tussen Gutenberg Block Editor en de Classic Editor vergelijken en begrijpen.
Hier is wat de klassieke editor in WordPress eruit zag als:
Als u een upgrade uitvoert naar WordPress 5.0 , ziet de nieuwe blokeditor er als volgt uit:
Zoals u kunt zien, zijn het twee volledig verschillende editors voor het maken van inhoud in WordPress.
De oude klassieke editor was een teksteditor met opmaakknoppen die erg op Microsoft Word lijken.
De nieuwe editor gebruikt een totaal andere benadering, genaamd ‘Blokken’ (vandaar de naam Block Editor).
Blokken zijn inhoudselementen die u aan het bewerkingsscherm toevoegt om inhoudlay-outs te maken. Elk item dat u toevoegt aan uw bericht of pagina is een blok.
U kunt blokken toevoegen voor elke alinea, afbeeldingen, video’s, galerijen, audio, lijsten en meer. Er zijn blokken voor alle gangbare inhoudselementen en er kunnen er meer worden toegevoegd door WordPress-plug-ins .
Hoe is de nieuwe WordPress-blokeditor beter dan de klassieke editor?
De nieuwe WordPress-blokeditor biedt een eenvoudige manier om verschillende soorten inhoud aan uw berichten en pagina’s toe te voegen.
Als u bijvoorbeeld eerder een tabel in uw inhoud wilde toevoegen, had u een aparte tabelplug-in nodig.
Met de nieuwe editor kunt u eenvoudig een tabelblok toevoegen, uw kolommen en rijen selecteren en beginnen met het toevoegen van inhoud.
U kunt inhoudselementen op en neer verplaatsen, ze als individuele blokken bewerken en eenvoudig media-rijke inhoud maken.
Het belangrijkste is dat de nieuwe WordPress-blokeditor gemakkelijk te gebruiken en te leren is.
Dit geeft een enorm voordeel aan alle WordPress-beginners die net hun eerste blog beginnen of een DIY-bedrijfswebsite bouwen .
Laten we echter eens kijken hoe we de nieuwe WordPress-blokeditor als een professional kunnen gebruiken om geweldige inhoud te maken.
Dit is wat we in deze Gutenberg-tutorial behandelen:
- Gutenberg gebruiken – De nieuwe WordPress-blokeditor
- Een nieuwe blogpost of pagina maken
- Hoe een blok toe te voegen in Gutenberg
- Werken met blokken in de nieuwe editor
- Blokjes opslaan en hergebruiken in Gutenberg
- Publiceren en plaatsen van instellingen in Gutenberg
- Plug-in-instellingen in nieuwe editor
- Enkele veelvoorkomende blokken toevoegen in Gutenberg
- Een aantal nieuwe contentblokken verkennen in Gutenberg
- Bonustips voor het gebruik van Gutenberg als een professional
- Meer blokken toevoegen aan Gutenberg Block Editor
- Veelgestelde vragen over Gutenberg
Klaar? Laten we erin duiken.
Gutenberg gebruiken – De nieuwe WordPress Block Editor
De blokeditor is ontworpen om intuïtief en flexibel te zijn. Hoewel het er anders uitziet dan de oude WordPress-editor, doet het nog steeds alle dingen die je in de klassieke editor kon doen.
Laten we beginnen met het bespreken van de basisdingen die u hebt gedaan in de klassieke editor en hoe deze zijn uitgevoerd in de blokeditor.
Een nieuwe blogpost of -pagina maken met behulp van de Block Editor
U begint met het maken van een nieuwe blogpost of -pagina zoals u dat normaal zou doen. Klik eenvoudig op Posts »Add New menu in je WordPress admin. Als u een pagina aanmaakt, gaat u naar het menu Pages »Add New .
Hiermee start u de nieuwe blokeditor.
Hoe voeg je een blok toe in Gutenberg
Het eerste blok van elke post of pagina is de titel.
Daarna kunt u de muis gebruiken om onder de titel te gaan of op de tabtoets op uw toetsenbord drukken om omlaag te gaan en te beginnen met schrijven.
Standaard is het volgende blok een alineablok. Hierdoor kunnen gebruikers meteen beginnen met schrijven.
Als u echter iets anders wilt toevoegen, kunt u klikken op de knop Nieuw blok toevoegen in de linkerbovenhoek van de editor, onder een bestaand blok of aan de linkerkant van een blok.
Als u op de knop klikt, wordt het menu voor het toevoegen van blokken weergegeven met een zoekbalk bovenaan en veelgebruikte blokken hieronder.
U kunt op tabbladen klikken om door blokcategorieën te bladeren of het trefwoord typen om snel naar een blok te zoeken.
Als u geen muis wilt gebruiken om op de knop te klikken, kunt u een sneltoets gebruiken door / te zoeken en een blok toe te voegen.
Werken met blokken in de nieuwe editor
Elk blok wordt geleverd met een eigen werkbalk die op de bovenkant van het blok wordt weergegeven. De knoppen in de werkbalk zouden veranderen afhankelijk van het blok dat u aan het bewerken bent.
In deze schermafbeelding werken we bijvoorbeeld in een alineablok met de basisopmaakknoppen zoals: tekstuitlijning, vet, cursief, invoegkoppelingen en doorhalende knoppen.
Afgezien van de werkbalk, kan elk blok ook eigen blokinstellingen hebben die in de rechterkolom van uw bewerkingsscherm worden weergegeven.
Je kunt blokken op en neer verplaatsen door ze simpelweg te slepen en neer te zetten of door op de knoppen omhoog en omlaag naast elk blok te klikken.
Blokken opslaan en hergebruiken in Gutenberg
Een van de beste dingen over blokken is dat ze kunnen worden opgeslagen en individueel worden hergebruikt. Dit is vooral handig voor bloggers die vaak specifieke inhoudsfragmenten aan hun artikelen moeten toevoegen.
Klik eenvoudig op de menuknop in de rechterhoek van de werkbalk van elk blok. Selecteer in het menu de optie ‘Toevoegen aan herbruikbare blokken’.
U wordt gevraagd een naam op te geven voor dit herbruikbare blok. Voer een naam in voor uw blok en klik vervolgens op de knop Opslaan.
De blokeditor slaat het blok nu op als een herbruikbaar blok.
Nu u een blok hebt opgeslagen, laten we zien hoe u het herbruikbare blok kunt toevoegen aan andere WordPress-berichten en -pagina’s op uw site.
Bewerk gewoon de post of pagina waar u het herbruikbare blok wilt toevoegen. Klik in het berichtbewerkingsscherm op de knop Blokkeren toevoegen.
U vindt uw opgeslagen blok onder het tabblad ‘Herbruikbaar’. U kunt het ook vinden door de naam ervan in de zoekbalk te typen.
U kunt er met de muis overheen gaan om een snel voorbeeld van het blok te zien. Klik eenvoudig op het blok om het in uw bericht of pagina in te voegen.
Alle herbruikbare blokken worden opgeslagen in uw WordPress-database en u kunt ze beheren door op de link ‘alle herbruikbare blokken beheren’ te klikken.
Dit brengt je naar de block manager-pagina. Vanaf hier kunt u elk van uw herbruikbare blokken bewerken of verwijderen. U kunt ook herbruikbare blokken exporteren en deze op elke andere WordPress-website gebruiken.
Opties publiceren en beheren in Gutenberg Block Editor
Elke WordPress-post bevat veel metadata. Dit omvat informatie zoals publicatiedatum, categorieën en tags , uitgelichte afbeeldingen en meer.
Al deze opties staan netjes in de rechterkolom op het bewerkerscherm.
Plugin-opties in Gutenberg
WordPress-plug-ins kunnen profiteren van de API van de blokeditor om hun eigen instellingen binnen het bewerkingsscherm te integreren.
Sommige populaire plug-ins zijn al beschikbaar als blokken. Met WPForms , de beste plug-in voor WordPress-formulierbouwer, kunt u bijvoorbeeld formulieren in uw inhoud toevoegen met behulp van een widgetblok .
Hier is hoe Yoast SEO u toestaat om uw SEO-instellingen in de nieuwe editor te bewerken:
WooCommerce wordt ook geleverd met widgetblokken die je gemakkelijk kunt toevoegen aan elk van je WordPress-berichten en -pagina’s.
Enkele gemeenschappelijke blokken toevoegen in de nieuwe editor
Kortom, de nieuwe editor kan alles doen wat de klassieke editor deed. Je gaat echter veel sneller en eleganter dan voorheen.
1. Een afbeelding toevoegen in een nieuwe WordPress-editor
Er is een gebruiksklaar afbeeldingsblok in de nieuwe WordPress-editor. Voeg eenvoudig het blok toe en upload een afbeeldingsbestand of selecteer uit de mediabibliotheek.
U kunt ook afbeeldingen vanaf uw computer slepen en neerzetten, en de editor zal er automatisch een afbeeldingsblok voor maken.
Nadat u een afbeelding hebt toegevoegd, kunt u de blokinstellingen bekijken waar u metagegevens voor de afbeelding zoals alt-tekst en grootte kunt toevoegen en een koppeling naar de afbeelding kunt toevoegen.
2. Een koppeling toevoegen in de editor voor nieuwe blokken
De blokeditor wordt geleverd met verschillende blokken waarin u tekst kunt toevoegen. De meest gebruikte is het lidblok dat wordt geleverd met een knop voor invoegkoppelingen in de werkbalk.
Alle andere veel gebruikte tekstblokken bevatten ook een linkknop in de werkbalk.
U kunt ook een koppeling invoegen met behulp van de sneltoets, die Command + K voor Mac en CTRL + K op Windows-computers is.
3. Een afbeeldingengalerij toevoegen in Gutenberg
Het galerijblok werkt als het afbeeldingsblok. U voegt het toe en uploadt of selecteert vervolgens afbeeldingsbestanden.
4. Toevoegen van shortcodes in WordPress-berichten met behulp van Gutenberg
Al uw shortcodes werken net als in de klassieke editor. U kunt ze gewoon aan een alineablok toevoegen of u kunt het shortcode-blok gebruiken.
Het verkennen van enkele nieuwe inhoudsblokken in Gutenberg
De redacteur van Gutenberg belooft een aantal langdurige bruikbaarheidsproblemen in WordPress op te lossen door enkele nieuwe blokken te introduceren.
Hieronder volgen enkele van de favorieten die volgens ons gebruikers enorm behulpzaam zullen zijn.
1. Een afbeelding naast een tekst toevoegen in WordPress
Met behulp van de oude editor konden veel van onze gebruikers geen afbeelding naast de tekst plaatsen. U kunt dit nu doen met het Media & Tekst-blok.
Dit eenvoudige blok wordt geleverd met twee blokken naast elkaar, zodat u eenvoudig een afbeelding kunt toevoegen en er tekst naast kunt plaatsen.
2. Toevoegen van een knop in WordPress-berichten en -pagina’s
Het toevoegen van een knop aan uw blogposts of pagina’s was een andere ergernis in de klassieke editor. U moest een plug-in gebruiken die een shortcode voor de knop had gemaakt, of u moest overschakelen naar HTML-modus en code schrijven.
Gutenberg wordt geleverd met een knopblok waarmee je snel een knop aan een bericht of pagina kunt toevoegen.
U kunt een link voor uw knop toevoegen, kleuren wijzigen en kiezen uit drie knopstijlen.
3. Mooie coverafbeeldingen toevoegen in blogposts en landingspagina’s
Een andere leuke functie die u misschien wilt proberen, is het ‘Cover’-blok, waarmee u omslagafbeeldingen aan uw berichten en pagina’s kunt toevoegen.
Een omslagafbeelding is een bredere afbeelding die vaak wordt gebruikt als omslag voor een nieuwe sectie op een pagina of het begin van een verhaal. Ze zien er prachtig uit en stellen u in staat aantrekkelijke inhoudlay-outs te maken.
Voeg eenvoudig een omslagblok toe en upload vervolgens de afbeelding die u wilt gebruiken. U kunt een overlay-kleur voor de omslag kiezen of er een vaste achtergrondafbeelding van maken om een parallax-effect te creëren wanneer gebruikers naar beneden scrollen.
4. Tabellen maken binnen artikelen
De klassieke editor had geen knop om tabellen toe te voegen aan je WordPress-berichten . U moest een plug-in gebruiken of een tabel maken met aangepaste CSS en HTML.
Nieuwe Gutenberg-editor wordt geleverd met een standaard tabelblok, waardoor het super eenvoudig is om tabellen toe te voegen aan uw berichten en pagina’s. Voeg eenvoudig het blok toe en selecteer vervolgens het aantal kolommen en rijen dat u wilt invoegen.
U kunt nu beginnen en gegevens toevoegen aan tabelrijen. U kunt altijd meer rijen en kolommen toevoegen als dat nodig is. Er zijn ook twee basisstijlopties beschikbaar.
5. Meerdere kolominhoud creëren
Het maken van inhoud met meerdere kolommen was een ander probleem dat de klassieke editor helemaal niet aankon. Met de blokeditor kunt u het blok Kolommen toevoegen, dat in feite twee kolommen met alineablokken toevoegt.
Dit kolommenblok is vrij flexibel. U kunt maximaal 6 kolommen achter elkaar toevoegen en zelfs andere blokken binnen elke kolom gebruiken.
Bonustips om Gutenberg als een professional te gebruiken
Als u naar de nieuwe blokeditor kijkt, vraagt u zich misschien af of u meer tijd zult besteden aan het toevoegen en aanpassen van blokken dan aan het maken van daadwerkelijke inhoud?
Nou, de nieuwe editor is ongelofelijk snel en zelfs een heel basaal gebruik voor een paar minuten geeft je de mogelijkheid om direct blokken toe te voegen zonder zelfs maar na te denken.
Al snel zul je je realiseren hoeveel sneller je workflow zal worden met deze nieuwe aanpak.
Voor hoofdgebruikers zijn hier enkele bonustips waarmee u nog sneller kunt werken met de nieuwe WordPress-editor.
1. Verplaats de blokwerkbalk naar boven.
Zoals je misschien hebt gemerkt in de screenshots, is er een werkbalk die bovenop elk blok verschijnt. U kunt deze werkbalk naar de bovenkant van de editor verplaatsen.
Klik eenvoudig op de knop met de drie stippen in de rechterbovenhoek van het scherm en selecteer vervolgens de optie Topwerkbalk.
2. Gebruik sneltoetsen
Gutenberg wordt geleverd met verschillende handige sneltoetsen die uw workflow nog beter zullen maken. De eerste die je meteen zou moeten gebruiken, is de /.
Voer eenvoudig / in en begin met typen, en het toont u passende blokken die u direct kunt toevoegen.
Klik voor meer snelkoppelingen op het menu met de drie stippen in de rechterbovenhoek van uw scherm en selecteer vervolgens ‘Sneltoetsen voor toetsenbord’.
Dit zal een popup openen met de lijst van alle sneltoetsen die je kunt gebruiken. De lijst heeft verschillende snelkoppelingen voor Windows- en Mac-gebruikers.
3. Versleep media om automatisch mediablokken te maken
Met Gutenberg kun je eenvoudig bestanden over het scherm slepen en neerzetten en het zal automatisch een blokkering voor je creëren.
U kunt een enkel beeld of videobestand laten vallen, en het zal het blok voor u creëren. U kunt ook meerdere afbeeldingsbestanden plaatsen om een galerijblok te maken.
4. YouTube, Twitter, Facebook, Vimeo en andere ingesloten items toevoegen
Gutenberg introduceert nieuwe embed-blocks in de block-editor. Er is een blokkering voor alle ondersteunde insluittypen, waaronder YouTube, Twitter, Facebook en meer.
U kunt de insluitings-URL echter op elk gewenst moment kopiëren en plakken en automatisch een blokkering voor u maken.
Als je bijvoorbeeld een YouTube-video-URL hebt toegevoegd, wordt automatisch een YouTube-insluitingsblok gemaakt en wordt de video weergegeven.
Meer blokken toevoegen aan Gutenberg Block Editor in WordPress
Met de nieuwe blokeditor in WordPress kunnen ontwikkelaars hun eigen blokken maken. Er zijn een aantal geweldige WordPress-plug-ins die blokbundels aanbieden voor de nieuwe editor.
Hier zijn er een paar:
Advanced Gutenberg wordt geleverd met verschillende blokken voor populaire content-elementen, zoals de WooCommerce-productschuifregelaar, testimonials, kaarten, counter, tabbladen, accordeons en meer.
Het biedt u ook geavanceerde controle over de toegang van gebruikers tot blokken op basis van hun gebruikersrollen . U kunt gebruikersprofielen maken en selecteren welke blokken ze kunnen toevoegen.
2. Stapelbaar – Gutenberg-blokken
Stapelbaar – Gutenberg Blocks is een verzameling prachtig ontworpen Gutenberg-blokken die u op uw website kunt gebruiken. Het bevat blokken voor de container, posts, feature grid, accordeon, afbeeldingsvak, pictogramlijst, call-to-action en meer.
Editor Blocks is weer een nette verzameling Gutenberg-blokken die je kunt gebruiken. Het wordt geleverd met handige blokken zoals auteursprofiel, heldenafbeelding, prijstabel , merken, functies en meer.
Veelgestelde vragen over Gutenberg – De New Block Editor in WordPress
Sinds Gutenberg de nieuwe WordPress-editor is geworden, hebben we veel vragen gekregen. Hier zijn de antwoorden op enkele van de meest gestelde vragen over Gutenberg.
1. Wat gebeurt er met mijn oudere berichten en pagina’s? Kan ik ze nog steeds bewerken?
Je oude berichten en pagina’s zijn volledig veilig en worden niet beïnvloed door de Gutenberg. Je kunt ze nog steeds bewerken en Gutenberg zal ze automatisch openen in een blok met de klassieke editor.
Je kunt ze in de oude editor bewerken, of je kunt oudere artikelen in blokken converteren en de nieuwe bloknler gebruiken.
2. Kan ik de oude editor nog steeds gebruiken?
Ja, je kunt de oude editor nog steeds gebruiken. Installeer en activeer eenvoudig de Classic Editor- plug-in.
Na activering zal het de blokeditor uitschakelen en kunt u de klassieke editor blijven gebruiken.
Houd er rekening mee dat Classic Editor tot 2022 wordt ondersteund.
3. Wat te doen als de nieuwe editor niet werkt met een plug-in of een thema dat ik gebruik?
Project Gutenberg was lange tijd in ontwikkeling. Dit gaf plug-in en thema-auteurs voldoende tijd om hun code te testen op compatibiliteit.
Er is echter nog steeds een kans dat sommige plug-ins en thema’s mogelijk niet goed werken met de nieuwe editor. In dat geval kunt u de klassieke editor-plug-in installeren, de ontwikkelaar vragen Gutenberg-ondersteuning toe te voegen of eenvoudig een alternatieve plug-in of een ander thema te vinden.
4. Hoe leer je meer Gutenberg-tips en -trucs?
WPBeginner is de beste plaats om te leren over de nieuwe blokeditor in WordPress. Wij zijn de grootste bron voor WordPress-bronnen op internet.
We zullen nieuwe artikelen publiceren en onze oude bronnen bijwerken om u te helpen de nieuwe blokeditor te beheersen.
Als u in de tussentijd vragen heeft, kunt u contact met ons opnemen door een reactie achter te laten of door het contactformulier op onze website te gebruiken.
We hopen dat deze Gutenberg-zelfstudie u heeft geholpen om te leren hoe u de nieuwe WordPress-blokeditor gebruikt. U wilt misschien ook onze complete WordPress-prestatiegids bekijken om de snelheid van uw website te verbeteren.
0 Comments