Hello ladies and gents. Two days ago I was browsing the interwebs and by mistake I saw an ad that told me Divi 3.0 was released.
If you are using wordpress and you ever searched in the last year for a new theme for your website, you probably also got on Elegant Theme’s website. They are among the best when it comes to wordpress themes, and Divi is I believe their best so far, when it comes to generals themes. It was used by a lot of top guys from the internet marketing space, guys like Eban Pegan (doubleyourdating) and stuff.
Now, Divi is not new in the space. It has been online for a while (hell, they even have a podcast named Divi Nation) – and now we are at the 3rd major version. Im this post I’m going to review the theme, see what is capable of and even make an element or two using it. I hope to also have some audio/video next to this article, but we will see about that.
It seems that by far the best feature about Divi 3.0 is that it has a brilliant front-end editor. This means that you don’t have to go to the wordpress administrator dashboard, edit the posts/pages that you have, hit update and then reload the page to see how it “feets”. The visual builder is something close to the concept of WYSIWYG (what you see is what you get). This concept is not new to wordpress.
In theory, this makes it very friendly to people that want to build a website, but who don’t know that much about tehnology or about design. Well, this thing is partially true. You can edit the visual elements of your website, but that doesn’t mean you will always make it look great. That’s why designers exist on this planet.
Let’s see what this baby has to offer.
The general section is what you will find on a lot of other custom theme editors out there. You can find basic things like if you want a fixed nav or not, a color scheme style, social media links, email marketing APIs fields and other general stuff.
You will also find:
– Dedicated tab for advertising, but you can only place a 468×60 ad, the usual dimension.
– A decent configuration panel for Search Engine Optimisation
You also have the theme customizer, which on a first look it seems to be similar to the standard wordpress theme edtior. On a more detailed look, you will see that you have a lot of settings that you can play with. For example, for the layout you can edit everything from the website content width to the gutter and typography. Some settings are more advanced, so be careful with these. You can’t break it, but if you don’t know what you are doing, you might end up with a design not so pleasing to look at.
Other options include navigation look and feel. There are 3 main menus in the theme options. You can also edit footer various footer elemetns.
The Divi Editor
Even before Divi 3.0 was introduced, Divi had a great editor that replaced the basic wordpress editor. It was well build, so the team decided to use it even on other themes made by them, like “extra”. It basically allows you to customize a page however you want, by creating the so called “sections”. A section could be something like a hero area, or the place where you can list your latest projects and other stuff.
To explain it a little better, i’ll give an example. Take my website, which has a very simple layout (screenshot attached). You can divide it in 4 sections. We have the top section with the introduction, next we have the “What I’m offering section”, the “portfolio” section and lastly the contact section.
You can find more about this if you search online, but the only thing I’m telling you is that it’s quite intuitive and you can get very easily used to it, even if you aren’t a technology oriented person. 20-30 of playing with it should make you get the move.
Let’s see how simple it can be to create a basic layout. We’ll start by trying to create somethign similar to what I have on the “What I’m offering” section on my portfolio website – A section with 3 columns, all very similar, they contain a picture, a subheadline and a paragraph.
You go to the wordpress dashboard menu, create a new page and on the “page attributes” box you will have a dropdown called “template”. Choose blank page (if you leave it to default, you have the basic post/page layout, which isn’t ideal if you want to create something from scratch or something that isn’t related to the blog layout).
Using the divi builder, you add a section. Inside a section you will need to a add a row, and inside a row we will have 3 columns. Each column will have an image with text. Of course, it requires to tweak one or two settings for each element, but it’s easy to use.
So, in each image module we will add a round illustration. You choose it from your computer and hit upload. Next, you choose the maximum width of the image (about 200px) and choose the option to align it to the center.
Below the illustrations, we will have some blocks of text. This is pretty straight forward, you type what you want, edit the dimensions and align it to center. And that’s it.
So we have pages, that contain sections, that contain rows. Inside rows, you will have to choose what modules to use. A module is basically an element (like what we used on the example above). These can be plain text, images, or more complex ones like sliders. Divi 3.0 has a lot of them that are prebuild for you and have a lot of customization options right of the box. This is the reason why this theme has such a big css file.
Example of modules: Text area, images, audio elements, dividers, sliders, login form and many others. You only need creativity, because using all these options, I believe you can create something really good. There might be situations when you won’t find what you are looking for exactly and you might want to hire a web developer to create that special something for you, but for a regular website business, these should be enough.
Additionally , you can save entire section or rows or modules in the so called “library” and you can reuse them on other pages. This makes editing fast, because you can configure elements to look in a certain way on page, and if you decide to use those elements on another page you can do that without having to do all the work again from zero.
Speaking of not having to make it from zero, Divi has some prebuilt layouts, for different purposes (homepages, sales pages, blogs etc).
Most of the elements are already configured from scratch so that they will look good on all devices. You need to adjust settings like max width, for example on text.
The editor has the option to customize the settings for each tier – mobile, tablet or desktop. Let’s say you want the text to have a certain dimension on a desktop, some other dimension (or maybe color or font) on tablets, and some third configuration for mobile. No problem, you can do this kind of stuff with everything. Tweaking all the elements takes time, but it’s the only way you can make stuff look good, no matter what software yo are using for your website.
With a little design knowledge, you can create some really good looking layouts.
The Divi Editor – Front-end / Visual Editor
This is what’s new in version 3.0 and it is by far the most important element that has been added. I believe that hundreds and hundreds of man hours were invested in this part because it looks pretty well build and thought. Some elements are not so intuitive, but if you play with it and edit a couple of pages, you will get used to it.
It’s good because you can adjust things visually, not estimating by numbers (for example things like nubmers and padding) and you see exactly what you are doing, without having to hit update page and refreshing it everytime.
There are some downsides, though. The editor was a bit slow on my machine, but I have a pretty slow CPU. Also, you don’t always get what is happening. I was clicking on various modules, and it behaved strangely sometimes. So, the guys form ET still need to make some revision, because it isn’t perfect.
Anyways, for a person that isn’t oriented on technology or who doesn’t have any development skills, I highly recommended. It’s exactly what you might want from a visual editor.
I managed to create a fairly similar layout to my current one from my website, which is made from scratch using html and css (no wordpress). I’m pretty impress by the fact that you can manipulate elements with so much ease.
The guys from ET say this is really fast and I want to see how fast it really is. We will test under normal conditions, with a page or two that have a decent number of elements / pictures.
The main .css stylesheet is by far the element that weights the most, at over 300KB. This baby has a lot of design elements integrated, so it’s normal.
Using the Divi Editor requires some decent CPU power. A lot of things are happening on the background while you are playing with the interface, and some of them need to be handled by your processor. Of course, you can modify your website even on a $200 laptop, but it will take a bit more time for each action, and time adds up. I don’t know if should call this a disadvantage, because you can’t get the functionality without scripts running on the background.
It looks like it is pretty well documented. All the info is available at this page. I used it to make this review, and it was pretty straight forward.
For each major section you have decently long videos in which you will see how things work. There are a lot of things to cover and not every button it is explained with loads of details, because it would get very boring otherwise.
You can get access to Divi by buying a subscription from their website. The subscription for a whole year is $69 dollars, and you get access to all their themes – more than 80 by the way! I think is more then worth it. Plus, you have a 30 day money back guarantee.