Als je mij al wat langer volgt weet je dat ik fan ben van Divi. Mijn eigen site is ook gebouwd in Divi, evenals vrijwel alle sites van mijn klanten die voor 2023 gebouwd zijn.
En daar is niets mis mee, want Divi is een stabiel platform dat nog altijd volop in ontwikkeling is. Sterker nog, de afgelopen jaren is het team achter Divi druk bezig geweest met een complete rewrite waarbij de code van Divi compleet herschreven is. Dit maakt Divi sneller, flexibeler en klaar voor de toekomst. Dit enorme project is nu bijna klaar voor de eerste beperkte publieke versie.
Toch bouw ik tegenwoordig vrijwel alle nieuwe sites in een andere builder, namelijk Greenshift. In dit artikel leg ik uit waarom.
Greenshift is VEEL flexibeler dan Divi
De belangrijkste reden dat ik overgestapt ben van Divi naar Greenshift is de flexibiliteit die Greenshift me geeft.
Een layout in Divi is opgebouwd uit secties (de blauwe lijnen in de afbeelding), rijen (de groene lijnen) en modules (de zwarte lijnen). Een rij kan bestaan uit meerdere kolommen, en in elke kolom kun je weer meerdere modules plaatsen.
Dat is op zich prima, maar ik kan in Divi niet bepalen hoeveel kolommen ik op tablet en mobiel wil.
Als je bijvoorbeeld een rij met 2 of 3 kolommen hebt zullen die kolommen op tablet (in portrait stand) en mobiel altijd onder elkaar geplaatst worden. Terwijl je zeker op tablet vaak prima 2 kolommen naast elkaar kunt gebruiken, maar dat is in Divi dus niet mogelijk.
Daarnaast worden ook alle modules onder elkaar geplaatst. Wil je bijvoorbeeld 2 knoppen naast elkaar, zoals op mijn homepage? Kan niet in Divi.
Maar Bob, je zegt net dat jouw website in Divi gebouwd is, en jij hebt toch ook 2 knoppen naast elkaar?
Ja, maar daarvoor heb ik custom css code moeten schrijven. Er is geen instelling in Divi waarmee je dit voor elkaar kunt krijgen.
Rijen in Greenshift
Ook Greenshift heeft secties en rijen met kolommen, net als Divi. De CSS code die Divi gebruikt voor de breedte van die kolommen is vrij ouderwets; als je bijvoorbeeld een layout hebt met 2 gelijke kolommen schrijft Divi simpelweg code die zegt dat elke kolom 50% breed is. Bij een 3 koloms layout is dat dan natuurlijk 33% voor elke kolom, bij een 4 koloms layout 25% enzovoorts.
Wanneer de schermresolutie van het apparaat waarop de website bekeken wordt kleiner is dan 980px (tablet in portrait stand) zegt Divi dat elke kolom 100% breed moet zijn.
Rijen in Greenshift werken ongeveer op dezelfde manier, maar bij Greenshift kun je wel zelf bepalen hoeveel kolommen je op tablet en mobiel wilt.
Bovendien zijn de rijen in Greenshift gemaakt met flexbox, een modernere techniek die veel meer uitlijningsmogelijkheden biedt.
Greenshift containers
Persoonlijk gebruik ik het rij blok* in Greenshift niet. Het rij blok is een zeer gebruiksvriendelijke manier om layouts met kolommen te maken, en veel flexibeler dan Divi’s rijen en kolommen systeem, maar toch een stuk minder flexibel dan Greenshift’s containers.
* in Gutenberg heten alle elementen “blokken”, dus niet alleen modules maar ook secties en rijen
Een container is een blok waar je allerlei andere blokken in kunt stoppen. In de afbeelding hierboven heb ik bijvoorbeeld een 3 koloms layout gemaakt. Zoals je in de structuur links kunt zien is er 1 container / wrapper, met daarin nog 3 containers. In de eerste container is nog een extra container / wrapper geplaatst, die op zijn beurt ook weer 2 containers bevat
(1a en 1b). Op die manier zou je bijvoorbeeld heel eenvoudig 2 knoppen naast elkaar kunnen plaatsen.
In al die containers zijn weer tekst blokken geplaatst, maar dat hadden vanzelfsprekend ook knoppen, afbeeldingen of een ander blok kunnen zijn.
Bijna alles in Gutenberg is “nestable”
Dat laatste geldt overigens niet alleen voor containers; bijna alles in Gutenberg (en dus ook in Greenshift) is nestable. Gebruik je bijvoorbeeld de tabblad of accordeon “module” en wil je daarin een knop toevoegen? Of een prijstabel? Misschien een overzicht van al je berichten of producten? Het is allemaal geen probleem in Greenshift, maar niet mogelijk in Divi (zonder extra plugins ten minste).
Flexbox en CSS grid
Containers bieden zeer flexibele, moderne layout technieken als Flexbox en CSS grid. Voor de 3 koloms layout in de eerste container hierboven is CSS grid gebruikt, terwijl containers 1, 2 en 3 juist flexbox gebruiken om hun content uit te lijnen.
Met Flexbox worden alle modules (blokken) standaard naast elkaar geplaatst, maar je kunt ze ook onder elkaar plaatsen. Als ik hier dus 2 knoppen naast elkaar wil hebben kies ik er simpelweg voor om 2 knop modules naast elkaar te plaatsen; een 2 koloms layout maken zoals containers 1a en 1b hierboven is dus helemaal niet noodzakelijk.
Ik kan ook zelf kiezen op welke resolutie ik ze onder elkaar geplaatst wil hebben. Op een tablet kunnen die knoppen dus gewoon naast elkaar blijven staan, maar op mobiel onder elkaar. Of nog steeds naast elkaar, dat kan ik zelf bepalen.
Je kunt ook de volgorde van “kolommen” en “modules” aanpassen voor verschillende resoluties. Zo heeft de rij hierboven een afbeelding links en een tekstblok rechts. Aangezien de afbeelding als eerste staat komt die op mobiel boven het tekstblok. Als ik liever het tekstblok eerst wil op mobiel is dat met flexbox heel makkelijk, maar in Divi onmogelijk.
Daarnaast biedt flexbox dus zeer flexibele uitlijning mogelijkheden. Je kunt de content in een flexbox container zowel horizontaal als verticaal uitlijnen op verschillende manieren.
Zo kun je content bovenaan, gecentreerd en onderaan uitlijnen, maar het is ook mogelijk om automatisch evenveel ruimte tussen de elementen in een flexbox container toe te voegen.
Dat laatste heb ik hierboven in kolom 1 gebruikt; de tekst “container 1” staat helemaal bovenaan, en de tekst “container 1a” en “container 1b” wordt automatisch helemaal onderaan uitgelijnd.
Heb je bijvoorbeeld 6 logo’s van klanten die je wilt verdelen over de gehele breedte van je pagina? Makkie met flexbox. Met Divi zou je daar een rij met 6 kolommen voor moeten toevoegen, en elke afbeelding handmatig moeten centreren. Alleen verticaal, want horizontaal centreren is niet mogelijk met Divi. Als die logo’s dus niet allemaal even hoog zijn ziet het er niet uit. En daarnaast zouden al die logo’s op mobiel onder elkaar komen, terwijl er ook prima 2 of 3 naast elkaar zouden kunnen.
En wat als je 6 kleine logo’s naast elkaar in het midden van de pagina zou willen weergeven? Wederom een makkie met flexbox, maar onmogelijk met Divi.
CSS grid is juist weer ideaal voor layouts met gelijke kolommen. Ook hierbij kun je instellen hoeveel kolommen je op elke resolutie wilt hebben, en met de “gap” optie kun je instellen hoeveel ruimte je tussen de kolommen (en rijen) wilt hebben.
Op de homepage vind je mijn portfolio. Dit is opgebouwd uit 5 rijen met 3 kolommen. Maar wat als ik een nieuwe website heb gebouwd, die ik wil toevoegen in de tweede kolom van de eerste rij? Dan moet ik handmatig alle andere websites gaan verplaatsen.
Als ik hiervoor CSS grid had gebruikt had ik simpelweg een kolom kunnen toevoegen. De oude tweede kolom was dan automatisch opgeschoven naar de derde kolom, de oude derde kolom naar de eerste kolom van de volgende rij enzovoorts.
Daarnaast kun je met CSS grid ook bepalen dat kolom 1 bijvoorbeeld twee keer zo breed moet zijn als kolom 2, en ook dat kolom 1 bijvoorbeeld 2 of 3 rijen hoog moet zijn.
Op die manier kun je dus eenvoudig masonry of metro stijl layouts maken. Zeker in Greenshift, want die heeft een hele mooie visuele grid builder (zie bovenstaande afbeelding) waarmee je de kolommen simpelweg naar de gewenste breedte, hoogte en positie sleept.
Custom breakpoints: bepaal zelf op welke resolutie dingen worden aangepast
Ik heb in dit artikel al enkele keren genoemd dat je in Greenshift zelf kunt bepalen hoeveel kolommen je op tablet en mobiel wilt, in tegenstelling tot Divi waar je altijd 1 kolom krijgt op mobiel. De resolutie waarop er van meerdere kolommen wordt overgegaan naar 1 kolom heet een breakpoint. In Divi heb je 2 vaste breakpoints; de eerste op 980px en de tweede op 479px.
In Greenshift heb je 3 breakpoints (dus 1 meer), maar bovendien kun je de resolutie daarvan zelf aanpassen. Zo heeft een normale tablet in landscape stand vaak een resolutie van 1024px. Als je bijvoorbeeld 4 kolommen hebt zijn die op die resolutie vaak te smal, dus ik wil vanaf 1024px nog maar 2 kolommen (in dit geval dus 2 rijen met 2 kolommen).
In Divi zit het eerste breakpoint op 980px. Dat is niet aanpasbaar, waardoor het niet mogelijk is om maar 2 kolommen te tonen op een resolutie van 1024px.
In Greenshift zit het eerste breakpoint op 992px. Maar dat is wel aanpasbaar, dus dat kan ik simpelweg instellen op 1024px.
Breakpoints worden niet alleen gebruikt voor het aantal kolommen, maar bijvoorbeeld ook om te bepalen wanneer het normale navigatiemenu overgaat naar het mobiele hamburger menu (wilt u daar ook wat bij drinken?) of wanneer het lettertype van kopteksten verkleind wordt.
Query loop builder: bepaal zelf hoe je bericht- en product overzicht eruit ziet
Bijna alles in Gutenberg in nestable. Dat geldt ook voor loops; de template die bepaalt hoe je blog pagina of shop pagina eruit ziet. In Divi is dat (wederom) behoorlijk beperkt; je kunt ervoor kiezen om je berichten over de gehele breedte weer te geven of in een 3 koloms grid en je kunt kiezen of je een aantal elementen wel of niet wilt tonen, zoals de auteur, publicatiedatum en categorieën.
Maar wil je bijvoorbeeld 2 kolommen, of 4? Of wil je de titel boven de uitgelichte afbeelding tonen, en de publicatiedatum helemaal onderaan? vergeet het maar in Divi.
Om nog maar niet te spreken over het toevoegen van elementen, zoals bijvoorbeeld een “in winkelwagen” knop in je product overzicht of custom fields.
In Greenshift kun je alles toevoegen wat je maar wilt, in elke volgorde die je wilt. En met elke gewenste layout, want de hierboven genoemde visuele grid builder is ook hier beschikbaar.
Sliding panel & popup
Een andere opvallende feature die ontbreekt in Divi is een popup en sliding panel module.
Popups worden vaak gebruikt om nieuwsbrief inschrijvingen te stimuleren, of om een onweerstaanbare aanbieding te doen als de bezoeker de website wil wegklikken (exit intent).
Sliding panels zijn weer ideaal voor dingen als de bekende hamburger navigatie menu’s, of zogenaamde off canvas filters in een webshop.
Greenshift combineert beiden in 1 blok, waarbij je kunt kiezen of je een sliding panel wilt waarbij de content links of rechts op het scherm verschijnt, of als popup. Je kunt dit triggeren met een knop, maar ook met ieder ander element op je pagina, of automatisch na een bepaalde tijd of wanneer de bezoeker je website wil verlaten.
En zoals bij bijna alles in Gutenberg kun je ook hier elk willekeurig blok toevoegen aan je popup.
Je kunt Greenshift combineren met andere Gutenberg addons
Greenshift is een addon voor de standaard Gutenberg plugin, en dus ook te combineren met andere Gutenberg addons zoals Stackable, Kadence, Spectra enzovoorts.
Dus vind je het ene blok fijner in Stackable of Kadence, en het andere fijner in Greenshift? Dan kun je die zonder problemen door elkaar gebruiken op een pagina.
Overigens zijn er ook behoorlijk wat “addons” voor Divi verkrijgbaar, bijvoorbeeld voor het toevoegen van extra modules, popups of WooCommerce functionaliteit
als een mini cart, wishlist of quickview.
Classes vs presets
Divi werkt met zogenaamde presets, waarmee je bepaalde instellingen van een module kunt hergebruiken voor meerdere modules. Als je bijvoorbeeld een knop hebt ontworpen met een blauwe achtergrond en witte letters kun je dat opslaan als preset, en die preset kun je vervolgens weer toewijzen aan andere knoppen die dezelfde opmaak moeten krijgen.
Het nadeel van Divi’s presets is dat het alleen werkt voor soortgelijke modules (op dit moment althans, waarschijnlijk verandert dit in Divi 5). Als ik bijvoorbeeld een bepaalde opmaak voor een heading tekst gebruik in een tekst module kan ik die niet toewijzen aan mijn blog of product overzicht. En als ik mijn knop een bepaalde border radius (afgeronde hoeken) en schaduw geef kan ik die ook niet toewijzen aan afbeeldingen.
Classes in Greenshift werken onafhankelijk van modules. Daarnaast kan een Divi module maar 1 preset hebben, terwijl een Greenshift blok meerdere classes kan hebben.
Zo kan ik dus een class “afgeronde hoeken” hebben die ik kan toewijzen aan zowel een knop als een afbeelding, evenals een class “schaduw”. Maar een class die een border van 5px toevoegt kan ik bijvoorbeeld weer alleen toevoegen aan afbeeldingen als ik dat wil.
Overigens kun je natuurlijk ook meerdere instellingen toewijzen aan 1 class; zo kan ik een class “main-button” hebben met een blauwe achtergrond, witte tekst, schaduw en afgeronde hoeken. En voor een class geldt vanzelfsprekend hetzelfde als voor presets; als je het op 1 plek aanpast wordt die aanpassing overal waar die class gebruikt wordt automatisch doorgevoerd. En voor de pro’s; Greenshift ondersteunt ook het gebruik van CSS variables, en een centrale omgeving om je je classes en variables te beheren.
Ontwikkelsnelheid en doorvoeren van wensen van gebruikers
De ontwikkeling van Greenshift gaat ontzettend snel. Bovendien is de head developer ook zeer actief in de Facebook community. Als iemand daar een goed idee oppert wordt dat vaak zeer snel geïmplementeerd, en ook bugs worden meestal snel opgelost. Bij Divi gaat de ontwikkeling tergend langzaam (de ontwikkeling van Divi 5 duurt letterlijk al jaren), en een feature request kun je al helemaal vergeten.
Maar Divi wordt dan ook gebruikt op zo’n 2 miljoen websites. Dat is een grote verantwoordelijkheid. Je kunt niet zomaar iets implementeren zonder dat zeer uitvoerig te testen als je verantwoordelijk bent voor zoveel websites.
Wat doet Divi beter dan Greenshift?
Is dan alles beter in Greenshift dan in Divi? Nou, veel wel, maar niet alles.
Gutenberg is een backend builder
Greenshift is nu eenmaal een Gutenberg addon. Dat heeft voordelen, zoals dat vrijwel alles nestable is en je het kunt combineren met andere Gutenberg addons, maar ook een heel groot nadeel; Gutenberg is een backend builder. Je bewerkt je pagina’s dus in de admin omgeving, en daar ziet het er vaak niet helemaal hetzelfde uit als aan de voorkant. Iets waar Divi geeft last van heeft, want in Divi bewerk je de pagina echt aan de voorkant, en zie je alles dus direct zoals de bezoeker het ook ziet.
Divi’s support is geweldig
De support van Divi is echt geweldig. Je krijgt snel een uitgebreid antwoord, en als je wilt logt een support medewerker even in op je website om het probleem op te lossen.
Greenshift heeft sindskort wel een ticket systeem, maar nog geen echt support team waardoor het vaak lang duurt voordat je een antwoord krijgt, en dat antwoord is meestal erg kort en onvolledig. Meekijken op je website doen ze alleen als je daar expliciet om vraagt. Dat is echt nog een punt waar ze aan moeten werken.
Divi is zeer gebruiksvriendelijk
Greenshift wordt ook steeds gebruiksvriendelijker, maar Divi is nog altijd de meest gebruiksvriendelijke builder die ik ken.
Gelukkig doet Greenshift veel dingen die ik prettig vind in Divi ongeveer hetzelfde, maar er ontbreken toch ook nog wel wat dingen.
Divi heeft een uitstekende integratie van AI
Hoewel de developer van Greenshift gek is op AI is dat nog niet geimplementeerd in de builder (met uitzondering van een smart code addon).
Divi heeft AI juist uitstekend geintegreerd in dingen als teksten, afbeeldingen en code.
Divi heeft honderden complete website templates die weer bestaan uit meerdere pagina templates
Dat zijn dus duizenden complete pagina templates die je eenvoudig kunt importeren en aanpassen aan je wensen.
Het is zelfs mogelijk om alle secties, rijen en modules apart te importeren in de Divi bibliotheek.
Daarnaast zijn ook duizenden templates van “third party” designers te vinden voor Divi.
Greenshift heeft wel een template library, maar dat stelt nog niet heel veel voor.
Divi bestaat al sinds 2013
Dat is dus al een hele tijd. Daarnaast zijn ze dus al jaren bezig om Divi toekomstbestendig te maken.
Als je je website met Divi bouwt kun je er dus zeker van zijn dat deze over 5 jaar nog steeds naar behoren werkt.
Greenshift daarentegen bestaat pas sinds 2022 en is dus echt nog een jonkie, met een klein team en nog niet enorm veel gebruikers.
Een – eveneens jonge en vooruitstrevende – concurrent van Greenshift, Cwicly, heeft laatst “out of the blue” aangekondigd de ontwikkeling te staken.
Daarop heeft de developer van Greenshift wel aangegeven dat nooit te zullen doen, maar het blijft een risico bij een jonge, kleine speler.
UPDATE 08-01-2025
Interessant nieuws vanuit het Divi front: Elegant Themes heeft besloten een aantal weinig gebruikte features voorlopig over te slaan in Divi 5, en de tijd die daarmee bespaard wordt te gebruiken voor het integreren van een aantal nieuwe features die hard nodig zijn, zoals flexbox & CSS grid, custom breakpoints, nested rows, een vernieuwd presets systeem dat meer werkt zoals Greenshift classes, verbeterde toegankelijkheid voor minder valide gebruikers. Daarmee vinken ze een aantal belangrijke punten van bovenstaande lijst af, en dat is dus erg goed nieuws voor Divi gebruikers!
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.
