Drag and Drop Review Redux: Divi by Elegant Themes
The sophistication of new drag and drop theme and page builders has been on the steady incline as WordPress becomes the gateway for both blogs and brands alike. Enthusiasts welcome the relative ease in which websites can come together, while front-end designers bemoan the slow death of their craft (will drag and drop eventually kill front-end design? It’s perhaps too soon to call).
The battle of the theme builders took place last year on the WPMU DEV Blog and featured many of the heavyweight contenders. Noticeably missing from the shootout was Elegant Theme’s contribution to the D&D arena, Divi, primarily because it is not actually a theme framework so much as a theme that uses a built-in page builder.
Divi 2.1 was released this past summer, and with Elegant Themes hinting at a new drag and drop magazine theme, the time seem right for an in-depth peek under the hood.
Elegant Themes released Divi in 2013 and it’s since become their flagship product. The theme company has touted the ability for non-coders to create endless and elegant page configurations. Their sales copy says it may be the “only theme you ever need.”
But can it stand up to the hype?
What Does it Cost?
Divi is part of Elegant Themes membership, which includes access to every theme in their portfolio.
A personal license is $69 per year and a developer license, which includes the four Elegant Theme plugins and layered PSDs is $89 per year.
Alternately, lifetime access is a one-time payment of $249.
Plans and pricing details can be found here.
What Do you Get?
There’s no framework to install and Divi comes pre-loaded with all the modules, pre-made layouts, and additional features.
There’s no other add-ons or integrations to purchase, which is really kind of refreshing.
How Does it Work?
First off, it’s important to understand that you’re not creating custom themes with Divi. Divi is the theme. When you install it, you’ll be prompted to set your preferences in the ePanel—which includes some theme settings (but not all of them).
The ePanel includes a section for navigation (which is awkward and redundant since Divi also supports menus); layout settings which just control post and page thumbnails and comment preferences, and metadata post info, some very basic ad management, and SEO settings (which I’d recommend you not tie to your theme if possible), and a place for you to enter any custom code (in various places), or CSS.
Options for the way Divi looks are found in the “Customize” section under “Appearance.” You can decide between a full-width or boxed layout, whether you want your logo centered, where you want your navigation (top or side), and whether to toggle social media icons or contact info.
There’s a section where you can choose font, link, and accent colors, but if picking colors isn’t your thing, Divi also comes with several predefined color schemes (in blue, green, orange, red, and the obligatory pink).
Regardless of what colors you pick, you’re not going to have control over certain visual effects (like buttons, for example), unless you’re prepared to do some heavy customization. So any website you create with Divi will essentially look like Divi—but that’s not necessarily a bad thing. If you’re a developer, and your clients don’t mind that their site looks and acts suspiciously like every other site you create, you could probably get a lot of traction out of this single theme.
You should also know from the onset that Divi is a page builder—which is ironic considering the whole point of a CMS like WordPress is to separate the content from the page design. On a five-page site, this won’t be too big of a deal. But for huge, complex projects, having to go through page-by-page will get real old, real quick. Divi gives you the ability to save, reuse, export, and import your page layouts though (but content and module settings would have to be tweaked on each new page). There are 32 really nice looking premade page layouts to get you started, and going through those is an excellent way to get comfortable with Divi’s options and features.
Divi builds your pages section by section, which it populates with rows, columns, and then modules. Each section can have a unique background (including gorgeous video and full-width backgrounds), and if you add a CSS ID or class, you have further control over the styling.
This, for example:
Becomes this on the published page:
What Features Does it Come With?
The range of modules and page layout options is truly impressive. Out of the box you can create headlines, call-outs, subscription and contact forms, galleries, filterable portfolios, blurbs, image sliders, counters, pricing tables, insert audio and video, and more—all on the fly.
Divi is WooCommerce-ready and fully responsive, supports multiple post formats, and can display your blog in standard format or offers a masonry-style blog feed.
Divi 2.1 introduced one-page layout features such as smooth scrolling internal links and floating side navigation. While Divi might be overkill for a simple one-page boutique or agency site, if your business involves putting together a bunch of landing pages, Divi offers a menu-less page template—which could save a ton a time and money on your squeeze and sales efforts, making Divi a very attractive option.
How Did Building the Test Site Go?
As if by magic. When you familiarize yourself with Divi’s range of features, are comfortable with the default styling, and know what your site needs, you can easily put together a stunning, fully responsive website with beautiful parallax effects and animation in no time. A simple five-page test site came together in a few hours, looked and worked fabulously.
Again, it’s a theme, not a framework—so with that in mind, you can’t use Divi to build from scratch. If you’re going to be frustrated by the inability to fine tune the buttons, fonts, colors, and margins, etc., and like me, you’re a designer/intrepid code hack rather than a developer, you’ll probably spend a good chunk of time pulling your hair out combing through that CSS.
Elegant Themes’s themes are clearly meant to be used as-is out of the box. If you’re going to do a lot of customization, a child-theme is recommended.
In other words, it’s easy to put together a Divi site. If you want a site that doesn’t look and feel Divi-ish, much less so.
Ease of Use / Learning Curve
Divi is by far easier and more user-friendly than Headway, Pagelines, or any of the drag-and-drop-like theme and page builders I’ve tested. The support for Divi includes video walkthroughs of all the modules and features. Elegant Themes has done a rockstar job of creating tutorials on their blog that support and trick out Divi, and WordPress n00bs would learn a lot by playing around with the theme.
Feature-rich would be an understatement. For most basic websites, Divi offers pretty much all you’d need. Keep in mind though, this isn’t a framework that developers are going to be creating integrations for. That said, the basic lowdown includes theme support for:
- Mailchimp, Aweber and Feedburner newsletter signup forms
- WooCommerce support
- Mega menus
- Side navigation and smooth scrolling for one-page websites
And modules that include:
- Google Maps modules (including a gorgeous full-width map module)
- Blurbs, toggles, tabs, and accordions
- Sliders (including fullwidth and video support for sliders), galleries, portfolios
- Pricing tables, animated and bar counters, countdowns
- Audio embeds
- And more!
Even though there are SEO settings and ad management in the ePanel, those features aren’t so robust—so you’d probably want additional plugins to handle that part of your site. I wasn’t impressed by the default theme font control, and ended up installing a plugin to better manage the typography.
For small to medium sites, businesses, agencies, and portfolios, and for building landing, sales, and squeeze pages, I can’t think up a more flexible page builder than Divi.
However, I don’t think it has the nicest looking blog and post-feed controls, and I’m curious as to how Elegant Themes is going to remedy that in the theme they’ve been sneak-peaking since June.
Also keep in mind that if you build with Divi and then later decide to go with another theme, expect to spend a fair bit of time cleaning up your pages.
Out of the Box
It’s relatively straight forward to get up and running with Divi and because it’s all self-contained, no third-party integrations are needed to take advantage of its features. You simply install the theme and create your pages.
Value for Money
Looking at the theme market and other drag and drop themes and frameworks, even at the developer price point, Divi is a really good value.
Of course you get access to other Elegant Themes themes and plugins too (but frankly, beyond Divi, much of their catalog is pretty niche or outdated).
For all the mixed feelings I have about Divi, I actually can’t help but like it. What can I say? It’s shiny and it does what it does well.
Only theme I’ll ever need? Unlikely. I think the philosopher’s stone of a WordPress theme is one that, once installed, configured, and live with the site’s unique content, doesn’t look like a theme. And for the endless configurations, Divi still walks and talks like Divi.
It’s a solid theme that can do a whole bunch of different jobs. But one theme to rule them all? Not quite there yet, and maybe will never be.
- A crap-ton of modules to play with (32 to be exact)
- Multiple advanced section layouts to choose from
- Fantastic out-of-the-box features like scroll to the top, side navigation, and support for background video
- Support for WooCommerce, Google Maps, MailChimp, Aweber, and Feedburner
- Easy to use, even for beginners
- Page builder platform gives you layout control over every individual page on your site
- It’s not a theme builder and if you expect it to act like that, you’ll be disappointed
- Additional styling seems unusually tedious and laborsome
- No developer support
- You’ll have to build every individual page (see page builder, above)
- If you ever switch themes, you’ll have a mess on your hands