WordPress
Article

The Divi Builder Plugin for Any WordPress Theme

By James George

As a WordPress user and developer, I can definitely say that I am into frameworks. I like trying out different frameworks and plugins, because it fascinates me as to what I can pull off with WordPress. When you dive deep into it, you can pull off some pretty amazing stuff.

One aspect of WordPress that I’ve felt has always been a little weak is their selection of page builders. WordPress drag and drop page builders range in quality, but most of the time they cause trouble. You try to integrate them, and they either break the theme, or their styles are overridden by the theme itself. There have always seemed to be limitations to WordPress theme page builders.

A theme I have always liked is Divi (I’ve covered Divi previously on SitePoint), which has its own page builder. I always thought Elegant Themes should create a separate plugin from their page builder. Apparently, they must have read my mind, because they just released their page builder as a plugin.

Advantages

I have a library of specific themes I go to when I need to turn around a project quickly. The problem is that preset themes don’t offer that much flexibility. I can go in and customize a WordPress theme all day long. Just because I can do something doesn’t mean I want to. It can be more cost effective, especially for lower budget or more time sensitive projects, to implement a customizable system for your project.

It Works with Any Theme

You can drop the new page builder plugin into any theme. This means that if you find just the right theme, you can easily customize it. This is especially great for specialty themes that do something specific. You won’t fall victim to trying to hack a theme to make it look how you want it to.

shortcodes

You Avoid Shortcode Themes

Having the ability to use the modular page builder makes it a great work around for themes that rely too heavily on shortcodes. It may be more of a personal preference, but I dislike themes that rely on shortcodes for their content structure. If I wanted to wrap each paragraph in code, I’d build the site in HTML. With the builder, you can add modules and place your content in them to build each page. Each module also offers options for customization, too.

It’s Update Friendly

Instead of modifying an existing theme and worrying about your customizations being future-proof, you can use the page builder to create the page layouts for your site. This is an excellent choice, because even if you update the theme, your page builder content will remain the same, because it is separate from the theme.

This can be a double-edged sword, because when you add to a theme, you usually use a child theme. When you update the base theme, the child theme saves you from losing your customizations. On the other hand, This is a plugin, and there’s not a way to create a “child plugin”. If you make customizations to the plugin itself, such as to the base code, it may be overwritten when you update the Divi Builder Plugin.

The Way Divi Builder Gets Around This

You can avoid problems with updates by applying code and CSS to the designated areas within the plugin itself. Each module has a section where you can add classes and CSS to it individually. Each module can be customized, giving you maximum flexibility. The other added advantage to this is that when you update, the CSS that you applied to each module will be carried over in the update, just like a theme or plugin’s options would be if you updated it.

page builder

Layouts

Build any kind of layout you can imagine. The concept is simple. Everything starts with rows, which can be stacked on top of each other. Each row can be built with different combinations of columns and width variations. Using the rows that stack on top of each other, you can build an unlimited number of layout combinations.

Features

The Divi builder plugin is packed with 46 modules that will allow you to build a powerful, feature-rich site. Everything can be found within modules, which you can drop into the layout modules.

This means that you can build a site just how you want it, with the features you want, where you want them. Imagine having the ability to create landing pages, services pages, beautiful case study and product showcase pages, and more. Here’s a list of the modules available in the Divi Builder Plugin:

modules

  • Accordion – The accordion module creates an expandable accordion section, which enables you to place a lot of information in a compact place.
  • Audio Player – If you have an audio file, such as an MP3, you can upload it here and have it embedded on the page.
  • Bar Counter – The bar counter is an animated set of bar graphs that will represent the values you place in the settings. This is great for showing a number of percentages, such as statistical data.
  • Blog – The blog module is fantastic, because you can place a blog section anywhere within a page. If you set up different categories for different types of content, you can highly customize what posts show on specific pages.
  • Blurb – The blurb module enables you to create a section with an image or preset icons in the plugin. This is a common feature found within a lot of sites, giving it a graphic appeal.
  • Button – You can create amazing call-to-action buttons or just simple links to downloads and other pages. You can fine tune ever last detail, from the color, to the hover state, strokes, and even icons.
  • Call To Action – Call to action takes the button module a little further and enables you to create a colored background and a powerful message on your site to convince visitors to take action.
  • Circle Counter – The circle counter is like the bar counter mentioned earlier, but it uses circular elements to represent the data.
  • Code – Need to embed custom code in a section of your page? Use this module to embed it in the page wherever you want, without worrying about conflicts with your other content.
  • Comments – Want to have a specific section for comments? Use this module to customize the look and the feel, for a fine-tuned commenting experience.

contact form

  • Contact Form – With this module, you can place a customized contact form anywhere on the page. Collect any data you can imagine with the ability to create your own fields.
  • Countdown Timer – Need a countdown timer on your site? Use this module. You can specify the number of days, which makes it handy for counting down to a big event. You could build a great registration page for a webinar or a conference.
  • Divider – Place a dividing line between any element with a specified amount of space around it.
  • Email Optin – Connect an email marketing service like Mailchimp or Aweber with this module. Collect email addresses and build your list.
  • Filterable Portfolio – Are you a designer? Create a portfolio section to show off your work. It’s complete with a sortable feature, which means that visitors can browse your work by categories.
  • Gallery – Create an image gallery that transitions from image to image. You can also have images open in a lightbox when you click on them.
  • Image – The image module enables you to place an image anywhere on the page, controlling the max width, adding transitions such as fades, and enabling you to link them to other pages.
  • Login – Allow members to log into your site with this customized login module. Craft the look and feel for a customized experience.

map

  • Map – This is a live Google map where you can enter in addresses and plot points via a list inside of the module. This is great for businesses and events, because customers can see where you are in relation to other landmarks.
  • Number Counter – Show statistical data that starts at zero and counts up to the values that you enter in the module. You can show big numbers or percent values.
  • Person – This is great for agencies and teams of any kind. You can add a person’s photo, social links, biographic information and more.
  • Portfolio – This is a regular portfolio section, where you can show projects by category. You can specify the number of products shown.
  • Post Navigation – Place customized links to next and previous posts with this module. This will entice visitors to your site to check out your other content.
  • Post Slider – If you’re creating a blog page, you can enable the post slider to cycle through features posts.
  • Post Title – Create a customized post title for your page or blog post with this module.
  • Pricing Table – Pricing tables can be a pain to create, but with this module you can enter in the information for each table and customize its look.
  • Search – Enable visitors to search your entire site with the search module.
  • Shop – If you’re using WooCommerce, you can embed part or all of your shop within a page.
  • Sidebar – Place a sidebar anywhere on a page with this module. It will allow you to craft the look and feel to match the page.
  • Slider – You can create a customized image and text slider. You can enable a background image with text and a transparent PNG over it.
  • Social Media Follow – Grow your social media presence with this module, connecting visitors with Facebook, Pinterest, Google+, LinkedIn, etc.
  • Tabs – If you have a related content that you’d like visitors to be able to click through easily, you can create a tabs section with this module.
  • Testimonial – Add client testimonials to your site with this module. If you have more than one, this module with cycle through them, adding credibility to your business.
  • Text – You can add your text and body copy in this module. You can also add images and media in this section, just like any other blog section.
  • Toggle – The toggle module is like the accordion module, but with one toggle section.
  • Video – Place a video anywhere on the page.
  • Video Slider – If you have multiple videos to showcase, you can enter them here, and this module will rotate through them.

full width

The sections below are all customized for full width use. They have added features that make sense for full-width sections of your site.

These sections are:

  • Fullwidth Code
  • Fullwidth Header
  • Fullwidth Image
  • Fullwidth Map
  • Fullwidth Menu
  • Fullwidth Portfolio
  • Fullwidth Post Slider
  • Fullwidth Post Title
  • Fullwidth Slider.

Conclusion

If you want to create a highly customized site, but you don’t want to be tied to one particular theme, you can use the Divi Builder Plugin to customize any WordPress theme. With 46 different modules to choose from, you can add custom functionality and features to any post or page.

You can check out the Divi Builder Plugin here.

  • http://www.applegreenwebsites.com Stephanie Boucher

    The Divi theme is compatible with WooCommerce. Would the plugin add WooCommerce compatibility to a custom theme?

    • http://designcrawl.com Design Crawl

      No, You would have to add WooCommerce functionality to your custom theme on your own. However, woo gives you instructions for making your theme WooCommerce compatible on their site.

  • Nick Thorley

    I would be interested in James clarifying what he means by avoiding shortcode themes. I like Divi but i hate that all of the content is created with shortcodes which means should a different theme be used you are stuck. Also I love the content reversion system thats part of wordpress but you cant really use that well either as the shortcodes in the content ruin the experience.

    • http://designcrawl.com Design Crawl

      Nick, that’s ecatly what I ment with shortcode themes. If you use themes that heavily utilize shortcodes, it can be an issue when you switch. As for the subscription. I bought the lifetime package. When it comes to any theme site, I always do that, because you get lifetime updates, lifetime access, and it is more cost effective in the long run.

  • Lenny Meidan

    Is it like with the themes that you have to pay every year for using the plugin?
    Or is it a one time purchase?
    Thanks

  • http://www.skooppa.com s.molinari

    I’ve been using the themes from Elegant for some time. One thing that always bothered me was the total disregard to the standard WP back-end UI theme (which, granted, isn’t really great). And the Elegant add-on UIs aren’t bad, but still, they stick out like an ugly wart overall. It their stuff would feel more like it belonged in WordPress, it would make the experience 1000 times better.

    Scott

    • http://chrisburgess.com.au/ Chris Burgess

      Good point Scott, it does feel like you have to learn a new UI when using a page builder, especially if you don’t use them often.

  • http://designcrawl.com Design Crawl

    Nick, thanks for taking the time to comment. The Divi plugin is meant to be an option to explore if you like the functionality of the Divi page builder, but you have to use a different theme. All plugins are dependent on how compatible they are with the theme you are using. I’ve have popular themes that were supposedly well-coded break when using fairly standard plugins such as W3 Total Cache, or even the Yoast SEO plugin. When you have 10s of thousands of lines of code, combining with thousands of other lines of code, there are bound to be incompatibilities.

  • http://chrisburgess.com.au/ Chris Burgess

    Hi @nick_deravedissian:disqus — thanks for sharing your thoughts, this isn’t one of our sponsored articles. I don’t personally use page builders often, but I do see them gaining traction, so it’s good to hear about what works and what doesn’t. If there’s any in particular you’d like us to cover just let me know! :)

    Good point about full width, it does come down to theme compatibility. The topic came up at a recent Meetup where they were presenting on Beaver Builder, I made note that someone recommended Dambuster (https://wordpress.org/plugins/genesis-dambuster/) which I believe also works with Divi Builder too.

  • Tuan Le

    HI James!Thank you for share this great acticle,I just want to ask why when I install Divi Page Builder plugin to my WP theme and setup for my homepage but nothing comes up,it still comes with my defaul homepage,,? any suggest would be thankful.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in WordPress, once a week, for free.