Think 5 years back. After just another long and frustrating search for any good WordPress theme I could use for a job, I stumbled across Elegant Themes. And “Divi” hasn’t even come out yet. In this article I try to cover Divi’s Basics and things you should look out for at the beginning.
Divi – by Elegant Themes
When Elegant Themes, the company behind the WordPress Theme “Divi” first announced it I fell in love. Not once have I ever used a so-called “Builder” before. But Elegant Themes did a ridiculously good job on designing that thing in the first place. So I was instantly hooked. The first version of “Divi” compared to the latest build 3.0.101 is 1 to 100. They have implemented many new features over the years, restructured parts of the codes many times and never stopped improving.
So I decided to write this little summary/collection of what to do or what to look out for when you get your hands on “Divi” for the first time. (Divi Version while writing this: 3.0.101)
Where is what ? The Basics
To begin with: everything you need is bundled in one mighty menu item. You’ll find it within the wordpress backend ( aka dashboard ) after you have succesfully installed Divi. Right underneath the wordpress “Settings” link you will now have the “Divi” link ( it even comes with the Divi logo icon on the side ). In the submenu of this item you will find Theme Options, Theme Customizer, Module Customizer, Role Editor and Divi Library.
The Divi theme options bundles all basic but core features of the theme into one big “mess”. I say mess because it’s actually kind of a big bowl of chaos – probably every other setting just got thrown in there after there was no place else for it. Most crucial settings in the Divi theme options are : Logo ( like which image file you want to use as your main logo in the header ), Fixed Navigation Bar ( if the nav bar should stay or scroll when scrolling ), Static CSS File Generation ( the builders inline CSS styles will be cached and served as static files ), Integrations ( for code snippets that would go in the header for example ) and input for API Key to recieve continous updates of the theme.
The Divi Theme Customizer is nothing else than the already available wordpress customizer ( frontend ) but Elegant Themes decided to locate some of Divi’s settings into it. The settings you will find in there are more of a layout / design nature, like: Boxed Layout , Header Types and Global Typography amongst some other global design settings for the theme ( Navigation, Buttons, Footer … ).
The Module Customizer is similar to the Theme Customizer – a place to hold the global settings for all the different types of modules. Modules are the building bricks of Divi’s Builder, but more on that later.
If your Divi instance is managed by a group of people, the Role Editor will come in handy. You decide which user role can use what area / settings of Divi. It only handles Divi related restrictions like who can use Divi Modules, who can change something in the Theme Options or who can save layouts into the Divi Library.
Last but not least – the Divi Library. This is one of Divi’s features which has probably the most value to the user. Imagine the Divi Builder: you drag and drop some fancy ass layout together on one of the pages. But on the second page you now want to reuse some parts of the awesome layout you just build for the first page. Rebuild everything ? No ! Save the whole layout or only parts from it into the Divi Library so you can load and reuse them on the fly wherever you want on your website. Isn’t it just great ?
I was always interested in which and how many menu locations new wordpress themes offer by default. In Divi’s case the answer is three (3) ! Primary, Secondary and Footer.
Primary: If you create a new menu within wordpress’ menu editor you can choose a location for ( where should it be displayed ). First of all, Divi offers the primary location. This is like the “main” menu of your website. It’s located in the big top header above the content.
Secondary: A little bit down the road you will notice that Divi has the ability to show an extra menu above the main menu. Can be turned on and off in the Theme Customizer. This secondary menu will be located even above the main menu (primary) and is mostly used for holding links like “contact” or “disclaimer” or for showing mail addresses and phone numbers.
Footer: Without further ado – the footer menu location will place the menu in the footer bar. It’s below the content at the very end, even below the widget area.
The Divi Builder
The one thing that makes “Divi” unique is the following. It comes with a second to none Visual Builder (Frontend & Backend). Divi’s Visual Builder can be enabled whenever you create a new page or a new post. It’s a convenient way to define a layout ( with columns and rows ) and fill it with content ( with over 30 modules ). Specify settings for different window widths. Save and load layouts. Create global modules and even create A / B tests on the fly. I won’t go into details about the Divi Builder in this article. I just wanted to mention it here to complete the list of Basics and things to look out for.
Something to look out for
While Divi is not really new, it still gets frequent updates. More features get added, code improvement, more or less experimental updates – something you really want to look out for when using Divi is updating your theme. Almost every update of Divi produces a series of posts everywhere around about broken websites, angry customers and frustration. However, if using Vanilla Divi ( without modifying the theme files ) and not having countless weird plugins installed, updating should be fine. Still: remember to create a backup of your website before updating or test the update beforehand on a staging website.