Ik ben nog steeds geen fan van Gutenberg, maar het is nu eenmaal de standaard WordPress editor en daarmee de toekomst van WordPress.
Helemaal nu Full Site Editing (FSE) steeds volwassener wordt, waardoor je niet alleen de inhoud van je pagina’s met Gutenberg kunt vormgeven,
maar ook onderdelen als je header, footer, blog template, woocommerce templates enzovoorts.
Gutenberg zelf biedt echter erg weinig mogelijkheden om je website naar je eigen smaak vorm te geven. Gelukkig zijn er steeds meer plugins die extra functionaliteit toevoegen aan de Gutenberg editor, zoals Stackable, Kadence blocks, Qubely, Cwicly en nu dus ook Greenshift.
Greenshift is nieuw, maar toch vertrouwd
Greenshift als plugin is pas in 2022 gelanceerd, maar de makers van Greenshift, WP Soul, zitten ook achter het populaire REHub thema, dat al meer dan 30.000 keer verkocht is op de bekende WordPress thema marktplaats ThemeForest. Zij hebben de populairste features uit dat thema nu in een eigen plugin gestopt.
25 nieuwe Gutenberg blokken in de gratis versie van Greenshift
In de gratis versie van Greenshift krijg je maar liefst 25 nieuwe Gutenberg blokken met allerlei gevanceerde opties.
Net als de meeste van dit soort plugins heeft ook Greenshift een gevanceerd tekst blok, een button blok waarmee je mooie knoppen met icoontjes enzo kunt maken, een icon list blok om die icoontjes ook toe te voegen aan lijsten, een slider, een advanced tabs blok (waarin ook verticale tabs mogelijk zijn), een accordeon blok enzovoorts.
Daarnaast biedt Greenshift ook een aantal blokken die je niet in andere blok addons tegenkomt, zoals social media share knoppen, een (geanimeerde) svg shape die je bijvoorbeeld kunt gebruiken als divider en – heel cool – een sliding panel / popup trigger waarmee je een “off-canvas” paneel of popup kunt maken die tevoorschijn komt als je op een knop klikt of na een bepaald aantal seconden.
In dat soort blokken – sliding panel, maar ook tabs, accordeons, slider enzovoorts, kun je weer andere blokken plaatsen zodat je hier elke gewenste content in kunt plaatsen. Dat geldt overigens voor alle blok addon plugins, maar in andere page builders zoals Elementor of Divi is dat niet het geval.
Ook qua styling opties biedt Greenshift meer dan (de gratis van) andere Gutenberg addons als Stackable en Kadence. Zo kun je het het geavanceerd tekst blok ook geanimeerde tekst toevoegen, evenals een verloopkleur (gradient), kun je een animatie toevoegen aan alle Greenshift blokken en ook CSS transform opties zitten gewoon in de gratis versie – apart in te stellen voor hover, dus je kunt een afbeelding bijvoorbeeld groter later worden of laten draaien als je er met de muis overheen gaat.
Layout opties: CSS grid, flexbox en calculated width
Ook de layout opties in Greenshift zijn zeer uitgebreid. Zo is er een container blok, waarbij je kunt kiezen voor een flexbox layout of een CSS grid layout. Dat zegt je misschien niets, maar het is enorm handig om je layout geschikt te maken voor smartphones, of om je content uit te lijnen in het midden of onderaan een kolom.
Zo kun je bij een CSS grid er bijvoorbeeld voor kiezen om 4 kolommen op desktop te tonen, 3 kolommen op tablets en 2 kolommen op smartphones. Waarbij Greenshift ook nog onderscheid maakt tussen smartphones in landscape en portrait stand – er zijn 4 breakpoints, die ook nog eens zelf in te stellen zijn.
Ook uniek is dat je ervoor kunt kiezen om op kleinere schermen de kolommen swipable te maken. Normaal worden kolommen op mobiel onder elkaar geplaatst, maar je kunt er bij Greenshift ook voor kiezen ze naast elkaar in een slider weer te geven (al dan niet met pijltjes en automatisch wisselende slides).
Verder kun je ook met variabele breedtes werken – niet alleen met % en vh / vw, maar voor containers kun je zelfs met calculated width werken (inclusief min en max settings) en ook fluid typography ontbreekt niet.
Built for speed
Sinds Google heeft aangekondigd dat de snelheid van een website meegenomen wordt in de rankingcriteria zijn website eigenaren koortsachtig op zoek naar manieren om een zo hoog mogelijke score te behalen in de Google Pagespeed Insights tool. Met Greenshift wordt dat een stuk makkelijker, want de ontwikkelaar heeft de plugin geoptimaliseerd om zo’n hoog mogelijke score te behalen.
Zo wordt alleen code geladen die noodzakelijk is voor de blokken die daadwerkelijk gebruikt worden op die pagina en er worden geen externe bibliotheken aangeroepen (Google Fonts worden bijvoorbeeld lokaal opgeslagen en icoontjes worden on the fly gegenereerd).
Greenshift Premium addons
Al het bovenstaande zit in de gratis versie van Greenshift. Er zijn echter ook enkele premium addons te koop die nog meer functionaliteit toevoegen aan deze toch al zeer uitgebreide plugin. De ontwikkelaar van Greenshift heeft ervoor gekozen om niet (alleen) één premium versie aan te bieden waar alle premium blokken en functionaliteiten in zitten, maar biedt in plaats daarvan enkele bundels aan die gericht zijn op specifieke functionaliteiten. Er is overigens ook een bundel verkrijgbaar met alle premium uitbreidingen.
GreenshiftWP Query Addon
De query addon vind ik zelf de meest interessante addon. Hiermee kun je namelijk zelf templates bouwen, bijvoorbeeld om je blogberichten te tonen in een custom layout of voor een custom shop pagina voor je webshop.
Je kunt helemaal zelf bepalen wat je in zo’n layout wilt weergeven, en uiteraard ook de styling helemaal naar wens vormgeven. Zo kun je bijvoorbeeld een schaduw toevoegen aan de individuele posts of producten om een card effect te krijgen zoals op de afbeelding hiernaast, en je kunt zelfs custom fields uit plugins als ACF of Toolset toevoegen.
Daarnaast bevat deze addon een conditional logic blok. Dat is een container blok waarbinnen je weer andere blokken kunt plaatsen. Die blokken kun je vervolgens tonen of verbergen op basis van condities.
Zo kun je blokken bijvoorbeeld alleen tonen aan ingelogde gebruikers (of juist alleen aan niet ingelogde gebruikers), alleen (of juist niet) bij berichten in een bepaalde categorie, alleen op bepaalde pagina’s, alleen bij producten met een bepaalde shipping class of binnen een bepaalde prijsrange of zelfs op basis van bepaalde custom field waardes.
Tenslotte zijn er nog wat leuke extra blokken beschikbaar binnen deze addon, zoals een wishlist, een stem blok (duim omhoog/omlaag of +/-) en een login pop builder.
GreenshiftWP SEO and Marketing Addon
De tweede addon is de SEO en Marketing Addon. Deze bevat een aantal blokken die het REHub thema zo populair maken en is vooral bedoeld voor bloggers die geld verdienen met affiliate marketing.
Zo bevat deze addon speciale blokken voor productvergelijkingen (tabellen waarmee je alle eigenschappen op een rijtje zet), een “how to” blok waarmee je iets eenvoudig in een aantal stappen kunt uitleggen, een review box (zie afbeelding hiernaast) waarin je zelf criteria kunt toevoegen met een beoordeling, waarbij het gemiddelde automatisch berekend wordt en je ook nog positieve en negatieve punten kunt toevoegen enzovoorts.
Ook bevat deze addon een blok waarmee je een WooCommerce product kunt invoegen in je bericht, of een lijst met meerdere producten.
Andere noemenswaardige blokken in deze addon zijn een (image) hotspot blok waarmee je elke willekeurige content kunt tonen als een gebruiker over een icoontje beweegt, en een link hidder extensie waarmee je links kunt verbergen voor Google terwijl een gebruiker deze wel gewoon ziet. Dat laatste lijkt me overigens tegen de richtlijnen van Google.
GreenshiftWP Animation addon
In de gratis versie van Greenshift zijn al entrance animations beschikbaar, maar de Animation Addon tilt je animatie mogelijkheden een paar niveaus hoger. De Animation Addon voegt namelijk de GSAP animatie bibliotheek toe aan alle Greenshift blokken, dezelfde bibliotheek als waar het populaire motion.page mee werkt.
Daarmee kun je o.a. zinnen woord voor woord of letter voor letter laten verschijnen met een zelf gekozen effect, dat je ook nog eens helemaal naar eigen wens kunt programmeren. Ook kun je animaties automatisch toepassen op child items. Zo kun je bijvoorbeeld kolommen 1 voor 1 laten verschijnen, zonder dat je voor iedere kolom een aparte animatie hoeft in te stellen.
Het belangrijkste blok in deze addon is de animation container, waarmee je allerlei geavanceerde animaties kunt toevoegen voor de content die zich in die container bevindt. Zo kun je animaties maken die uit meerdere stappen bestaan, of gecompliceerde scroll animaties toevoegen, of animaties langs een bepaald (SGV) pad tonen enzovoorts.
Ten slotte kun je met deze addon ook prachtige parallax effecten maken.
Conclusie
Greenshift kan zomaar eens mijn nieuwe favoriete page builder worden. De vele nuttige blokken met enorm uitgebreide styling mogelijkheden, de flexibele layout opties, de 4 custom breakpoints om je design te optimaliseren voor diverse schermafmetingen en de ingebouwde snelheidsoptimalisaties zijn een droom voor webbouwers.
Slimme keuze om de premium addons op te splitsen, zo betaal je alleen voor de dingen die voor jou interessant zijn. Er is overigens ook een all-in-one pakket verkrijgbaar waarbij alle premium addons zijn inbegrepen.
Hulp nodig met je website?
Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.
Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je een betaalde page builder koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je een premium versie van Greenshift wilt aanschaffen stel ik het zeer op prijs als je dat via deze link doet 😉
Ga je voor de gratis versie van Greenshift maar wil je me wel graag bedanken voor dit artikel? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂
