The Challenge
Divi was created out of our customers wanting to build and style their websites from scratch. Our users were becoming more savvy and we needed to create something to meet their needs. The primary challenge was that our customers were essentially asking for a framework within the WordPress framework and we had to break a lot of WordPress rules to get this done. The primary rules were around the process of changing themes and having your content reform to the new theme. This was difficult while creating a content builder that builds content that no other theme supports.
Our Approach
Rather than thinking about this as a well design theme, we approached it as a page-builder framework. The first thing we did was attack the problem of generalizing content by finding out what the building blocks of our customers’ websites were, not in terms of content, but rather in terms of structure. After that we set out to build an extremely versatile and beautifully looking page builder. Our tagline became “The most fun you’ve ever had building a website” which we continually came back to throughout the process, always asking ourselves, “How do we make this FEEL fun?”
Drag & Drop Builder
The Divi Builder transforms elements into visual building blocks, allowing anyone to understand and edit the structure of their page without touching a single line of code. The builder can be used to create content from scratch as well as let you manage, configure, duplicate, rearrange, or delete any element on your page.
Building The Builder
Before diving into the design of the builder, we needed to understand what its abilities needed to be. We started by analyzing the demos of the highest selling WordPress themes on the market. With a longer timeline, this would have ideally extended to a much larger collection of websites.
Outlining major content chunks and content containers.
Stripping away the content to help generalize the building blocks.
Removing variable height of building blocks for further generalization.
What We Found
In the end we noticed three main levels of content: content modules, columned rows that housed content modules, and sections that housed rows.
After Effects Explainer Video
I designed and animated the explainer video for the launch and promotion of Divi. After receiving the narrative audio, I created high level still frames with element transitions in mind and then animated the entire video in After Effects.
Animated Illustrations
Across both the Divi 1.0 and Divi 2.0 product demos, there have been multiple animated illustrations to highlight major features. These were created in After Effects and exported as looped GIFs. Below are a few of the highlights.
Landing Page Hero Background
Starting with a stock photo, I added custom lighting and effects in Photoshop, and animated this looping video background for the Divi demo landing page.
Icon Packs
Elegant Themes customers come from all types of backgrounds. Lots of them are more code savvy than design savvy, so we provided users with open-source icon packs to use throughout their websites. The icon packs below have been SHARED over 8,000 times from the Elegant Themes blog alone.
Elegant Icon Pack
The Elegant Icon Pack is made up of over 300 icons built on a 16px by 16px grid. The pixel real estate was the biggest challenge of this set of icons, but with the end goal being an icon font that could be pixel perfect at a body font text size they had to be constrained in size.
Elegant Linecon Pack
Wanting to create an icon set that contrasted the Elegant Icons in size, the constraints on this set was a single pixel line weight and a 32px max-height per icon.
Full Color Icon Packs
While the two icon packs above were designed for icon fonts, which means they limited to a single color, the two icon packs below offer full colored icon packs that included vectored working files for users to customize, extend, and even redistribute these sets.
Landing Page
Click the image below to view the live landing page. This landing page is one of dozens of pages that make up the live Divi Theme demo who’s primary goal is to show off and explain the features of Divi. Including the highest number of different content modules, section types, column structures, and theme settings on a single page was the biggest challenge here.
Logo Construction
The Divi Theme has become it’s own brand over time. As we predicted this shift from people recognizing Divi as a product of Elegant Theme’s and more of a stand alone item, we knew the Divi logo had to be concise, legible, and contain both a strong icon and a strong word-mark. The Divi logo is often seen as either just the ‘D’ or just divi., but also works very well as a whole.
Marketing Materials
With Divi’s 2.0 release, the team focused primarily on module additions, builder improvements, and additional layout options. Below are pieces of the promotional image package that we sent to bloggers and affiliates to help them promote the launch to their readers.
10’s of 1000’s of Divi Websites
At the end of the day, Divi is not just a glorified WordPress theme demo. It has proven to be an extremely flexible and easy to use product for thousands of users, making up for over 90% of Elegant Themes sales since its launch. The Divi Read-Me doc has been viewed over 450,000 times in the past year, over 20x more than Elegant Themes next most popular theme.
Personal Divi Websites
Along with this very site, here are a few websites I have built with Divi.
Customer Showcase
Below are a few customer-made Divi websites.
The Future of Divi
Divi is constantly in a state of construction. My main focus right now is making every element 100% fluid so that Divi can be used in any theme as a content builder plugin. I attacked this update by introducing a LESS CSS approach to styling the theme, adding even more organization to our development process and shaving hours off of future theme modifications.
Front End Content Editor
It is inevitable that Divi will need to contain a front end editor component to stay relevant in the market. I imagine a front end experience for creating and modifying page elements as well as a system for live text editing could looks something like this.
