Everything you need to know to get started with Divi

In April of 2018, we announced a pivot to our business model. We decided to say goodbye to Upfront, our unique solution to the problem of visual web design within WordPress. We did this to narrow our focus. To work exclusively on the aspect of our business that has always been our strongest suit: helping developers create and manage WordPress websites.

A major part of this pivot has been to embrace the remaining themes and plugins at the forefront of the WordPress design space – making sure our community understands them and that our products and services work seamlessly with them. It’s to that end that we’ve created this guide to the Divi theme.

Divi by Elegant Themes is, by all accounts, the most widely used premium theme and visual page builder in WordPress. We’ve been happy Divi users ourselves for many years – in fact, both the Edublogs and CampusPress websites, which are sister services to WPMU DEV, are running Divi child themes, as are sites that we’ve built for many of our customers.

We chose Divi because it gives our team the flexibility to make content changes and updates to pages with complex layouts on the fly. And for those using it on their own, Divi requires no coding skills whatsoever to create custom websites.

In this Ultimate Guide to Divi, we’ll look at some of the features that we like most and some examples of Divi in the wild.

Why Choose Divi?

There are a lot of choices for WordPress users looking for a customizable theme or page builder; there’s Beaver Builder, Elementor, Avada, and more. So what makes Divi unique?

Key Features

• A front-end visual builder, built with ReactJS
• Responsive design settings and draggable widths and heights
• 1495+ professionally designed pre-made layouts
• Ability to save and re-use anything with the Divi Library
• Full export of designs and content (to share or sell!)
• User role management
• Simple split A/B testing built right in

A Massive, Passionate Community

One measure of any product or service is the community behind it, and Divi has a big one.

There are multiple Facebook groups with over 100,000 members combined, WordCamp Meetups, and the Divi Nation Network. And beyond that, there is an entire ecosystem of add-ons, plugins, child themes, and more for Divi built by 3rd parties.

The product has consistently been improved over the years, and every week, two new professionally designed layout packs are released into the Divi Library for all Divi users to download and use for free.

In short, Divi is a solid choice, packed with features, and a company with Elegant Themes and community around it that keeps it growing and improving, with no signs of slowing down.

Getting Started With Divi

All said and done, Divi is just a WordPress theme. Like any theme, you download the theme files and upload them to your WordPress site to activate.

Divi is a premium theme and will cost you $89 for one year of updates, or $249 for lifetime access – which can be used on unlimited sites. I personally have been a member since 2009 – which just floors me to think about how fast time is flying by (and how valuable that lifetime access really is).

We won’t re-create an entire guide to downloading and installing Divi, you can find detailed videos and step-by-step directions in their docs section here.

Once activated, you’ll see the ‘Divi Builder’ options when editing or creating any new page and post. You’ll want to take a bit of time to familiarize yourself with the builder and how it works.

3 Key Words You’ll Need To Know

Section – The first thing you choose from when designing layouts with Divi are sections. A page or post will be made up of one or more sections, and you can choose from full-width or standard sections.

Row – Each section is made up of one or more rows, and you can choose rows with up to 4 columns.

Module – Each row is made up of one or more modules, which is sometimes also referred to as ‘elements.’ There are modules for just about anything you can think of, including header images, sliders, buttons, menus, sidebars, and videos.

There is a much more detailed overview of these tools and how it all works in the docs for the Divi visual editor here.

Getting The Most From Divi

Front-end vs. Back-end Editor

One of the more impressive features of Divi is that it has mastered the ‘square-space’ like front-end editing experience – in Divi speak, it is called the ‘Visual Builder.’ It works really well once you learn a few of the quirks and what the different symbols and icons mean. You can drag-and-drop elements, create columns and rows, and edit content to see exactly how it will look on the live site.

To be honest, when using Divi, I personally still default to the back-end editor experience, but that may just be because I was using Divi for years before the front-end editor even existed. There are times when the front-end is easier, and others, like when creating a more complex page from scratch, when the back-end works better for me. I’m excited to try out the brand new page creation process on the front-end with future projects, which may change how I feel about this too.

There is a pretty slick demo where you can play with the front-end editor in action here.

Using The Customizer

For when you want to make design changes across the entire site, Divi works seamlessly with the standard WordPress customizer. You can upload logos, choose fonts and colors, and select from a myriad of settings and options.

The customizer includes settings for the header, footer, and every single ‘module’ such as blog posts, sliders, dividers, and more.

Using The Library

A major time-saver is the ‘library’ function that is part of Divi. You can save sections, rows, and modules to a library to reuse on other pages and posts. For example, if you want to start or end all posts with a standard set of text, you can add that text module to the library. Or, if you are creating multiple landing pages that all have similar layouts or elements, those can be added and reused as well.

Even more impressive is that any library item can be, with just one click, designated as a ‘global’ item. Global items mean that when you update that element on one page of your site, it will automatically be updated everywhere that the library item appears. With a little bit of planning and thought, these library items can be incredibly useful.

Mobile And Responsive Design

Out-of-the-box, Divi is responsive, such that it will resize and reorganize all modules, rows, and columns without you needing to do anything.

But, there is an option to hide or show any element based on the screen size of the visitor. For example, you can show a different menu to those on desktops versus mobile devices. Or, you can hide that giant and slow-to-load image slider in the header for mobile users, giving them a better browsing experience.

You can also preview the view of each page on different-sized devices from within the Divi builders, which comes in handy.

Doing A/B Testing

Having trouble deciding which call to action you should use or want to test other elements of your site’s design? Divi makes it so that you don’t need to invest in more complicated A/B testing tools, it can be done right from within the Divi editor.

In Divi, it is called Divi Leads which allows for ‘split testing’ unlimited versions at once. Simply choose your variations, and you are off and running.

Child Theme Or Na?

In our experience, when it comes to using Divi for clients of CampusPress or our Enterprise hosting services, we almost always make a child theme. This is because we can then control the branding and design aspects of the site and keep end-users from breaking these guidelines. We can also implement page templates for layouts, and be a little more pixel perfect with things like menu items, breadcrumbs, typography, and the like.

But the reality is that Divi can be incredibly flexible on its own – no child theme needed. If you are building a site where you’ll be the only one with admin access, it could be perfect for you right out of the box. There are also loads of layout packs that you can download and customize too, so that you don’t have to start from scratch and so that no two Divi sites will look the same.

More resources on child themes:

• Divi’s take on building child themes
• Lots of Divi child theme resources from the Divi blog

The showcase that follows includes examples of sites using Divi that are built with and without child themes which should also help provide you with a good idea about what you can achieve whichever route you choose.

Showcase

campuspress.com – A child theme of Divi, we built elements into the library to reuse on different landing pages.

canvas.psu.edu – Visited by 10s of thousands of students and faculty at Penn State university every day. Conforms with university branding guidelines.

recubre.com.mx – A WPMU DEV member’s site, an example of Divi working great for eCommerce sites too.

roundrockisd.org – A child theme, which we re-created the same look and layout from a theme using Visual Composer. Changing to Divi improved performance and reliability considerably.

wilcosymphony.org – A site that I built over a weekend for a local non-profit.

wpgoby.com – A WordPress agency and member of WPMU DEV.

My Divi Wishlist

While Divi checks off just about every box and meets most needs, there are a few items on my Divi wishlist worth sharing.

First up, it will seem simple and there are Divi extensions by 3rd parties that allow for this, but I’ve frequently wanted a quick way to put a site title in the header and not use a logo. In many cases, existing logos may not fit well in headers or the quality just isn’t good enough to use. A blurry or misplaced-looking logo can distract users from the content on the site.

More importantly, we’d love to see the Divi team incorporate the features of our Divi Accessibility Plugin into the Divi product itself, and work towards ensuring Divi can more easily be used in a way that will meet and exceed accessibility standards. We can limit the use of some elements and get close, but there are some issues that need to be improved.

And lastly, I’m sure the Divi team has a plan, and we haven’t discussed it at all with them, but I want to know how Divi will play nice with the new ‘Gutenberg’ editor experience once it is part of WordPress core.

Wrapping up

If you’ve been looking for a new theme and you don’t want to spend a bunch of time messing with custom code, check out some of the links above, and get building with Divi today.

Also, if you’re using Divi — be sure to optimize it with our plugins. We have an article all about optimizing Divi with Smush and Hummingbird.