facebook chatbots tourisme

Hoe Gutenberg (WordPress Editor) te gebruiken

20 min


102

In 2018 stapte WordPress over van zijn oude editor naar een die het “Gutenberg” heette.

In tegenstelling tot de oude editor, gebruiken WordPress-gebruikers nu een moderne blokeditor 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 probeert de nieuwe editor te begrijpen, of je bent helemaal nieuw bij WordPress, deze gids leert je de kneepjes van het vak. Je zal leren:

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

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 voorzag WordPress zijn gebruikers van een eenvoudige teksteditor.

WordPress-Classic-Editor

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

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

WordPress-WYSIWYG-editor

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

Bijvoorbeeld:

WordPress-pagina-voorbeeld

Dit is hoe de inhoud na publicatie op de website zou worden weergegeven. Maar u zou alleen kunnen bevestigen dat alles goed is vertaald van de editor naar de pagina door de functie “Preview” te gebruiken.

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 overmatige afhankelijkheid van plug-ins nodig om geavanceerdere ontwerpen en lay-outs te kunnen bouwen .

In 2018 wilde WordPress deze beperkingen rechtzetten door de nieuwe WordPress-editor (dwz Gutenberg) uit te brengen.

De Gutenberg Block Editor

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

Gutenberg

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

Gutenberg-blokken

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

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, stijl 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 met Gutenberg wordt geïnstalleerd, kunnen gebruikers de Classic Editor-plug-in installeren 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 alternatieven voor slepen-en-neerzetten-editor. Blokcategorieën zijn 
echter het meest geschikt voor professionele ontwerpers en ontwikkelaars die meer functies moeten ontgrendelen.

Laten we voorlopig dieper ingaan op Gutenberg en u een beter idee geven van wat u kunt verwachten van de WordPress-editor voor slepen en neerzetten.

Hoe de Gutenberg Block Editor te gebruiken

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

Begin met het WordPress-menu aan de linkerkant van het scherm. Als u een nieuwe webpagina wilt maken, plaatst u de muisaanwijzer op “Pagina’s” en selecteert u “Nieuwe toevoegen”. Als je een nieuwe blogpost wilt maken, plaats je de muisaanwijzer op “Posts” en selecteer je “Add New”.

WordPress-Add-New-Page

Voeg een titel toe

Geef je nieuwe pagina of post een titel in het blok “Titel toevoegen”:

Gutenberg-titelblok

Creëer je eerste blok

Paragrafen vormen 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 paragraafblok:

Gutenberg-nieuwe-alinea-blok

Als je met een alinea wilt beginnen, voeg dan je 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

Om de stijl van uw alinea aan te passen, gebruikt u de werkbalk die er net boven verschijnt.

Uitlijning

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

Gutenberg-uitlijning

De linkerkant is de standaard. U kunt er ook voor kiezen om uw inhoud in het midden of rechts uit te lijnen.

Formatteren

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

Gutenberg-paragraaf-vet

Maak de tekst cursief:

Gutenberg-paragraaf-cursief

Of voeg een hyperlink toe:

Gutenberg-alinea-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 extra opties voor tekststijlering:

Gutenberg-More-Text-Options

“Code” geeft uw tekst een stijl alsof deze in een code-editor is geschreven:

Gutenberg-alinea-code

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

Gutenberg-paragraaf-InlineImage

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

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

Gutenberg-alinea-doorhalen

Meer blokopties

De laatste knop in de werkbalk geeft altijd meer blokopties weer:

Gutenberg-More-Block-Options

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

Laten we snel samenvatten wat deze doen:

  • Verberg blokinstellingen : zorgt ervoor dat de zijbalk aan de rechterkant verdwijnt.
  • Dupliceren : maakt een exacte replica van dit blok.
  • Invoegen voor : voegt een nieuw leeg blok toe boven dit blok.
  • Invoegen na : Voegt een nieuw leeg blok toe onder dit blok.
  • Bewerken als HTML : verandert het blok in een code-editor als u in HTML wilt schrijven.
  • Toevoegen aan herbruikbare blokken : slaat het blok op, zodat u het elders op de site kunt hergebruiken.
  • Blok verwijderen: verwijdert het blok.

Transformeer Block

Er is nog een andere knop in de werkbalk waarvan u op de hoogte moet zijn:

Gutenberg-Switch-Blocks

Deze knop zal er echter niet altijd zo uitzien, dus onthoud dat u met de eerste knop het huidige blok kunt transformeren in een gerelateerd blok.

U kunt bijvoorbeeld een op tekst gebaseerd blok, zoals een alinea, omzetten in kop, lijst of citaat. U kunt echter niet zoiets als een alinea in een afbeelding of een scheidingslijn veranderen. 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 voor / Invoegen na al in de werkbalk van je blok gezien. Dat is een manier om het te doen.

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

Gutenberg-Add-Block-Cross

Als je erop klikt, worden je blokken weergegeven:

Gutenberg-Add-Block-Plus-Sign

Kies degene die je aan het nieuwe blok wilt toevoegen boven het blok dat je al hebt.

Als je de muisaanwijzer over het onderste gedeelte van het blok beweegt, zie je hetzelfde plusteken. Het enige verschil is dat er een nieuw blok wordt toegevoegd onder het blok dat je hebt.

Gebruik je toetsenbord

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

Gutenberg-Add-Block-Enter

Dit zal onmiddellijk een nieuw alineablok aan de pagina toevoegen.

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

Gutenberg-Change-New-Block

Of je kunt een slash (/) typen gevolgd door de naam van het blok dat je wilt gebruiken:

Gutenberg-Change-Block-Slash

Als u bijvoorbeeld een afbeelding wilt toevoegen, typt u “/ afbeelding”. De blokkeringsoptie 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 u 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 verschijnen. Of misschien heb je hierboven een blok toegevoegd terwijl het eronder had moeten staan.

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

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

Dit kan op twee manieren.

Gebruik de verplaatsingspijlen

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

Gutenberg-Move-pijlen

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

Gutenberg-Moved-Block

Gebruik slepen en neerzetten

Als je een meer drastische herschikking van je blokken wilt maken, moet je 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 vast die in het midden verschijnen. Je zult je cursor zien veranderen in een hand als je dit doet:

Gutenberg-Grab-Drag-and-Drop

Als u het blok naar een nieuw deel van de pagina verplaatst, zorg er dan voor dat u een donkere lijn ziet verschijnen voordat u deze neerzet:

Gutenberg-Move-Block

Dit laat je weten dat je het blok naar de beschikbare ruimte verplaatst. Zonder die regel werkt slepen en neerzetten niet.

Verwijder een blok

Als je besluit dat je een blok helemaal wilt verwijderen, heb je hier ook opties mee.

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

U kunt het ook altijd op een ouderwetse manier verwijderen. Plaats uw cursor in het blok en gebruik de knop “Verwijderen” op uw toetsenbord om het 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, ingebedde 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 op de hele site kan worden gebruikt, zoals een promotieblok voor uw blogposts of een call-to-action.

Gutenberg-Create-Herbruikbare-Block

In plaats van het blok opnieuw te maken op de pagina’s waarop het moet doorgaan, opent u uw blokopties en klikt u op “Toevoegen aan herbruikbare blokken”. Geef het dan een naam:

Gutenberg-naam-herbruikbaar

Eenmaal opgeslagen, kunt u het ophalen en gebruiken op dezelfde manier als alle blokken van Gutenberg. 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 wat betreft het helpen van gebruikers bij het maken van complexe inhoud en lay-outs. Gutenberg-blokken maken een eind aan die wegversperring.

Laten we kennis maken met de blokken:

Blokkeer categorieën

WordPress heeft goed werk verricht door de blokken in categorieën te organiseren.

Gemeenschappelijke blokken

Dit zijn uw gebruikelijke blokkades:

Gemeenschappelijke blokken

De basistekst en visuele elementen die u op een pagina gebruikt, staan ​​hier.

Blokken opmaken

Dit zijn uw opmaakblokken:

Opmaakblokken

De meeste hiervan zijn ontwikkelaarsvriendelijke blokken, dus je hebt deze misschien niet veel nodig. De table en pull quote-blokken kunnen van pas komen.

Lay-outblokken

Dit zijn uw lay-outblokken:

Layout-blokken

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

Widgets Blokken

Dit zijn uw widgets:

Widgets-blokken

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

Sluit blokken in

Dit zijn uw insluitingen:

Embeds-blokken

U gebruikt deze om inhoud van andere platforms 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 Alinea-blok om platte tekst aan uw pagina toe te voegen.

Alinea-blok

Rubriekblok

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

Rubriek-blok

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

Lijstblok

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

Lijstblok

Dit is ook handig om de leesbaarheid te verbeteren.

Afbeeldingsblok

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

Afbeelding-blok

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

Videoblok

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

Video-blok

U kunt een videobestand uploaden, er een uit uw bibliotheek kiezen of het via een link binnenhalen.

Omdat video’s veel ruimte in beslag nemen, is de beste optie om uw bestand op te slaan op een video-deelplatform 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-insluiten

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 ertoe aan te zetten actie te ondernemen:

Knopenblok

Dit kan hen leiden 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

Kolommenblok

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

Kolomblok

Om extra kolommen rechts of links toe te voegen, beweegt u de muisaanwijzer over de blokken in de kolom en drukt u op het plusteken. Het is hetzelfde als het toevoegen van een nieuw blok, alleen dan worden ze horizontaal toegevoegd.

Blokken voor het insluiten van sociale media

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

Social-media-insluiten

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

Klassiek blok

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

Gutenberg-Classic-Block

Het klassieke blok komt ook in het spel wanneer een website van de klassieke editor naar de Gutenberg-editor gaat. Gutenberg zal niet automatisch proberen om uw tekst in zijn eigen blokken om te zetten. Het plaatst ze gewoon in de klassieke editorinterface.

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

Gutenberg-Convert-Blocks

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

Gutenberg-geconverteerde blokken

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

WordPress plug-in blokken

De meeste van de 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 worden weergegeven.

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

WPForms-Block

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

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

Yoast-blokken

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

WooCommerce-blokken

Er zijn ook ‘ultieme’ Gutenberg-plug-ins die een heleboel nieuwe blokken aan je bouwer toevoegen, zoals Ultimate Addons voor Gutenberg :

Ultimate-Addons-Gutenberg

Dit soort plug-ins breiden de functionaliteit van uw block builder uit. Als u een website bouwt die speciale elementen nodig heeft, zoals Google Maps, testimonial-blokken of e-commercefunctionaliteit, kunt u deze met dergelijke plug-ins aan Gutenberg toevoegen.

Een overzicht van de document- en blokzijbalk

Nu je de blokeditor hebt uitgeschakeld, laten we onze aandacht richten op de document- en blokzijbalk.

Als je cursor in het titelblok staat of ergens op de pagina waar een blok niet bestaat, zal de zijbalk naar de documentinstellingen verwijzen:

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 zichtbaarheid

In dit paneel kunt u instellen wie de pagina mag zien (openbaar, privé of beveiligd met een wachtwoord) en wanneer deze wordt gepubliceerd (zo niet onmiddellijk). Als u de pagina volledig wilt verwijderen. U kunt dat hier ook doen.

Permalink

Gebruik dit paneel om de slug (het identificerende deel van de URL) te wijzigen. Bijvoorbeeld:

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

De uitgelichte 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ën

Dit is alleen beschikbaar voor blogposts. Gebruik dit om uw onderwerpen georganiseerd te houden.

Tags

Tags

Dit is een andere instelling die alleen beschikbaar is voor blogposts. Gebruik dit om trefwoorden toe te voegen die in uw bericht voorkomen en lezers te helpen inhoud over verwante 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 zijbalk van het blok verandert op basis van het soort blok waaraan u werkt.

De alineazijbalk toont bijvoorbeeld bewerkingsopties voor:

Paragraaf-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 zijbalk van de afbeelding geeft u daarentegen deze instellingen:

Afbeelding-blok-zijbalk

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

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

Twitter-blok-zijbalk

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, kijk dan in 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 bovenaan:

Gutenberg-werkbalk

Dit lijkt misschien niets meer dan een plek om de knoppen “Voorbeeld” en “Publiceren” op te slaan, maar er is veel meer waarvoor u de werkbalk kunt en zou moeten gebruiken.

Laten we de essentie eens bekijken:

Blokken

De eerste knop in de werkbalk is, waar u toegang heeft tot nieuwe blokken:

Gutenberg-Toolbar-Blocks

Ongedaan maken / opnieuw uitvoeren

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

Gutenberg-Toolbar-Undo

Pagina info

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

Gutenberg-Toolbar-Info

Je zult het zien:

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

Het is het aantal woorden en koppen dat de belangrijkste stukjes informatie zijn 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-navigatie

Gebruik dit om direct naar het blok te scrollen waaraan u 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 “Opslaan als concept” 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 tandwielpictogram (instellingen) wordt geklikt, wordt de zijbalk van Gutenberg weergegeven of verborgen. Dit is hoe het eruit ziet als het is uitgeschakeld:

Gutenberg-Toolbar-Instellingen-Uitgeschakeld

Dit is hoe het eruit ziet wanneer ingeschakeld:

Gutenberg-Toolbar-Settings-Enabled

Meer opties

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

Gutenberg-Toolbar-More-Options

Visie

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

Gutenberg-werkbalkweergave

“Top Toolbar” verplaatst de toolbar uit uw blokken en plakt deze bovenaan het scherm:

Gutenberg-Top-Toolbar

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-Mode

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-Mode

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

Editor-modus

De volgende set opties is voor de editor-modus.

Gutenberg-opties-editor

Gutenberg plaatst gebruikers standaard in de “Visual Editor”.

Als u uw pagina liever in HTML opmaakt, kunt u overschakelen naar “Code Editor”:

Gutenberg-code-editor

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

U kunt de code-editor openen onder ‘Bewerken als HTML’:

Gutenberg-Bewerken-HTML

Dit zal het blok naar HTML converteren:

Gutenberg-HTML-Block

Bewerk het naar eigen inzicht. Als u het terug wilt converteren naar de visuele modus, opent u de blokopties en kiest u “Visueel bewerken”:

Gutenberg-Bewerken-Visueel

Gereedschap

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, kunt u hiermee alle blokken uitschakelen die u niet gebruikt. Op die manier hoeft u, als het tijd is om naar een nieuw blok te zoeken, niet door blokken te zoeken die u nooit zult gebruiken.

Met “Herbruikbare blokken beheren” gaat u naar de editor voor herbruikbare blokken:

Gutenberg-herbruikbare blokken

Dit is waar uw opgeslagen blokken worden opgeslagen. Om de bovenliggende kopie van het blok te bewerken (of helemaal een nieuwe 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-toetsenbord-snelkoppelingen

Het enige wat de optie “Inhoud kopiëren” doet, is alle blokken op de pagina markeren en kopiëren. Gebruik dit om een ​​nieuwe pagina te maken die qua inhoud en ontwerp vergelijkbaar is. Ga gewoon naar Pagina’s> Nieuwe toevoegen en plak vervolgens uw 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-zijbalk-opties

Nogmaals, als je merkt dat er bepaalde delen van de editor zijn die je niet gebruikt (zoals Page Attributes), 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.), dan was het tijd voor verandering.

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

  • Een gepersonaliseerde editorweergave die u productiever maakt.
  • Makkelijker om inhoud te maken en aan te passen.
  • Meer geavanceerde contentcreatie zonder de technische knowhow die voorheen nodig was.
  • Herbruikbare blokken versnellen het ontwerp en zorgen voor consistentie op de hele site.
  • Makkelijker 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.


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 *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format