Gutenberg gebruiken (WordPress Editor)


hoe gutenberg-blokken te gebruikenIn 2018 verhuisde WordPress van zijn oude editor naar een die het ‘Gutenberg’ noemde.


In tegenstelling tot de oude editor, gebruiken WordPress-gebruikers nu een moderne blok-editor met slepen en neerzetten om websites te bouwen en aan te passen, inhoud te publiceren en hun diensten en producten online te verkopen.

Of je nu een oude gebruiker bent die de nieuwe editor probeert te begrijpen, of je bent helemaal nieuw voor WordPress, deze gids zal je de kneepjes leren. Je zal leren:

  • Hoe Gutenberg-blokken verschillen van de klassieke editor.
  • Hoe de blokbouwer te gebruiken om pagina’s te maken en te bewerken.
  • Wat de Gutenberg-blokken doen.
  • Hoe extra instellingen te ontgrendelen met de zijbalk.
  • Hoe u de werkbalk kunt gebruiken om productiever te zijn.

Contents

De klassieke editor versus Gutenberg-blokken

De overstap van klassieke editor naar Gutenberg-blokken is een enorme sprong voor WordPress. Laten we eens kijken hoe de editor is geëvolueerd.

De klassieke WordPress-editor

Van 2003 tot 2018 bood WordPress zijn gebruikers een basisteksteditor.

WordPress-Classic-Editor

De klassieke WordPress-editor was uw typische WYSIWYG-editor (“wat u ziet is wat u krijgt”).

Met andere woorden, je hebt je inhoud in het open veld getypt, opgemaakt met de meegeleverde werkbalk en zo zag je tekst er min of meer uit op je website.

WordPress-WYSIWYG-editor

Het is een eenvoudig genoeg interface en een waaraan veel WordPress-gebruikers in de loop der jaren gewend zijn geraakt. Maar het had zijn beperkingen.

Bijvoorbeeld:

WordPress-pagina-voorbeeld

Dit is hoe de inhoud zou worden weergegeven op de website zodra deze is gepubliceerd. Maar je zou alleen kunnen bevestigen dat alles goed is vertaald van de editor naar de pagina met behulp van de “Preview” -functie.

Er was geen manier om inhoud te schrijven binnen de daadwerkelijke context van de pagina. Bovendien was er een zekere bekendheid met HTML of een te grote afhankelijkheid van plug-ins nodig om geavanceerdere ontwerpen en lay-outs te kunnen bouwen.

In 2018 wilde WordPress deze beperkingen verhelpen door de nieuwe WordPress-editor (d.w.z.Gutenberg) vrij te geven.

De Gutenberg Block Editor

De nieuwe WordPress-editor is een blok-editor met slepen en neerzetten.

Gutenberg

Dit betekent dat inhoud niet langer in één hoofdeditor wordt geschreven. Afzonderlijke blokken worden op hun plaats gezet om de inhoud van een pagina uit te bouwen.

Gutenberg-Blocks

Wanneer elk blok is geselecteerd, wordt het geleverd met een unieke werkbalk. Dit zorgt voor een meer gestroomlijnde en aangepaste bewerkingservaring omdat u alleen de redactionele bedieningselementen te zien krijgt die u op dat moment nodig heeft.

De Gutenberg-editor heeft het ook veel gemakkelijker gemaakt om de soorten inhoud en lay-outs toe te voegen die anders te tijdrovend of moeilijk zouden zijn voor een WordPress-beginner om alleen te doen.

More-Gutenberg-Block-voorbeelden

Bovendien is er geen raadspel meer. Wat u in de blokeditor maakt, is hoe het op uw website wordt weergegeven. De lettertypen, styling en lay-outs komen allemaal overeen:

WordPress-pagina-voorbeeld-met-Gutenberg

Is de ene WordPress-editor beter dan de andere?

Wat beter is – de klassieke editor of Gutenberg – je zult dat zelf moeten uitzoeken.

Hoewel WordPress automatisch wordt geleverd met Gutenberg, kunnen gebruikers het installeren de plug-in Classic Editor als ze nog niet klaar zijn om naar de blokeditor te gaan.

Er zijn ook andere add-on-opties voor de editor beschikbaar. Elementor en Beaver Builder zijn twee van de meer populaire editor-alternatieven voor slepen en neerzetten, Blokkeer categorieën
hoewel ze het meest geschikt zijn voor professionele ontwerpers en ontwikkelaars die meer functies moeten ontgrendelen.

Laten we voorlopig een diepere duik in Gutenberg nemen en je een beter idee geven van wat je kunt verwachten van de WordPress drag-and-drop-editor.

Hoe de Gutenberg Block Editor te gebruiken

Laten we de Gutenberg-blokeditor bekijken door een nieuwe pagina (of post) in te stellen.

Begin met het WordPress-menu aan de linkerkant van het scherm. Als u een nieuwe webpagina wilt maken, plaats dan de muisaanwijzer op ‘Pagina’s’ en selecteer ‘Nieuwe toevoegen’. Als je een nieuw blogbericht wilt maken, beweeg je over ‘Berichten’ en selecteer je ‘Nieuw toevoegen’.

WordPress-Add-New-Page

Voeg een titel toe

Als je nieuwe pagina of post is gemaakt, geef je deze een titel in het blok ‘Titel toevoegen’:

Gutenberg-titelblok

Maak je eerste blok

Alinea’s bevatten over het algemeen het grootste deel van de inhoud die we op een webpagina plaatsen.Daarom is het eerste blok dat Gutenberg ons geeft altijd een alineablok:

Gutenberg-nieuw-alinea-blok

Als u met een alinea wilt beginnen, voegt u uw cursor toe aan het lege blok met de tekst ‘Begin met schrijven of typ / om een ​​blok te kiezen’. Terwijl u typt, vult uw inhoud het blok.

Pas inhoud in een blok aan

Gebruik de werkbalk die er net boven verschijnt om de stijl van uw alinea aan te passen.

Uitlijning

Bij de meeste Gutenberg-blokken heb je de mogelijkheid om de uitlijning van de inhoud binnen het blok te wijzigen:

Gutenberg-Alignment

Links is de standaard. U kunt er ook voor kiezen om uw inhoud centraal uit te lijnen of rechts uit te lijnen.

Formatteren

Elke keer dat er tekst in een blok staat, kunt u deze vetgedrukt opmaken:

Gutenberg-paragraaf-vet

Maak de tekst cursief:

Gutenberg-paragraaf-cursief

Of voeg een hyperlink toe:

Gutenberg-paragraaf-link

Als u uw links in een nieuw browservenster wilt openen, klikt u op de pijl-omlaag in de hyperlinkbalk. Als u klaar bent met het aanbrengen van uw wijzigingen, klikt u op de pijl ‘Return’ om de link op te slaan.

Extra stijlopties

Als u op de pijl-omlaag in de werkbalk klikt, vindt u aanvullende opties voor tekststilering:

Gutenberg-More-Text-Options

“Code” stijlen uw tekst alsof het is geschreven in een code-editor:

Gutenberg-alinea-code

Met “Inline afbeelding” kunt u uw tekst om een ​​afbeelding heen laten lopen:

Gutenberg-Paragraaf-InlineImage

Zoals u kunt zien, is dit in Gutenberg geen efficiënte manier om afbeeldingen en tekst naast elkaar te koppelen. (We zullen later een andere manier bekijken om dit te doen.)

Met de laatste optie hier kunt u een doorhaling toevoegen door gemarkeerde tekst:

Gutenberg-alinea-doorhalen

Meer blokopties

De laatste knop in de werkbalk onthult altijd meer blokopties:

Gutenberg-More-Block-Options

Deze opties zijn hetzelfde, ongeacht het soort blok dat u bewerkt.

Laten we snel samenvatten wat deze doen:

  • Verberg blokinstellingen: Maakt de zijbalk aan de rechterkant verdwijnen.
  • Duplicaat: Maakt een exacte replica van dit blok.
  • Voorheen invoegen: Voegt een nieuw leeg blok toe boven deze.
  • Na invoegen: Voegt een nieuw leeg blok toe onder dit blok.
  • Bewerk als HTML: Verandert het blok in een code-editor als u in HTML wilt schrijven.
  • Voeg toe aan herbruikbare blokken: Slaat het blok op zodat u het elders op de site opnieuw kunt gebruiken.
  • Blok verwijderen: Verwijdert het blok.

Transform Block

Er is nog een andere knop in de werkbalk waar u op moet letten:

Gutenberg-Switch-Blocks

Deze knop ziet er echter niet altijd zo uit, dus onthoud dat je met de eerste knop het huidige blok kunt omzetten in een gerelateerd blok.

U kunt bijvoorbeeld een op tekst gebaseerd blok zoals Alinea omzetten in Kop, Lijst of Citaat. U kunt zoiets als een alinea echter niet omzetten in een afbeelding of een scheidingslijn. Daar heb je een nieuw blok voor nodig.

Voeg een nieuw blok toe

Om een ​​nieuw blok aan je pagina toe te voegen, heb je een aantal opties.

Voor / na invoegen

Je hebt de opties Invoegen vóór / Invoegen na al gezien in de werkbalk van je blok. Dat is een manier om het te doen.

Als je wegklikt van je bestaande blok en erover zweeft, zie je een klein plusteken verschijnen:

Gutenberg-Add-Block-Cross

Als je erop klikt, worden je blokken zichtbaar:

Gutenberg-Add-Block-Plus-Sign

Kies degene die u het nieuwe blok wilt toevoegen boven het blok dat u al heeft.

Als je over het onderste deel van het blok zweeft, zie je hetzelfde plusteken. Het enige verschil is dat het een nieuw blok zal toevoegen onder het blok dat je hebt.

Gebruik je toetsenbord

Een andere manier om een ​​nieuw blok toe te voegen, is door op de toets “Return” op uw toetsenbord te drukken:

Gutenberg-Add-Block-Enter

Hiermee wordt onmiddellijk een nieuw alineablok aan de pagina toegevoegd.

Als je het in een ander soort blok wilt veranderen, kun je het plusteken links van het nieuwe blok gebruiken:

Gutenberg-Change-New-Block

Of u kunt een schuine streep (/) typen, gevolgd door de naam van het blok dat u wilt gebruiken:

Gutenberg-Change-Block-Slash

Als u bijvoorbeeld een afbeelding wilt toevoegen, typt u “/ afbeelding”. De blokoptie wordt automatisch ingevuld terwijl u de overeenkomende naam typt.

Voeg een blok toe vanuit de werkbalk

U kunt altijd gewoon de basisfunctie voor het toevoegen van blokken in de werkbalk gebruiken:

Gutenberg-Add-Block

Blader door de opties of typ de naam van het blok dat je zoekt.

Verplaats een blok

Als u eenmaal bent begonnen met het maken van blokken, kunt u besluiten dat u niet tevreden bent met de volgorde waarin ze worden weergegeven. Of misschien heb je hierboven een blok toegevoegd terwijl het hieronder had moeten zijn.

Het is niet nodig blokken te verwijderen of inhoud van het ene blok in het andere te knippen en plakken. De oplossing is simpel.

Gutenberg is een blok-editor met slepen en neerzetten. Dit betekent dat u uw blokken gemakkelijk kunt verplaatsen waar u maar wilt.

Dit kan op twee manieren.

Gebruik de bewegingspijlen

De eerste optie is om de verplaatsingspijlen aan de linkerkant van elk blok te gebruiken. Plaats de muisaanwijzer op het blok dat je wilt verplaatsen en je vindt een pijl omhoog en omlaag:

Gutenberg-Move-Arrows

Als u alleen maar een blok één keer omhoog of omlaag wilt verplaatsen, werkt deze optie goed.

Gutenberg-Moved-Block

Gebruik slepen en neerzetten

Als u uw blokken drastischer wilt herschikken, moet u slepen en neerzetten gebruiken.

Het bevindt zich op dezelfde plaats als de pijlen. Plaats de muisaanwijzer op het blok dat je wilt verplaatsen en pak de stippen in het midden vast. Je ziet je cursor veranderen in een hand als je dat doet:

Gutenberg-Grab-Drag-and-Drop

Zorg er bij het verplaatsen van het blok naar een nieuw deel van de pagina voor dat u een donkere lijn ziet verschijnen voordat u het neerzet:

Gutenberg-Move-Block

Zo weet je dat je het blok naar de beschikbare ruimte verplaatst. Zonder die lijn werkt het slepen en neerzetten niet.

Verwijder een blok

Als u besluit dat u een blok helemaal wilt verwijderen, heeft u hier ook opties voor.

Je hebt er al een gezien. Het zit in de extra opties van je blok. Klik gewoon op “Verwijder blok” en het wordt verwijderd.

Je kunt het ook altijd op een ouderwetse manier verwijderen. Plaats uw cursor binnen het blok en gebruik de knop ‘Verwijderen’ van uw toetsenbord om deze te verwijderen.

Houd er echter rekening mee dat als het een op tekst gebaseerd blok is, u eerst de inhoud moet verwijderen voordat u deze op deze manier kunt verwijderen. Voor al het andere – een afbeelding, ingesloten widget, enz. – kunt u gewoon uw “Delete” -toets gebruiken.

U kunt ook het blok markeren (door uw cursor erover te slepen) en vervolgens op de toets “Verwijderen” drukken. Dit is handig als u meer dan één blok tegelijk wilt markeren en verwijderen.

Maak een herbruikbaar blok

Herbruikbare blokken zijn handig wanneer u een element wilt maken dat voor de hele site kan worden gebruikt, zoals een promotieblok voor uw blogposts of een call-to-action.

Gutenberg-Create-Reusable-Block

In plaats van te proberen het blok opnieuw te creëren op de pagina’s waar het door moet gaan, opent u uw blokopties en klikt u op “Toevoegen aan herbruikbare blokken”. Geef het dan een naam:

Gutenberg-naam-herbruikbaar

Eenmaal opgeslagen, kun je het ophalen en gebruiken op dezelfde manier als een van de Gutenberg-blokken. Je vindt het in een nieuwe categorie met de naam ‘Herbruikbaar’:

Gutenberg-herbruikbare categorie

Een rondleiding door Gutenberg-blokken

De klassieke WordPress-editor liet veel te wensen over om gebruikers te helpen bij het maken van complexe inhoud en lay-outs. Gutenberg-blokken nemen die wegversperring weg.

Laten we de blokken leren kennen:

Blokkeer categorieën

WordPress heeft goed werk geleverd door de blokken in categorieën te ordenen.

Gemeenschappelijke blokken

Dit zijn je gebruikelijke blokkades:

Gemeenschappelijke blokken

De basistekst en visuele elementen die u op een pagina gebruikt, zijn hier te vinden.

Blokken opmaken

Dit zijn je opmaakblokken:

Opmaakblokken

De meeste hiervan zijn ontwikkelaarvriendelijke blokken, dus je hebt deze misschien niet veel nodig. De tabel en de aanhalingstekens kunnen handig zijn.

Lay-outblokken

Dit zijn je layoutblokken:

Layout-blokken

Als u pauzes aan uw inhoud wilt toevoegen (zoals met grote spatie of scheidingslijn) of speciale elementen (zoals een knop), vindt u die dingen hier.

Widgetsblokken

Dit zijn je widgets:

Widgets-blokken

Meestal zijn dit de elementen die in de zijbalk van je blog moeten komen en niet op je pagina’s. De enige uitzonderingen die u zult vinden, zijn blokken die door andere plug-ins zijn gemaakt, zoals dit WPForms-voorbeeld.

Sluit blokken in

Dit zijn je insluitingen:

Insluitblokken

Je gebruikt deze om inhoud van andere platforms over te brengen. Dit is goed voor het insluiten van zaken als YouTube-video’s, SoundCloud-clips en Twitter-berichten.

Meest gebruikte Gutenberg-blokken

Zoals je kunt zien, zijn er tientallen Gutenberg-blokken beschikbaar. Dat gezegd hebbende, er zijn bepaalde elementen die iedereen gebruikt om pagina’s of berichten in WordPress te maken, dus begin met het leren van de basis:

Paragraafblok

Gebruik het alineablok om platte tekst aan uw pagina toe te voegen.

Alinea-blok

Rubriekblok

Gebruik het kopblok om een ​​koptekst aan uw pagina toe te voegen.

Rubriekblok

Hiermee kunt u nieuwe onderwerpen op de pagina introduceren en uw inhoud gemakkelijker leesbaar maken. Met de knoppen H2, H3 en H4 kunt u ook een hiërarchie voor de paginakoppen maken.

Lijstblok

Gebruik het lijstblok om een ​​lijst met opsommingstekens of nummers aan de pagina toe te voegen:

Lijst-blok

Dit is ook handig om de leesbaarheid te verbeteren.

Afbeeldingsblok

Gebruik het afbeeldingsblok om een ​​afbeelding aan uw pagina toe te voegen.

Beeldblok

U kunt een afbeelding uploaden vanaf uw schijf of er een selecteren die al in uw mediabibliotheek staat.

Videoblok

Gebruik het videoblok om een ​​afbeelding op uw pagina in te sluiten.

Videoblok

Je kunt een videobestand uploaden, er een uit je bibliotheek kiezen of het via een link ophalen.

Omdat video’s veel ruimte in beslag nemen, is de beste optie om uw bestand op te slaan op een platform voor het delen van video’s zoals Vimeo of YouTube. Sluit het vervolgens in met een link.

Hiervoor gebruik je het videoblok niet. Zoek in plaats daarvan naar de bijbehorende insluiting.

YouTube heeft er een:

YouTube-insluiting

Net als Vimeo:

Vimeo-Embed

U moet hetzelfde doen voor alle audiobestanden (zoals podcasts of soundtracks) die u aan de pagina wilt toevoegen. Gebruik hiervoor het audioblok of de bijbehorende embed (zoals voor Spotify).

Knopblok

Gebruik het knoppenblok om uw bezoekers of lezers aan te zetten tot actie:

Knopenblok

Dit zou hen kunnen verwijzen naar: “Nu plannen”, “Aanmelden”, “Meer lezen”, enz.

Media- en tekstblok

Zoals eerder vermeld, is de optie Inline-afbeelding in het alineablok een inefficiënte manier om tekst en afbeeldingen samen te voegen. Gebruik in plaats daarvan het blok Media en tekst om dit te doen:

Media-en-tekstblok

Kolommen blokkeren

Een andere manier om twee verschillende blokken (van hetzelfde of verschillende type) naast elkaar te plaatsen, is door het Kolommenblok te gebruiken:

Kolomblok

Om extra kolommen rechts of links toe te voegen, beweeg je over de blokken in de kolom en druk je op het plusteken. Het is hetzelfde als het toevoegen van een nieuw blok, alleen worden deze horizontaal toegevoegd.

Insluitblokken voor sociale media

In plaats van de insluitcode van sociale media te gebruiken om een ​​bericht op uw pagina te plaatsen, voegt u hier de link naar het bericht toe:

Insluiten op sociale media

Er zijn insluitblokken voor Facebook, Twitter en Instagram, dus zoek het insluitblok dat overeenkomt met uw post op sociale media.

Klassiek blok

Met het klassieke blok kun je doorgaan met het maken van inhoud in WordPress met behulp van de klassieke editor:

Gutenberg-Classic-Block

Het klassieke blok speelt ook een rol wanneer een website van de klassieke editor naar de Gutenberg-editor gaat. Gutenberg probeert niet automatisch uw tekst om te zetten in zijn eigen blokken. Het plaatst ze gewoon in de klassieke editor-interface.

Als je je klassieke blok wilt converteren naar Gutenberg-blokken, ga je naar “Meer opties” en kies je “Converteren naar blokken”:

Gutenberg-Convert-Blocks

Het zal zijn best doen om elk element in je editor te converteren naar een bijbehorend blok:

Gutenberg-geconverteerde blokken

Vergeet niet om de uitgevoerde blokken te controleren op eventuele fouten voordat u uw wijzigingen opslaat.

WordPress Plugin Blocks

De meeste populaire plug-ins die door WordPress-gebruikers worden gebruikt, zijn Gutenberg-compatibel. In sommige gevallen hebben deze plug-ins speciale blokken gemaakt die in uw editor verschijnen.

Als u bijvoorbeeld een plug-in voor contactformulieren gebruikt, zoals WPForms, je zou er een bijbehorend blok voor moeten vinden:

WPForms-Block

Maak gewoon uw formulier in de plug-in en zoek het vervolgens in de vervolgkeuzelijst hier. U hoeft uw shortcodes voor formulieren niet meer op te sporen en te plakken.

Yoast, een populaire SEO-plug-in, is een andere die nieuwe blokken aan Gutenberg heeft toegevoegd:

Yoast-Blocks

WooCommerce, De eCommerce-oplossing van WordPress heeft hetzelfde gedaan:

WooCommerce-Blocks

Er zijn ook “ultieme” Gutenberg-plug-ins die een heleboel nieuwe blokken aan je bouwer toevoegen, zoals Ultieme add-ons voor Gutenberg:

Ultimate-Addons-Gutenberg

Dit soort plug-ins breiden de functionaliteit van uw block builder uit. Als je een website bouwt die speciale elementen nodig heeft – zoals Google Maps, testimonial-blokken of eCommerce-functionaliteit – dan kun je ze aan Gutenberg toevoegen met dergelijke plug-ins.

Een overzicht van het document en de zijbalk blokkeren

Nu u de blok-editor heeft uitgeschakeld, gaan we onze aandacht richten op het document en de zijbalk blokkeren.

Wanneer uw cursor zich in het titelblok bevindt of ergens op de pagina waar een blok niet bestaat, wijst de zijbalk naar de documentinstellingen:

Document zijbalk

Hiermee kunt u zaken als de status en het uiterlijk van de pagina beheren.

Dit zijn de belangrijkste die u moet weten:

Status en zichtbaarheid

Status en zichtbaarheidIn dit paneel kunt u aanpassen wie de pagina mag zien (openbaar, privé of met een wachtwoord beveiligd) en wanneer deze wordt gepubliceerd (zo niet onmiddellijk). Als u de pagina volledig wilt verwijderen. Dat kun je hier ook doen.

PermalinkGebruik dit paneel om de slug (het identificerende stuk van de URL) te veranderen. Bijvoorbeeld:

https://mywebsite.com/gutenberg-block-builder /

Uitgelichte afbeeldingDe aanbevolen afbeelding is de miniatuurafbeelding die mensen zien wanneer uw blogberichten worden weergegeven in uw hoofdblogfeed. Het is ook wat sociale mediaplatforms gebruiken bij het weergeven van voorbeelden van uw links.

Categorieën

CategorieënDit is alleen beschikbaar voor blogposts. Gebruik dit om uw onderwerpen overzichtelijk te houden.

Tags

TagsDit is een andere instelling die alleen beschikbaar is voor blogposts. Gebruik dit om trefwoorden toe te voegen die in uw bericht verschijnen en om lezers te helpen inhoud over gerelateerde onderwerpen te vinden.

Wanneer uw cursor in een van de blokken op uw pagina wordt geplaatst (behalve de titel), schakelt de zijbalk over naar een blokeditor:

Blok-zijbalk

Deze zijbalk geeft je extra bewerkingsopties voor je blokken als je ze wilt. De blokzijbalk verandert op basis van het soort blok waaraan je werkt.

De zijbalk van de alinea toont bijvoorbeeld bewerkingsopties voor:

Alinea-blok-zijbalk

U kunt de grootte van uw tekst aanpassen, evenals de kleur van de tekst of achtergrond van het blok. Als u weet hoe u CSS-klassen moet gebruiken, kunt u het uiterlijk van het blok verder aanpassen met “Geavanceerde instellingen”.

De afbeeldingszijbalk geeft u daarentegen deze instellingen:

Image-Block-Sidebar

U kunt alt-tekst aan de afbeelding toevoegen (belangrijk voor SEO), de afbeeldingsgrootte wijzigen en de afbeelding aan een webpagina koppelen.

Sommige blokken bieden geen extra instellingen in de zijbalk zoals de Twitter-insluiting:

Twitter-Block-Sidebar

Het enige dat u kunt doen, is een aangepaste CSS-klasse maken onder ‘Geavanceerde instellingen’.

Kort gezegd: als je ooit het gevoel hebt dat je je blok niet volledig kunt bewerken met de blokwerkbalk, controleer dan de zijbalk voor extra opties.

Wat te doen met de werkbalk

Het laatste deel van de editor waarmee u vertrouwd moet raken, is de werkbalk die bovenaan staat:

Gutenberg-Toolbar

Dit lijkt misschien niets meer dan een plek om de knoppen ‘Voorbeeld’ en ‘Publiceren’ op te slaan, maar er is veel meer dat u kunt en zou moeten gebruik de werkbalk voor.

Laten we de basis bekijken:

Blokken

De eerste knop in de werkbalk is, waar je toegang hebt tot nieuwe blokken:

Gutenberg-Toolbar-Blocks

Ongedaan maken / opnieuw uitvoeren

Met de volgende twee knoppen kunt u de laatste wijziging die u op de pagina hebt aangebracht, ongedaan maken (de pijl die naar links wijst) of opnieuw uitvoeren (de pijl die naar rechts wijst):

Gutenberg-Toolbar-ongedaan maken

Pagina info

Voor degenen onder u die pagina’s willen maken waar uw bezoekers gemakkelijk doorheen kunnen scannen, geeft de knop “i” (info) u een overzicht van uw inhoud:

Gutenberg-Toolbar-Info

Je zult het zien:

  • Hoeveel woorden je hebt geschreven.
  • Hoeveel titels er zijn, met een opsplitsing van de titels eronder.
  • Hoeveel alinea’s zijn er.
  • Hoeveel blokken je hebt gebruikt.

Het zijn de woord- en koptelling die de belangrijkste informatie vormen waarop u zich hier moet concentreren.

Paginastructuur

Het volgende deel van de werkbalk onthult elk van de blokken die je hebt gebruikt om je pagina te maken:

Gutenberg-Block-Navigation

Gebruik dit om direct naar het blok te scrollen waar je aan wilt werken. Dit is handig voor het bewerken van inhoud op langere pagina’s en berichten.

Instellingen opslaan

Je gebruikt deze eerste drie knoppen bij elke pagina of post die je maakt:

Gutenberg-Save-instellingen

Gebruik “Save Draft” om uw wijzigingen privé op te slaan terwijl u aan een pagina werkt.

Gebruik “Preview” om de pagina op uw website te bekijken.

Gebruik “Publiceren” om uw pagina naar de live website te pushen. Zodra de pagina is gepubliceerd, verandert deze knop in “Update”. Gebruik dit om nieuwe versies van uw pagina’s op te slaan en naar de site te pushen.

Instellingen

Wanneer op het tandwiel (instellingen) pictogram wordt geklikt, verbergt of toont het de Gutenberg-zijbalk. Zo ziet het eruit als het is uitgeschakeld:

Gutenberg-Toolbar-instellingen-uitgeschakeld

Zo ziet het eruit als het is ingeschakeld:

Gutenberg-Toolbar-instellingen ingeschakeld

Meer opties

De laatste knop in de werkbalk onthult extra opties en tools. Gebruik dit als u uw Gutenberg-werkruimte wilt personaliseren.

Gutenberg-Toolbar-Meer-opties

Visie

De eerste set opties met betrekking tot de “Weergave”:

Gutenberg-Toolbar-weergave

“Top Toolbar” verplaatst de werkbalk uit uw blokken en plakt deze aan de bovenkant van het scherm:

Gutenberg-Top-werkbalk

De bewerkingsopties veranderen nog steeds op basis van het blok dat je hebt geselecteerd. Het enige verschil is dat het nu alleen bovenaan de pagina staat.

“Spotlight-modus” vervaagt alle blokken die niet in gebruik zijn:

Gutenberg-Spotlight-modus

Als u hulp wilt bij het focussen op één blok tegelijk, is dit een handig hulpmiddel om in te schakelen.

‘Fullscreen Mode’ is de afleidingsvrije schrijfmodus van Gutenberg:

Gutenberg-Fullscreen-modus

Het verwijdert de WordPress-menu’s aan de boven- en linkerkant en de Gutenberg-zijbalk aan de rechterkant.

Editor-modus

De volgende reeks opties is voor de bewerkingsmodus.

Gutenberg-Options-Editor

Standaard plaatst Gutenberg gebruikers in de “Visual Editor”.

Als u er de voorkeur aan geeft uw pagina in HTML op te stellen, kunt u overschakelen naar ‘Code Editor’:

Gutenberg-Code-Editor

Een effectievere en schonere manier om uw blokken in HTML te bewerken, is door deze afzonderlijk af te handelen (aangezien u waarschijnlijk niet de hele pagina-code hoeft te bewerken).

U kunt de code-editor openen onder “Bewerken als HTML”:

Gutenberg-Edit-HTML

Dit zet het blok om naar HTML:

Gutenberg-HTML-Block

Bewerk het naar eigen inzicht. Als je het terug wilt converteren naar visuele modus, open je de blokopties en kies je “Visueel bewerken”:

Gutenberg-Visueel bewerken

Hulpmiddelen

Gutenberg wordt ook geleverd met een set tools waarmee u uw ervaring in de editor kunt stroomlijnen:

Gutenberg-Tools

De eerste tool is de “Block Manager”:

Gutenberg-Block-Manager

In tegenstelling tot de bloknavigatietool die we eerder zagen, kun je hiermee alle blokken uitschakelen die je niet gebruikt. Op die manier hoeft u, wanneer het tijd is om naar een nieuw blok te zoeken, niet door blokken te bladeren die u nooit zult gebruiken.

“Beheer herbruikbare blokken” brengt u naar de herbruikbare blokken-editor:

Gutenberg-herbruikbare blokken

Dit is waar je opgeslagen blokken worden opgeslagen. Om de bovenliggende kopie van het blok te bewerken (of helemaal een nieuw te maken), doe dit hier.

Hoewel Gutenberg het zeker gemakkelijker heeft gemaakt om inhoud in WordPress te maken, kunnen sommige acties vervelend worden. Door de “snelkoppelingen” van Gutenberg te gebruiken, kunt u dingen doen zoals uw laatste bewerking ongedaan maken, een blok dupliceren, gemarkeerde tekst cursief maken en uw wijzigingen opslaan met alleen uw toetsenbord.

Gutenberg-sneltoetsen

Alles wat de optie “Inhoud kopiëren” doet, is het markeren en kopiëren van alle blokken op de pagina. Gebruik dit om een ​​nieuwe pagina te maken die qua inhoud en ontwerp vergelijkbaar is. Ga gewoon naar Pages> Add New en plak je blokken in de lege pagina.

De laatste optie hier heet “Opties”. Wat het echter echt doet, is dat u bepaalde delen van de documentinstellingen in de zijbalk kunt deactiveren:

Gutenberg-Sidebar-opties

Nogmaals, als je merkt dat er bepaalde delen van de editor zijn die je niet gebruikt (zoals Paginakenmerken), schakel ze dan hier uit zodat ze niet afleiden van de elementen die je nodig hebt.

Afronden

Omdat WordPress sinds dag 1 dezelfde editor had gebruikt, was er enige terugslag toen Gutenberg voor het eerst werd geïntroduceerd.

Maar als je kijkt naar de drag-and-drop-competitie die zich opstapelt rond WordPress (Wix, Shopify, Squarespace, etc.), was het tijd voor verandering.

Deze evolutie van de editor heeft zijn vruchten afgeworpen, waardoor WordPress gebruikers op alle niveaus van dienst kan zijn. De gebruikers profiteren nu van de volgende voordelen bij het bouwen van websites met een blokeditor:

  • Een gepersonaliseerde editorweergave die u productiever maakt.
  • Gemakkelijker om inhoud te maken en aan te passen.
  • Geavanceerdere contentcreatie zonder de eerder benodigde technische knowhow.
  • Herbruikbare blokken versnellen het ontwerp en zorgen voor consistentie op de hele site.
  • Gemakkelijker om conversie-elementen toe te voegen en te configureren (zoals call-to-action-knoppen en formulieren).
  • Populaire plug-ins en thema’s zijn compatibel met Gutenberg.
  • Snellere starttijd.

Vanaf 2022 is de klassieke editor niet meer beschikbaar. Dit is dus het perfecte moment om erachter te komen hoe u Gutenberg voor u gaat laten werken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map