Hoe de nieuwe WordPress Block Editor te gebruiken - DeLaatbusiness

Hoe de nieuwe WordPress Block Editor te gebruiken

12 min


106
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

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:

Oude WordPress-editor

Als u een upgrade uitvoert naar WordPress 5.0 , ziet de nieuwe blokeditor er als volgt uit:

Nieuwe WordPress Block Editor ook bekend als Gutenberg

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.

Tabelblok

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:

  1. Gutenberg gebruiken – De nieuwe WordPress-blokeditor
  2. Een nieuwe blogpost of pagina maken
  3. Hoe een blok toe te voegen in Gutenberg
  4. Werken met blokken in de nieuwe editor
  5. Blokjes opslaan en hergebruiken in Gutenberg
  6. Publiceren en plaatsen van instellingen in Gutenberg
  7. Plug-in-instellingen in nieuwe editor
  8. Enkele veelvoorkomende blokken toevoegen in Gutenberg
  9. Een aantal nieuwe contentblokken verkennen in Gutenberg
  10. Bonustips voor het gebruik van Gutenberg als een professional
  11. Meer blokken toevoegen aan Gutenberg Block Editor
  12. 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 .

Een nieuw bericht toevoegen

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.

Een titel toevoegen in Gutenberg

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.

Nieuwe blokkeerknop toevoegen

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.

Blokken zoeken en toevoegen in Gutenberg

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.

Elk blok heeft een eigen werkbalk

Afgezien van de werkbalk, kan elk blok ook eigen blokinstellingen hebben die in de rechterkolom van uw bewerkingsscherm worden weergegeven.

Blokinstellingen

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.

Een blok op en neer verplaatsen

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’.

Een blok opslaan om later opnieuw te gebruiken

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.

Een naam geven aan herbruikbaar blok

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.

Plaats een herbruikbaar blok

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.

Beheer uw herbruikbare blokken

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.

Importeer herbruikbare exportblokken in WordPress

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.

Documentinstellingen in Gutenberg de nieuwe WordPress-editor

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 .

WPForms blokkeren in nieuwe Gutenberg-editor

Hier is hoe Yoast SEO u toestaat om uw SEO-instellingen in de nieuwe editor te bewerken:

Yoast SEO-instellingen in de nieuwe Gutenberg-editor

WooCommerce wordt ook geleverd met widgetblokken die je gemakkelijk kunt toevoegen aan elk van je WordPress-berichten en -pagina’s.

WooCommerce-producten blokkeren

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.

Afbeeldingsblok in nieuwe WordPress-editor

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.

Instellingen voor beeldblokkering

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.

Link-knop in het lijstblok

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.

Afbeeldingsgalerie toevoegen in nieuwe WordPress-editor

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.

Een shortcode-blok toevoegen

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.

Media- en tekstblok

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.

Een knopblok toevoegen in Gutenberg

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.

Het omslagafbeeldingblok in Gutenberg-editor

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.

Tabelblok

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.

Meerdere kolommen inhoud

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.

Verplaats de blokwerkbalk naar de bovenkant van de editor

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’.

Start sneltoetsen

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.

Versleep galerijblok in nieuwe WordPress-editor

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.

Blokken insluiten

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.

YouTube-embed

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:

1. Gevorderde Gutenberg

Gevorderde Gutenberg

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

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.

3. Editor-blokken

Editor-blokken voor Gutenberg

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.

Oudere artikelen bewerken in een nieuwe WordPress-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.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *