Globale kop
,
10 Mins Gelezen

Efficiënte workflow-tips voor de Gutenberg-editor

Home Blog Zaak Efficiënte workflow-tips voor de Gutenberg-editor

Als je je WordPress versie in de afgelopen vijf jaar hebt bijgewerkt, heb je misschien de Gutenberg editor al gebruikt om wijzigingen aan te brengen op je WordPress website.

Veel leden van de WordPress gemeenschap betreurden de overgang van de klassieke editor naar de nieuwe editor, maar veel beginners en experts zijn overtuigd geraakt door de functionaliteit.

Voor de niet-ingewijden bespreken we de voordelen van de Gutenberg-editor en voor degenen die hem al gebruiken, geven we een aantal toptips om je WordPress-workflow te verbeteren.

Wat is de Gutenberg Blokbewerker?

WordPress’s Gutenberg editor (ook wel bekend als de blok editor) is een systeem voor het maken, opmaken en publiceren van inhoud op WordPress, het content management systeem bij uitstek voor 43,1% van alle websites.

Het verving de oorspronkelijke (nu “klassieke” genoemd) editor als de standaard editor op WordPress in 2018 met de release van WordPress 5.0.

Merk op dat de klassieke editor soms ten onrechte de TinyMCE editor wordt genoemd. In feite is de klassieke editor gebaseerd op TinyMCE, en Gutenberg gebruikt nog steeds TinyMCE voor het bewerken van rijke tekst.

Het verschil tussen de klassieke editor en de WordPress blok editor heeft – zoals je misschien al hebt geraden – te maken met het gebruik van blokken.

Terwijl de klassieke editor eruitziet als een teksteditor met een leeg canvas, ziet de blokeditor eruit als een editor die je kunt slepen en neerzetten.

De belangrijkste onderdelen van de blokkeneditor zijn de inserter (voor het invoegen van blokken), het canvas voor inhoud (voor het bewerken van inhoud) en de zijbalk met instellingen (voor het wijzigen van blokinstellingen).

Er zijn verschillende bloktypes beschikbaar, waarvan de belangrijkste tekst/inhoudblokken zijn (bijv. alineablokken en lijsten). U kunt ook gebruikmaken van mediablokken (bijv. afbeeldingen), ontwerpblokken (bijv. knoppen), widgetblokken (bijv. kalender), themablokken (bijv. sitelogo) en embedblokken (bijv. YouTube).

Voordelen van Gutenberg

Voordelen van de Gutenberg-blokeditor.

Gutenberg heeft veel voordelen voor degenen die bereid zijn om de klassieke editor te dumpen en modulariteit te omarmen. Ten eerste wordt het regelmatig bijgewerkt en uitgebreid, met als hoofddoel het verder democratiseren van webpublicaties.

Op het moment van schrijven wordt de Classic Editor plugin, die officieel wordt onderhouden door WordPress, ondersteund tot 2024, hoewel dit waarschijnlijk geen harde deadline is.

Naast het toekomstbestendig maken van je site, zijn hier de belangrijkste redenen waarom je zou moeten overstappen op de blok-editor.

Gratis te gebruiken

Net als zijn voorganger is Gutenberg volledig gratis en open-source – wat betekent dat je geen betaald abonnement nodig hebt om alle functies te ontgrendelen.

Andere paginabouwers hebben ook gratis versies, maar de functies van deze versies zijn vaak beperkt om je aan te moedigen te upgraden naar een premium plan.

Beginnersvriendelijk

Hoewel veel bloggers zich tegen de verandering hebben verzet omdat ze de voorkeur geven aan de klassieke editor, wordt Gutenberg beschouwd als gebruiksvriendelijk. Er zijn geen coderingsvaardigheden (bijv. HTML, CSS) nodig en de verschillende bloktypes hebben gebruiksvriendelijke aanpassingsopties.

Door het blokformaat van Gutenberg zul je gemakkelijker complexe lay-outs kunnen implementeren om je website te laten opvallen tussen concurrenten.

Als je nog steeds de voorkeur geeft aan de klassieke editor boven Gutenberg, dan is dat geen probleem. Je kunt het klassieke blok en de werkbalk gebruiken om je webpagina te bewerken zoals je dat in de oorspronkelijke editor zou doen.

Verbeterde bewerkingservaring

Een van de voordelen van de Gutenberg-editor is dat deze een betere gebruikerservaring biedt dan de klassieke editor.

Je kunt bijvoorbeeld kiezen tussen verschillende weergaveopties, zodat je kunt simuleren hoe je website eruit zal zien op verschillende schermformaten. Dit maakt het veel gemakkelijker om een WordPress website te maken die geschikt is voor mobiele apparaten.

Bovendien heeft Gutenberg geavanceerdere functies, zoals aangepaste blokken en eenvoudiger insluiten. En alsof dat nog niet genoeg is, is de menu-indeling praktisch en intuïtief.

In 2022 breidde het WordPress team Gutenberg uit om volledige sitebewerking mogelijk te maken, wat betekent dat je deze WordPress editor kunt gebruiken om alle onderdelen van je website aan te passen in plaats van alleen berichten en pagina’s.

Compatibel

Omdat het de standaardeditor in WordPress is, zou de blokeditor geen compatibiliteitsproblemen moeten hebben met de meeste website-add-ons zoals WordPress-thema’s en plug-ins.

Dat gezegd hebbende, als je Gutenberg eenmaal onder de knie hebt, zou je sowieso niet zoveel thema’s en plugins nodig moeten hebben in vergelijking met de klassieke editor.

Voor sommige taken, zoals zoekmachineoptimalisatie (SEO), heb je echter een plugin nodig, zoals Yoast SEO.

Yoast heeft snel gezorgd voor integratie met Gutenberg-blokken. Zijn schemablokken (bijv. FAQ- en how-to blokken) profiteren van de mogelijkheden van Gutenberg – deze schema’s kunnen niet volledig worden geïmplementeerd in de klassieke editor.

Op basis van deze vooruitgang is het eenvoudig te zien waarom we Yoast hebben gerangschikt als de beste SEO tool voor WordPress in 2023.

Sneller laden van pagina’s

Omdat het een ingebouwde editor is op het WordPress dashboard met brede functionaliteit, kan Gutenberg het gebruik van WordPress plugins en thema’s verminderen, waarvan er te veel je website kunnen vertragen.

Om de snelheid van je website verder te optimaliseren, gebruik je de nieuwste versie van WordPress en kies je een webhost die deze 10 essentiële functies biedt.

Hoe u uw workflow efficiënter kunt makenmet de Gutenberg Editor

Probeer je nog steeds de voordelen van de Gutenberg-editor te ontdekken?

Je bent zeker niet de enige.

De WordPress plugin bibliotheek laat zien dat de Classic Editor plugin, die de klassieke editor herstelt, meer dan vijf miljoen actieve installaties heeft.

Hoewel de steeds uitbreidende functies van de Gutenberg-editor misschien niet voor iedereen geschikt zijn, kunnen ze sommige lastigere taken in WordPress tot een peulenschil maken.

Nadat je onze inleiding hebt gelezen over het gebruik van de Gutenberg-blokeditor, kun je deze tips uitproberen om je workflow efficiënter te maken.

Profiteer van alle verschillende blokken

Tot de meest gebruikte blokken behoren de alinea- en kopblokken. Om te beginnen open je het dashboard van WordPress en navigeer je naar Berichten. Hier klik je op Nieuw toevoegen.

Klik op Nieuw toevoegen om een nieuw bericht te maken in WordPress.
Schermafbeelding

Als je een fotograaf bent, zul je het galerijblok handig vinden. En als je materiedeskundigen interviewt als onderdeel van je blogsite, dan kan het citaatblok van pas komen.

Een lijst met tekstblokken.
Schermafbeelding

Schrijvers van gedichten en teksten kunnen gebruik maken van het versblok, terwijl het audioblok geweldig is voor muzikanten die hun werk online willen delen.

Verhoog de efficiëntie met kant-en-klare sjablonen en patronen

Kant-en-klare blokpatronen zijn handig als je ontwerpinspiratie nodig hebt. In plaats van te beginnen met een leeg canvas, kun je tijd besparen door te kiezen uit verschillende categorieën patronen, zoals berichten, tekst, galerij, oproepen tot actie en banners.

Kant-en-klare patronen zijn een voordeel van Gutenberg.
Schermafbeelding

Een herbruikbaar blok maken

Op maat gemaakte herbruikbare blokken zijn geweldig om tijd te besparen en een consistent websiteontwerp te behouden. Om een blok herbruikbaar te maken, navigeert u naar de werkbalk boven de blokken en selecteert u het pictogram met de drie puntjes voor instellingen.

Klik nu op Herbruikbaar blok maken.

Hoe maak je een herbruikbaar blok?
Schermafbeelding

Toetsenbordcombinaties voor blokeditor gebruiken

Als je een forward slash (/) typt, krijg je de optie om verschillende bloktypes te gebruiken zonder naar de block inserter te navigeren.

Als je op de drie verticale stippen rechtsboven in de editor klikt, kun je naar beneden scrollen om alle sneltoetsen voor Gutenberg te zien.

Je kunt ook Shift+Alt+H typen als je een Windows-computer gebruikt (of Ctrl+Opt+H op een Mac).

Het menu Extra in Gutenberg.
Schermafbeelding

U ziet een lijst met snelkoppelingen die uw taken voor het bewerken van inhoud kunnen stroomlijnen, zoals schakelen tussen de visuele editor en de code-editor.

Sneltoetsen.
Schermafbeelding

Zoek je favoriete weergavetype om de productiviteit te verhogen

Als u op de drie verticale stippen in de rechterbovenhoek van het dashboard van uw blokbewerker klikt, ziet u verschillende weergaveopties, zoals Fullscreen en afleidingsvrije modi.

Speel ermee om uit te vinden welke weergave voor jou het meest efficiënt is, omdat dit afhankelijk kan zijn van de taak.

Verschillende weergaven in de Gutenberg-editor.
Schermafbeelding

Bespaar tijd door WordPress shortcodes te gebruiken

Een shortcode is een WordPress basiscode tussen vierkante haken. Veel plugins hebben hun eigen WordPress shortcodes die je kunt invoeren op je webpagina om eenvoudig elementen zoals knoppen en formulieren toe te voegen.

Deze shortcodes zijn geweldig om u tijd te besparen die u anders misschien zou moeten besteden aan coderen. En ze zijn aanpasbaar, zodat u ze kunt aanpassen aan de behoeften van uw bedrijf en website.

Als je “/” typt en “shortcode” invoert, kun je de door jou gekozen shortcode direct plakken in het vak dat hieronder verschijnt.

Hoe je gemakkelijk shortcodes kunt toevoegen.
Schermafbeelding

Afbeeldingen slepen vanaf je computer

Een van de voordelen van Gutenberg is de mogelijkheid om afbeeldingen rechtstreeks vanaf uw computer te slepen. Als je dit doet, maakt Gutenberg automatisch een afbeeldingsblok aan, waardoor je tijd bespaart die je normaal zou hebben besteed aan het uploaden van een afbeelding en het proberen in te voegen in de klassieke editor.

Om een afbeelding toe te voegen met Gutenberg, sleept u de afbeelding gewoon naar de editor en laat u deze vallen wanneer er een horizontale blauwe lijn verschijnt. Bovendien, als je meerdere afbeeldingen tegelijk sleept en neerzet, voegt Gutenberg ze automatisch toe aan een galerijblok.

Sleep afbeeldingen vanaf je computer.
Schermafbeelding

Een blok vergrendelen om te voorkomen dat iemand het kan wijzigen

Door een blok te vergrendelen, met name op bepaalde pagina’s of posts die veel bezocht worden, communiceer je eenvoudig aan je teamleden dat een bepaald blok niet verplaatst of verwijderd mag worden. Dit zorgt voor consistentie van blokken en bespaart je tijd om wijzigingen die een teamlid heeft aangebracht in essentiële blokken opnieuw uit te voeren.

Selecteer het pictogram met de drie puntjes boven het blok dat je wilt vergrendelen. Selecteer nu Vergrendelen.

Een blok vergrendelen.
Schermafbeelding

Hierna wordt je gevraagd of je de beweging van het blok wilt blokkeren, de verwijdering ervan wilt voorkomen of beide (alles blokkeren).

Opties voor het vergrendelen van blokken in Gutenberg.
Schermafbeelding

Wijzig je voorkeuren om je blokkendashboard op te schonen

Nadat je het pictogram met de drie puntjes in de rechterbovenhoek hebt geselecteerd, scroll je naar beneden naar Voorkeuren.

Voorkeuren instellen in Gutenberg.
Schermafbeelding

Je kunt nu je algemene, blok- en paneelvoorkeuren wijzigen.

Hier hebben we Toon meest gebruikte blokken ingeschakeld, zodat onze veelgebruikte blokken als eerste worden weergegeven. Dit bespaart je tijd, zodat je niet telkens door blokken hoeft te scrollen die niet relevant zijn voor je website als je er een in het bijzonder wilt vinden.

Blokvoorkeuren.
Schermafbeelding

Gebruik maken van lijst- en overzichtsweergaven

Nadat je de basisblokken onder de knie hebt, is het tijd om aan de slag te gaan met ingewikkelde webpaginastructuren. Om te voorkomen dat het te ingewikkeld wordt, kun je het beste een overzichtelijke momentopname van je document maken.

Hier komen de lijst- en overzichtsweergave om de hoek kijken. Navigeer naar het pictogram met de drie regels rechts van de knop Herhalen op de bovenste werkbalk. Je zult zien dat de snelkoppeling hiervoor Shift+Alt+O is.

Knop Overzicht documenten.
Schermafbeelding

In het overzichtstabblad kun je de structuur van langere blogberichten gemakkelijk doorlopen en fouten in rubrieken opsporen.

Overzicht
Schermafbeelding

Laatste gedachten: Hoe de efficiëntie van de workflow te verbeteren met behulp van de block editor

Nu je hebt geleerd hoe je de voordelen van Gutenberg kunt gebruiken om je workflow efficiënter te maken, denk je misschien na over andere manieren om je website aan te passen, zoals het bekijken van de analytics of manieren om de snelheid te verhogen.

Bij Bluehost bieden we verschillende WordPress hostingpakketten die je de tools geven die je nodig hebt om precies dat te doen, samen met verschillende andere add-ons zoals een gratis SSL certificaat en dagelijkse website back-ups voor het eerste jaar.

En nu is het ontwerpen van een opvallende website nog eenvoudiger met WonderSuite. Elk van onze WordPress plannen wordt geleverd met een groot aantal extra functies die je website zullen laten schitteren.

Neem vandaag nog contact met ons op voor meer informatie over hoe de plannen van Bluehost het ontwerp en de functionaliteit van je site naar een hoger niveau kunnen tillen.

  • Minal is directeur Brand Marketing bij Bluehost. Met meer dan 15 jaar ervaring in de technologie-industrie, streeft ze ernaar om oplossingen en inhoud te creëren die voldoen aan de behoeften van de klant. Ze is een hondenmoeder en een vurig agendaliefhebber.

Meer informatie Bluehost redactionele richtlijnen
Alles bekijken

Schrijf een reactie

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