Divi vs Greenshift: Why I’ve switched

However, nowadays I build almost all new sites in a different builder, namely Greenshift. In this article I explain why.

Greenshift is WAY more flexible than Divi

The main reason I’ve switched from Divi to Greenshift is the flexibility Greenshift gives me.

A layout in Divi is made up of sections (the blue lines in the image), rows (the green lines) and modules (the black lines). A row can consist of multiple columns, and each column can have multiple modules.

That’s fine in itself, but I can’t set the amount of columns I want in Divi on tablet and mobile myself. 
For example, if you have a row with 2 or 3 columns, those columns will always be placed below each other on tablet (in portrait mode) and mobile. While it often looks better to use 2 columns next to each other on a tablet, but that’s not possible in Divi.

Also, all modules are placed below each other (stacked). For example, you want 2 buttons next to each other, like on my homepage? Can’t do it in Divi.

But Bob, you just said that your website was built in Divi, and you also have 2 buttons next to each other, right?
Yes, but I had to write custom CSS code for that. There is no setting in Divi that allows you to accomplish this.

Rows in Greenshift

Greenshift also has sections and rows with columns, just like Divi. The CSS code that Divi uses for the width of those columns is quite old-fashioned though; For example, if you have a layout with 2 equal columns, Divi simply writes code that says that each column is 50% wide. With a 3 column layout this is of course 33% for each column, with a 4 column layout 25% and so on.

When the screen resolution of the device on which the website is viewed is smaller than 980px (tablet in portrait mode), Divi says that each column must be 100% wide.

Rows in Greenshift work in much the same way, but with Greenshift you CAN decide how many columns you want on tablet and mobile.
In addition, the rows in Greenshift are made with flexbox, a more modern technology that offers many more alignment options.

Greenshift containers

Personally, I don’t use the row block* in Greenshift. The row block is a very user-friendly way to create layouts with columns, and much more flexible than Divi’s rows and columns system, but still a lot less flexible than Greenshift’s containers.

* in Gutenberg all elements are called “blocks”, so not only modules but also sections and rows

A container is a block in which you can put all kinds of other blocks. For example, in the image above I have created a 3 column layout. As you can see in the structure on the left,
there is 1 container / wrapper, containing 3 more containers. An extra container / wrapper has been placed in the first container, which in it’s turn also contains 2 containers
(1a and 1b). This way you could, for example, easily place 2 buttons next to each other.

I’ve placed text blocks in all those containers, but these could of course also have been buttons, images or any other block.

Almost anything in Gutenberg is “nestable”

The latter does not only apply to containers; almost everything in Gutenberg (and therefore also in Greenshift) is nestable. For example, are you using the tab or accordion “module” and want to add a button in it? Or a pricing table? Maybe a blog or product archive module? It’s no problem in Greenshift, but not possible in Divi (without extra plugins at least).

Flexbox and CSS grid

For example, you can align content at the top, center and bottom, but it’s also possible to automatically add the same amount of space between blocks in a flexbox container.
I used the latter in column 1 of my image above; the text “container 1” is at the very top, and the text “container 1a” and “container 1b” are automatically aligned at the very bottom.

Another example; you have 6 client logos that you want to align across the entire width of your page. Easy with flexbox, but in Divi, you would have to add a 6 column row for that, and manually center each image. Only vertically, because horizontal centering is not possible with Divi. If those logos are not all the same height, that will look terrible. And all of those logos will be underneath each other on mobile, while it would probably be better to have 2 or 3 logo’s per row on mobile. 

And what if you wanted to display 6 small logos next to each other, centered on the page? Again, easy with flexbox, but impossible with Divi.

CSS grid on the other hand is ideal for layouts with equal columns. Here too you can set how many columns you want at each resolution, and with the “gap” option you can set how much space you want between the columns (and rows).

On my homepage, there’s a portfolio. This consists of 5 rows with 3 columns. But what if I built a new website, which I want to add in the second column of the first row? Then I have to manually move all the other websites 🙁

If I had used CSS grid for this, I could have simply added a column. The old second column would then automatically be moved to the third column, the old third column to the first column of the next row and so on.

CSS grid also allows you to set, for example, that column 1 should be twice as wide as column 2, and that column 1 should be 2 or 3 rows high. This way you can easily create masonry or metro style layouts. Especially in Greenshift, because it has a very nice visual grid builder (see image above) with which you simply drag the columns to the desired width, height and position.

Custom breakpoints: decide for yourself at which resolution things are adjusted

I have already mentioned several times in this article that in Greenshift, you can set how many columns you want on tablet and mobile yourself, unlike Divi where you always get 1 column on mobile. The resolution at which multiple columns are switched to 1 column is called a breakpoint. In Divi you have 2 fixed breakpoints; the first at 980px and the second at 479px.

In Greenshift you have 3 breakpoints (so 1 more), but you can also adjust the resolution yourself. For example, a normal tablet in landscape orientation often has a resolution of 1024px. If you have 4 columns, they are often too narrow at that resolution, so I only want 2 columns when the resolution is 1024px or below (in this case 2 rows with 2 columns).

In Divi the first breakpoint is at 980px. This is not customizable, so it is not possible to show only 2 columns at a resolution of 1024px.
In Greenshift the first breakpoint is at 992px. But that’s adjustable, so I can simply set it to 1024px.

Breakpoints are not only used for the number of columns, but also to determine, for example, when the normal navigation menu switches to the mobile hamburger menu
(would you like something to drink with that?) or when the font size of your headings is reduced.

Query loop builder: you decide how your blog and product archives look

Almost everything in Gutenberg is nestable. This also goes for loops; the template that determines what your blog or shop page looks like. In Divi this is (again) quite limited; you can choose to display your posts full width or in a 3 column grid and you can choose whether or not to show some elements, such as the author, publication date and categories.

But what if you want, for example, 2 columns, or 4? Or you want to have the title above the featured image, and the publication date at the very bottom? forget it in Divi.
Not to mention adding elements, such as an “add to cart” button on your shop and product category pages, or custom fields.

In Greenshift you can add anything you want, in any order you want. And with any layout you want, because the visual grid builder mentioned above is also available here.

Sliding panel & popup

You can combine Greenshift with other Gutenberg addons

Greenshift is an addon for the default WordPress builder called Gutenberg, and can therefore be combined with other Gutenberg addons such as Stackable, Kadence, Spectra and so on. So do you like one block better in Stackable or Kadence, and the other better in Greenshift? Then you can use them interchangeably on one page without any problems.

There are also quite a few “addons” available for Divi though, for example, for adding extra modules, popups or WooCommerce functionality such as a mini cart, wishlist or quickview.

Classes vs presets

Divi works with so-called presets, which allow you to reuse certain settings of a module for multiple modules. For example, if you designed a button with a blue background and white letters, you can save it as a preset, and then reassign that preset to other buttons that should have the same layout.

The downside of Divi’s presets is that it only works for similar modules (at least at the moment, this will probably change in Divi 5). For example, if I use a certain styling for a heading text in a text module, I cannot assign it to my blog or product archive too. And if I give my button a certain border radius (rounded corners) and shadow, I cannot assign that styling to images either.

Classes in Greenshift work independently of modules. In addition, a Divi module can only have 1 preset, while a Greenshift block can have multiple classes. So I can have a “rounded corners” class that I can assign to both a button and an image, as well as a “shadow” class. But for example, I can only add a class that adds a 5px border to images if I want to.

You can of course also assign multiple settings to 1 class; so I can have a class “main-button” with a blue background, white text, shadow and rounded corners. And of course the same applies to a class as to presets; if you adjust it in one place, that adjustment will be automatically implemented everywhere that class is used. Oh, and for the pros; Greenshift also supports the use of CSS variables, and a central environment to manage your classes and variables.

Greenshift is extremely fast and scores very well on core web vitals

Greenshift has a strong focus on performance and therefore scores excellently on Google’s core web vitals. Divi has also made significant performance improvements,
but still scores considerably lower on core web vitals. If you optimize your images, you can easily score 90+ for mobile with Greenshift, something that is very difficult with Divi.

Development speed and implementation of things users want

The development of Greenshift is going very fast. Moreover, the head developer is also very active in their Facebook community. If someone comes up with a good idea, it’s often implemented very quickly, and bugs are usually resolved quickly as well. Development at Divi on the other hand is painfully slow (the development of Divi 5 has literally taken years), and you can completely forget about getting a feature you would like to see in Divi anytime soon.

But Divi is used on about 2 million websites. That is a huge responsibility. You can’t just implement something without testing it extensively when you are responsible for so many websites.

What does Divi better than Greenshift?

So is everything better in Greenshift than in Divi? Well, a LOT is, but not everything.

Gutenberg is a backend builder

Greenshift is a Gutenberg add-on. This has advantages, such as that almost everything is nestable and you can combine it with other Gutenberg addons. But there’s also a very big disadvantage; Gutenberg is a backend builder. So you edit your pages in the admin environment, and it often doesn’t look exactly the same as it does in the front-end. Something that isn’t a problem in Divi, because in Divi, you actually edit the page in the front-end, so you see everything immediately as the visitor sees it.

Divi’s support is great

Divi’s support is really great. You will quickly get a detailed answer, and if you want, a support agent will log in to your website to solve the problem.
Greenshift has recently introduced a ticket system, but they don’t have a real support team yet, so it often takes a long time before you receive an answer,
and that answer is usually very short and incomplete. They will only look at your website if you explicitly ask for it. That’s really something they need to work on.

Divi is very user-friendly

Greenshift is also becoming increasingly user-friendly, but Divi is still the most user-friendly builder I know.
Fortunately, Greenshift does a lot of the things that I like in Divi about the same way, but there are still some things missing.

Divi has a great AI integration

Although Greenshifts’ developer loves AI, it has not yet been implemented in the builder (with the exception of a smart code addon).
Divi has integrated AI excellently for things such as texts, images and code.

Divi has hundreds of complete website templates that consist of multiple page templates

That means thousands of complete page templates that you can easily import and adapt to your wishes.
It’s even possible to import all sections, rows and modules separately into the Divi library.

In addition, thousands of templates from “third party” designers can also be found for Divi.

Greenshift does have a template library too, but that isn’t very impressive yet.

Divi has been around since 2013

So that’s been a long time. And as I said, they’ve been working for years already on version 5 to make Divi future-proof.
If you build your website with Divi, you can rest assure that it will still work properly in 5 years.

Greenshift, on the other hand, has only been around since 2022 and is therefore still a young one, with a small team and not yet a huge number of users.
A – also young and progressive – competitor of Greenshift, Cwicly, recently announced “out of the blue” that it would cease development.
The Greenshift developer then indicated that he would never do that, but it’s always a risk with a young, small player.