Hoewel ik nog steeds geen fan ben van Gutenberg is het 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, en Greenshift is inmiddels al enkele jaren mijn favoriet.
Tientallen nieuwe Gutenberg blokken in de gratis versie van Greenshift
In de gratis versie van Greenshift krijg je tientallen nieuwe Gutenberg blokken met allerlei geavanceerde 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 meestal 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 de meeste blok addon plugins, maar in andere page builders zoals Elementor of Divi is dat niet altijd het geval (al is dat in de nieuwste versies van die page builders vaak ook wel mogelijk).
Ook qua styling opties biedt Greenshift meer mogelijkheden 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.
Greenlight Elements blokken
Naast de standaard Greenshift blokken bevat de plugin ook een aantal speciale blokken onder de naam Greenlight Elements. Deze blokken zijn meer gericht op professionele gebruikers, en ik maak dan ook zoveel mogelijk gebruik van Greenlight Elements.
Class first workflow
Om er zeker van te zijn dat je website consistent en makkelijk te onderhouden is zul je de styling moeten doen met classes. Zo maak ik bijvoorbeeld altijd een “card” class. Daar stel ik in dat zo’n card een witte achtergrond heeft, een schaduw, afgeronde hoeken en een bepaalde padding. Deze class gebruik ik op vrijwel elke pagina; overal waar je witte blokken op een achtergrond ziet wordt de “card” class gebruikt.
Als ik een bepaald blok eruit wil laten zien als een card hoef ik niet al die dingen apart in te gaan stellen; ik hoef alleen maar de card class toe te voegen. En als ik ooit iets wil wijzigen aan het uiterlijk van mijn cards hoef ik dat ook maar op 1 plek aan te passen, waarna de wijziging automatisch doorgevoerd wordt overal waar de card class gebruikt wordt.
Wil je meer leren over Greenlight en hoe classes werken?
Bekijk dan mijn Greenshift Full Site Build serie op YouTube.
Interaction layers
Een andere zeer krachtige feature in Greenshift die de meeste concurrenten niet bieden. Met interaction layers kun je voor elk Greenshift blok een trigger instellen met daaraan een actie gekoppeld. Zo kan de trigger bijvoorbeeld een klik zijn op een button, en de actie het openen van een popup. Maar je kunt ook een bepaald element tonen of juist verbergen als je met de muis over een ander element gaat. Of een scroll animatie toevoegen. Of een CSS class toevoegen of verwijderen.
Zo wordt de button die onderaan deze pagina in beeld blijft staan zichtbaar en sticky gemaakt nadat je een bepaald aantal pixels naar beneden bent gescrolled. Dat is ook met interaction layers gemaakt.
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 met alle premium uitbreidingen verkrijgbaar.
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.
Je kunt custom loops bouwen, zoals het overzicht van al je blog posts of producten, en instellen hoe je de posts (of producten) in dat overzicht wilt stylen. Daarbij maak je gebruik van dynamic content, zodat dingen als de titel, samenvatting, lees meer link, auteur en publicatiedatum automatisch worden ingevuld.
Naast standaard WordPress data kun je ook gebruik maken van custom fields die je met een plugin als ACF hebt toegevoegd. Dit alles geldt ook voor de single post template; de template voor individuele berichten of producten.
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.
Overigens voegt de query addon deze functionaliteit ook toe aan ieder Greenshift en Greenlight block zelf.
Ook is een filter blok inbegrepen. Het bekendste voorbeeld hiervan is een kleding webshop waarbij je de producten kunt filteren op prijs, kleur, maat etcetera.
Verder is ook het dynamic search blok de moeite waard. Hiermee kun je een zoekfunctie bouwen waarbij de resultaten al getoond worden terwijl je typt. Daarnaast kun je dit blok ook weer helemaal naar wens vormgeven, en bepalen in welke post types er gezocht wordt.
Tenslotte zijn er nog wat leuke extra blokken beschikbaar binnen deze addon, zoals een (dynamic) gallery block, een stem blok (duim omhoog/omlaag of +/-) en een login pop builder.
Bekijk demo’s van alle blokken in de query addon
Koop de query addonWooCommerce Addon
Als je een WooCommerce webshop hebt biedt Greenshift’s WooCommerce addon tal van features om je webshop naar een (veel) hoger niveau te brengen.
Niet alleen kun je met deze addon je product loops (overzichten van producten, zoals je winkelpagina, productcategorie pagina’s en de uitgelichte producten op de homepage) helemaal naar wens vormgeven, maar ook geavanceerde functionaliteit toevoegen zoals een wishlist, quick view
(popup met de belangrijkste eigenschappen) en producten vergelijken in een tabel.
Andere functionaliteiten van de WooCommerce addon zijn product bundels, een balk die aangeeft hoeveel de klant nog moet besteden voor gratis verzending, product swatches (bijvoorbeeld kleuren of afbeeldingen), 360 graden product viewer, video in de galerij enzovoorts.
Bekijk demo’s van alle blokken in de WooCommerce addon
Koop de WooCommerce addonAnimation 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.
Bekijk demo’s van alle blokken in de animation addon
Koop de animation addonSEO and Marketing Addon
De laatste addon is de SEO en Marketing Addon. Het team van Greenshift zit namelijk ook achter het populaire REHub thema, dat vooral bedoeld is 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 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.
Bekijk demo’s van alle blokken in de SEO and Marketing addon
Koop de SEO and Marketing addonConclusie
Greenshift is inmiddels al enkele jaren mijn favoriete pagebuilder. De vele nuttige blokken met enorm uitgebreide class first 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.
Leave a Reply