WordPress is en blijft het meest populaire programma als content manager, oftewel het meest makkelijk programma om een website te bouwen. Sinds de release op 27 maart 2003, is WordPress zeker het programma wat het meest wordt gedownload en geïnstalleerd wanneer men zelf aan de gang wil met een website. WordPress is sindsdien het meest geziene programma om een website te ontwerpen, een website bij te houden of om te bloggen. Maar zou het net zo populair blijven zonder de nodige updates? Waarschijnlijk niet toch?
Deze regelmatige updates zijn voor WordPress nodig om de, meer dan 60 miljoen, gebruikers tevreden te houden. Alle updates welke zo nu en dan plaats vinden, zowel klein als groot, zijn noodzakelijk. Momenteel staat WordPress aan het begin van een hele grote update. Over deze update is al veel gezegd, maar eindelijk is hij er dan, WordPress Gutenberg! Deze nieuwste update, de Gutenberg editor, zal de plek van de heersende WordPress TinyMCe editor, de standaard bewerker, over gaan nemen.
In dit artikel zullen we er niet verder op in gaan wat de verschillen zijn, dit artikel zal zijn gefocust op het profijt wat je zult hebben van deze nieuwe editor en geven we je een beter inzicht in WordPress Gutenberg Editor en hoe je deze kunt inzetten op jouw website.
Laten we beginnen met een introductie van Gutenberg WordPress.
Wat is WordPress Gutenberg?
Gutenberg is een tekst bewerkingsprogramma wat je een nieuwe mogelijkheid geeft om teksten toe te voegen aan je WordPress site. Maar het is meer dan een bewerkingsprogramma. Het brengt jouw ervaring om tekst te bewerken naar een compleet nieuw level. Het programma werd vernoemd naar Johannes Gutenberg, welke dit fantastische programma op de kaart zette. Het programma geeft een nieuwe kijk op het verwerken van tekst en is gebouwd in React. React is een duidelijk verklarend en flexibel Javascript bibliotheek dat het verwerken makkelijker, schaalbaar en sneller maakt.
De editor Gutenberg is Block based. Elke onderdeel is toe te voegen door middel van een block. Er zijn niet alleen blocks voor tekst, maar ook voor een afbeelding, button, paragraaf etc. Het programma deelt de mogelijkheden op in verschillende soorten blocks. En het mooiste moet nog komen, jij bepaalt waar je deze blocks plaatst op jouw website! Je kunt ze omhoog of omlaag verplaatsen en precies plaatsen waar jij ze wilt. Wanneer je een block in de toekomst wilt wijzigen kun je deze gewoon aanklikken en de inhoud hiervan direct veranderen zonder lastige codes te hoeven kennen. Gewoon er op klikken en de verandering aanbrengen. Het programma geeft je zelfs de mogelijkheid om jouw eigen blocks te ontwerpen.
Vanaf WordPress 5.0 word Gutenberg automatisch mee geïnstalleerd, wanneer je een WordPress site installeert. Voorheen was Gutenberg alleen te downloaden als een plugin. Nu Gutenberg geïntrigeerd in de hele WordPress installatie, hoopt men het gebruik van WordPress nog klantvriendelijker te maken voor zijn gebruikers. De gebruiker krijgt door het gebruik van dit programma direct een beeld hoe de uiteindelijke website er uit komt te zien als het is gepubliceerd. Met de Live preview zie je direct waar je block komt te staan en hoe dit er als eind resultaat uit zal zien. Dit geeft je de mogelijkheid om direct hierin wijzigingen aan te brengen.
Dat Gutenberg werd toegevoegd aan de standaard WordPress installatie was natuurlijk groot nieuws. De een vond het een goed plan terwijl andere met arendsogen er naar keken en zich afvroegen of het wel een goed idee was om dit toe te voegen aan het zo populaire Content Manager programma. Laten we de voor en tegens eens onder elkaar zetten.
Voordelen:
- Blocks en een snel zicht op hoe het er uit komt te zien.
- Gezamenlijke bewerking
- Tekst kollommen
- Geen verstand van codes nodig
- Mobiel – vriendelijk
Nadelen:
- De permalink kan niet worden aangepast
- Het programma bevat nog wat kinderziektes
- Weinig reviews over te vinden
- Het werkt momenteel nog niet op live-websites
Hoe gebruiken we Gutenberg?
Laten we eens kijken hoe Gutenberg werkt. Op het eerste gezicht ziet het er niet echt anders uit als de TinyMCE editor. Wat Gutenberg anders maakt is de mogelijkheid om verschillende blocks toe te voegen aan je website, met verschillende soorten inhoud. (Tekst, afbeelding, button etc)
We gaan eens kijken hoe die Gutenberg nu precies werkt en hoe we een simpele post creëren. In ons verhaal gaan we uit van de Engelse versie.
- Voeg een titel toe aan jouw pagina of post.
- Klik op de Plus button en voeg nieuwe blocks toe. Hier kun je kiezen uit een groot assortiment verschillende blocks en hun mogelijkheden.
- Undo/Redo buttons maken het mogelijk om naar voren of achteren te scrollen.
- De settings omgeving geeft je verschillende opties, die overeenkomen met de TinyMCE editor. Vanaf hier kun je wijzigingen aanbrengen in jouw afbeelding, tekst categorie, kun je bepalen hoe het er uit gaat zien en nog veel meer.
- Wanneer je een block aanklikt zal in het settings gebied alle relevante informatie zichtbaar worden.
- Deze buttons geven jou de mogelijkheid om een voorbeeld van de website te zien en hem uiteindelijk te publiceren.
Wanneer je op de Plus button klikt zal er een scherm verschijnen waarop we 4 tabbladen zien. Suggested / recent, blocks, embeds en shared. Deze leggen we hier onder uit. Ook zal je een search oftewel zoek mogelijkheid zien, waar je snel en gemakkelijk de block op kan zoeken welke je wilt bewerken.
Suggested / Recent:
Wanneer je nog geen blocks hebt gemaakt zal dit tabblad Suggested heten. Wanneer je echter al wel blocks hebt gemaakt toont dit tabblad de naam Recent en laat je de meest recente blocks zien.
Blocks:
Hier vind je alle gemaakte blocks. Deze worden opgedeeld in 4 categorieën, namelijk Common blocks (Gemeenschappelijke blocks), Formating (opmaak), Layout en Widgets.
Embeds:
Onder dit tabblad vind je de blocks welke geïntrigeerde audio en video bevat van verschillende sociale media kanalen en andere populaire websites.
Om dingen duidelijker te maken, laat ik je zien hoe je een post kunt maken met behulp van WordPress Gutenberg. Er zijn diverse mogelijkheden en toevoegingen, maar wij gaan ons alleen richten op:
- Een titel toe voegen
- Een paragraaf of gewone tekst toevoegen
- Een afbeelding toevoegen
- Lijsten maken
- CTA button
- Een video van Youtube toevoegen (embedding)
Wanneer je nog geen WordPress Gutenberg hebt, dien je allereerst de pluging te downloaden en te instaleren in jouw WordPress site.
Stap 1: een titel toevoegen aan een Gutenberg post
Laten we beginnen bij het begin, we voegen een titel toe aan onze post. Een nieuwe post wel te verstaan. Klik hier voor op het vak waar Add title is geschreven en geef je post een duidelijke naam.
Stap 2: Een paragraaf toevoegen
In het vak onder de titel gaan we nu tekst invoeren. Wanneer we een extra block hier willen toevoegen, dan klikken we op enter. Wat ook een mogelijkheid is, is te klikken op het + button en te kiezen voor Paragraph block.
Gutenberg geeft je tevens de mogelijkheid om hier het tekst formaat en de opstelling van jouw tekst aan te passen. Tevens kun je gemakkelijk een link toevoegen of verwijderen. Je hebt de totale controle over hoe jouw tekst er uit moet komen te zien.
Stap 3: Een afbeelding toevoegen
Om een afbeelding toe te voegen aan jouw post, kiezen we allereerst waar we deze willen plaatsen. Plaats je muis op deze plek. Klik dan op de + button en kies voor image block. Klik vervolgens op upload en kies uit jouw bibliotheek welke afbeelding je daar wilt plaatsen.
Stap 4: Lijsten maken
Om een lijst te plaatsen in jouw post, ga zoals bij stap 3 met je muis naar de plek waar je de lijst wilt toevoegen. Klik vervolgens op de + button. Kies uit de verschillende blocks voor Listing. Typ vervolgens heel simpel jouw lijst of punten.
Stap 5: Een CTA button toevoegen
Om een Call To Action (CTA) button toe te voegen zijn er meerdere mogelijkheden. Allereerst gaan we op zoek naar de Button block. Geef jouw button een relevante naam en geef het daarna de style die bij jouw website past. Aan de button kun je tevens een link hangen van de pagina waar hij de bezoeker naar toe begeleid wanneer er op de button wordt geklikt. Ook bij het restylen van de button heb je geen code kennis nodig.
Stap 6: Een Youtube video toe voegen
Als je een Youtube video wilt toevoegen aan jouw post, zijn de stappen bijna gelijk als bij het toevoegen van een afbeelding, button of tekst. Bepaal met je muis de locatie van de video en klik op de + button. Ga naar het tabblad Embeds. Wanneer je hier voor Youtube hebt gekozen, kun je de URL van Youtube toevoegen. Dat is eigenlijk alles, Youtube zal de video, op de jouw gewenste en aan gegeven locatie, vertonen.
Tot slot kun je zien via “voorbeeld” hoe je post er uit komt te zien. Is dit helemaal naar wens dan kun je de post publiceren.
Zo ontwerpen we dus een simpele post en voegen we alle onderdelen toe door het gebruik van WordPress Gutenberg.
Extra Functies
Zoals we al eerder zeiden, beschikt de WordPress Gutenberg editor over nog veel meer extra functies. Enkele hier van zijn onder andere:
- Extra CSS toevoegen
- Cover Image / Hero Image
- Tekst kolommen
- Aan te passen afbeeldingen galerij
- Quotes toe voegen aan je post of pagina
- En nog veel meer…
Pak het in!
Sinds men weet dat content op een website zeer belangrijk is, zet Gutenberg het toevoegen van content op de voorgrond. Het helpt WordPress gebruikers snel en gemakkelijk content toe te voegen aan een website en deze content geheel te personaliseren. Jouw content zal vanaf nu er altijd professioneel uit zien. Elk element is aan te passen aan jouw wensen en heeft zijn eigen block. En het beste van allemaal, je hebt geen professionele website bouwer meer nodig om jouw website aan te passen aan je wensen.
De Gutenberg editor is absoluut een aanrader als je meer en mooier content toe wilt voegen aan jouw website. Het maakt de hele ervaring met ontwerpen en publiceren van een website beter. De kinderziektes zullen met de tijd ook verdwijnen, aangezien Gutenberg zijn gebruikers tevreden wil houden.
Hopelijk heeft dit artikel je iets bekender gemaakt met WordPress Gutenberg editor.
0 reacties