The Divi Builder Plugin Has Arrived – A Drag & Drop Page Builder For Any WordPress Theme
Today we are excited to announce that the Divi Builder has been released in the form of a stand-alone plugin. This means you can take the power of the Divi Builder (previously only available in our Divi Theme) and use it anywhere!
This is the perfect way to build beautiful and advanced layouts inside of themes that don’t provide advanced page builders. You can use the Divi Builder with any of the 87 themes in our collection or you can use it with third party themes as well. It’s also the perfect solution for developers that want to build their own custom theme wrappers for the Divi Builder, allowing you to enjoy the power of Divi while maintaining complete control over your website’s header, footer and content wrapper.
Finally, it also means that you can easily migrate away from the Divi Theme by installing the Divi Builder Plugin with whichever theme you decide to switch to.
Is Anything Changing With The Divi Theme?
Nope, the Divi Theme will remain unchanged. It will continue to be packaged with our Divi Builder framework. The Divi Builder that comes with Divi, and the Divi Builder that exists inside this new plugin, are 100% identical. Packaging the Divi Builder into a stand-alone plugin simply opens up new and creative ways for the Divi Builder to be used.
Built With The Power of Divi
The Divi Builder is a product that was born out of The Divi Theme, an all-in-one WordPress theme that was built with the Divi Builder at its very core. Now you can harness that power and use it with any WordPress theme you desire.
If you have used our Divi Theme then you are already familiar with the Divi Builder. Now you can take the power of Divi and use it in brand new ways, combining the builder with different themes or even custom themes. The Divi Theme, however, remains a wonderful out-of-the-box complete website solution, augmenting the Divi Builder with a stunning set of customizer options and a beautiful full-width design. There is no right or wrong choice, just use the solution that works best for you!
Works With Any WordPress Theme
No matter which WordPress theme you are using or switching to, the Divi Builder Plugin lets you build and/or migrate content with ease. If there’s a content area, Divi can build on it.
The Divi Builder is happy to live inside of any content area due to its fluid and responsive design. The Divi Builder was built to allow your theme to control basic styles, such as font sizes and colors, so that layouts will feel at home. Take a look at some examples of the Divi Builder being used to create stunning blog posts in some of our own themes:
Enjoy Endless Layout Possibilities
The Divi Builder comes with 20 column structures that can be combined in tons of different ways. In addition to 40+ content modules and 1000’s of design settings, the possibilities are countless.
You Can Build Just About Anything With The Divi Builder
Here are just a few layouts of our own that we have created using the Divi Builder. We’ve put it to the test and can’t wait to see what you build. The Divi Builder is the perfect tool for creating stunning story-driven posts, as well as standard and well-structures pages.
Choose From Over 40 Content Modules
At the end of the day, it’s your content that really drives your website. The Divi Builder includes over 40 different content modules, each with its own set of powerful design and configuration controls.
Ultra-Easy Module Configuration
Establishing a layout and adding content to your page is only part of the building process. Creating unique design decisions and customizing the items on your page is where you can really delight your users. The Divi Builder gives you full creative control over each piece of your layout.
Adding modules to your page is simple, and configuring them only takes a few seconds. Add your content, control your design and adjust the layout of each module with ease.
Advanced Design Settings
Each Divi Builder module also comes with a complete set of design controls that can be used to adjust every part of the module’s design. Choose custom fonts, colors, line heights, font weights, custom spacing, sizing and more. There is no limit to what you can do as you explore the Divi Builder’s Advanced Design Settings. If you can do it with CSS, you can do it with Divi. No coding required!
Add Custom CSS
Even though you can do just about anything with the Divi Builder’s design controls, the plugin doesn’t hold back developers who want to get their hands dirty with a little custom CSS. Using the Divi Builder, you can apply custom CSS to any module, targeting individual elements within modules on individual pages.
30 Pre-made Layouts for Lightning-Fast Setup
A blank canvas can be daunting, and creating a basic foundation for your site is sometimes not where you want to spend all of your time. That’s why we’ve include numerous pre-made layouts that let you hit the ground running.
It’s incredibly easy to get started with Divi. You will be amazed at how much time you can save with the Divi Builder, and our pre-made layouts are just one of many things that can shave hours and hours off of design and development time. When you create a new page, simply choose one of our pre-made layouts to get a jumpstart on the design process. Here are just a few examples to show the variety of available options.
The Divi Builder Library
The Divi Builder Library is going to forever change your workflow process for the better. The Divi Builder Library is your new web design toolkit. Within the library you can save layouts, modules or collections of modules for later use. You can quickly create sets of ultra-customized layouts that can be re-used when you start new projects. The more robust your library becomes, the more time you will save during development. You can also easily export and import your library from one website to another.
Save & Add To Library
Whenever you create or configure an element with the Divi Builder, it can be saved to your Library. Once it has been saved to the library, it can be loaded on to new pages in the future with just a few clicks.
Save With Selective Sync
When saving to the library, you can also choose to selectively sync certain settings. This way you can save only the settings that you plan to re-use, such as design elements (colors, fonts, etc). For example, you could create a set of customized modules that match a particular brand identity to be re-used throughout the website during the building process.
In the example below, custom design settings were used to create a beautiful Call To Action module, including custom fonts, button styles and colors. This library item can then be easily added to new pages with unique text content and images.
Global Builder Elements
Global builder elements are a game-changer. With the Divi Builder, you can mirror elements you build within the Divi Builder across multiple pages (or your entire website). These are called “Global Modules.” Whenever you edit a global module, the changes get synced to every page that module has been used on. This is a great way to create a custom header or footer for your website that can be updated globally in just a few seconds.
Saving Global Elements
Whenever you save something to the Divi Builder Library, it can be saved as a Global item. Global items can be added to multiple pages throughout your website. Whenever a global item is edited in one location, those changes are mirrored across all pages. No need to edit every single page to make wide-sweeping changes to your website.
If you need to repeat a single item across your website, simply save it as a Global module. For example, you could mirror a Call To Action module across the bottom of all pages of your website. If you ever want to change the color of the CTA button, just do it once instead of dozens of times. This is a huge time saver!
Global Rows & Sections
Collections of Divi Builder elements can also be saved as Global sections or rows. Using Global sections, you can easily create a custom header or footer for your website that can be edited once and updated across your entire site.
Global Elements With Selective Sync
Global library items can also be combined with Selective Sync, allowing you to create a set of mirrored global modules that only sync certain settings. For example, you could create a Global Header Module with custom typography and colors, but only choose to selectively sync these design settings. This module can be mirrored across your entire website, while still allowing you to input unique title text on each page. If you ever want to adjust the overall typographic style of your website, you only have to edit this global module once and the changes to its design settings get pushed to every instance of the module!
Divi Builder Controls
Controlling the content, layout and design of each Divi Builder layout is simple using the Divi Builder’s intuitive controls.
Create Advanced Column Structures In Seconds
Say goodbye to boring single column blog posts. Columns can be created and combined to create all kinds of creative layouts, and you can quickly adjust a row’s column structure with a couple clicks.
Duplicate Items With One Click
The Divi Builder makes it easy to duplicate items, saving you a ton of time during the building process. No need to start from scratch when a similar module has already been created on the page. Just duplicate and start editing!
Temporarily Disable Items
If you ever need to disable a part of your layout from appearing on the front-end of your site, simply right click and choose “Disable.” The item will be removed, but it will remain active within the builder interface for later use. This is a great way to enable/disable seasonal offers, or to simply save something for later if you aren’t sure you want to push it live just yet.
Lock Items To Prevent Clients From Editing Them
Sometimes you may want to lock down certain parts of your layout so that they are not accessible to your clients or other authors. Once an item has been locked by an administrator, it cannot be edited by another until the administrator has unlocked it.
Copy & Paste !
Copying and pasting within the Divi Builder is easy. Simply right click on any item and Choose “Copy,” and then right click where you want to paste it and click “Paste.” You can even copy items from one page onto another.
Keep Your Layouts Organized
It’s easy to stay organized within the Divi Builder. Individual Sections and Rows can be collapse to save space, and you can also add custom labels to each item to keep track of what’s what.
Undo and Redo
There is no need to worry about making mistakes when using the Divi Builder. Every action you take during the building process can be undone or redone by using our undo controls, or by clicking Undo/Redo hotkeys (such as Ctrl+Z and Ctrl+Y). The Divi Builder also saves a complete log of your editing history for any given session so you can move backwards and forwards through time to any saved history state with a click of your mouse!
Live Preview Elements on the Fly
The Divi Builder makes it easy to see what you are building using its Live Preview system. This gives you a quick glimpse at any changes you are making to a module, row or section. No need to save your layout or open up a new tab using the standard WordPress preview feature.
Full Control Over Size & Spacing
Content is only one part of what makes your website look great, and while the Divi Builder already adds appropriate spacing between elements, it also gives you a wide range of tools that let you control the spacing within and around the items on your page.
Section and Row Vertical Spacing
If you want to tighten things up a bit, no problem, simply reduce the standard Section and Row heights within the builder options. You can increase them too, giving your content more room to breathe on large modern screens.
Horizontal Column Spacing
Horizontal spacing can be controlled as well. You can choose between various gutter widths as well as custom content widths for each row in your layout. You can even remove spacing around modules completely to create beautiful grid layouts.
Custom Padding and Margin
Not only do structural elements have spacing options, such as rows and sections, but modules do too. You can easy adjust the padding and spacing for each module using simple input sliders.
Custom Row Widths
The Divi Builder comes with default row widths, which can be adjusted on a per row basis. Combining custom row widths with the custom gutter widths described earlier you can create truly modern layouts.
Beautiful Projects and Portfolios
The Divi Builder comes with a custom Project post type that can be used to create pieces for your portfolio. These items can then be displayed beautifully using the Divi Builder’s portfolio modules.
Custom Project Post Type
The Divi Project post type allows you to create posts that can be aggregated by the Divi Builder Portfolio Module. These project posts display project categories, skills, and the date you posted the project. Like all other post types that you have enabled on your WordPress install, you can enable the Divi Builder to create its content. We’ve even included some pre-made project layouts to help you get started!
Portfolio Modules & Layouts
The Portfolio Modules allow you to display project thumbnails anywhere within your layouts in any column. If a grid is not what you are looking for, you can also choose a single column, gutter-less, fullwidth, or carousel slider layout for your project thumbnails.
100% Translated into 32 Languages + Full RTL Support
WordPress is a global platform, and we want the Divi Builder to be global as well. That’s why we have taken the time to translate every part of the Divi Builder into 32 different languages. We want the Divi Builder to be easily accessible to everyone, no matter what language you speak.
Fully Translated Inside & Out
The Divi Builder has been professionally translated into 32 languages. Not only have front-end elements been translated, but so has every part of the Divi Builder interface. This ensures that you and your clients will be able to use the Divi Builder without confusion.
Right-To-Left (RTL) Support
The Divi Builder is RTL compatible, and will automatically switch to RTL mode when a RTL language is selected for your WordPress installation! No need to think about it, the Divi Builder just works.
100% Fluid & Responsive
Whatever content you build with the Divi Builder needs to work on any theme on any device, so we made everything completely fluid so that your layouts not only adapt to different devices, but also different content widths within whatever theme you are using.
Enter To Win A Free Membership!
We are so excited about The Divi Builder Plugin that we feel like celebrating with an Elegant Themes Giveaway! Enter below for a chance to win a free Elegant Themes membership or account upgrade.
To enter for a chance to win a free Elegant Themes membership or free account upgrade, be sure to enter your ticket into the raffle below. You can enter multiple tickets by tweeting each day! The more tickets, the better your chances of winning 🙂
Unlock Your Website’s True Potential
We are so excited to provide the power of Divi in the form of a stand-alone builder plugin. We are proud of what we have created while working on the Divi Theme, and the Divi Builder Plugin will pave the way for new and creative ways to create beautiful WordPress websites.