WordPress
Article

Divi: the Drag and Drop WordPress Theme

By James George

Not everyone who uses WordPress is a web designer or developer. In fact, understanding how to build a custom WordPress theme takes a good knowledge of PHP. Theme development company ‘Elegant Themes’ realized that users wanted to be able to design their own site layout inside of WordPress. They developed the Divi drag-and-drop WordPress theme to make it easy for WordPress users to build their own custom sites, without knowledge of code. If you haven’t had a chance to look at the Divi WordPress theme, let’s take a look at some of its amazing features.

Layouts

You can use the traditional WordPress interface, or you can use the Divi page builder. This enables you to stack and arrange components that are pre-made for specific purposes.

Load Layout

One of the options inside of Divi is the ability to choose a pre-made layout. This is a pre-built page design already built into your Divi WordPress theme. These pre-made layouts enable you to edit each module and replace the content with your own. This takes the difficulty out of design and development for your WordPress site.

Page Builder Example Layout

Pre-made layouts range from landing pages, to home pages, shops portfolios, corporate, masonry layouts, and more. There are many options to choose from. Clicking load will automatically enable this layout for the page that you’re working on.

Columns

If you don’t use a pre-made layout, you can build your own. You can set your site up to have multiple columns simply by clicking in the window to add columns. You can determine whether you’d like a three column layout, a four column layout and any other variation you might expect.

Specialty columns

If you want something a little more varied, you can click on the option in the bottom left to add a specialty section. These sections have more intricate and advanced layouts than the typical multi-column choice. Depending on your content, you can really mix it up with the special layout sections.

Modules

There are modules for just about anything you could think of that you’d expect to see on any business or personal website. If you think about your website as a stack of blocks on top of one another, then it’s easy to stack and arrange these modules to fit together to build your page layouts. For example, you can click the slider module and choose to create a full width slider at the top of your page.

Modules

Depending on what type of page you’re trying to create, you can add things like filterable portfolios or pricing tables. This makes it easy for you to focus on your content, without worrying about how to build it.

Counters

There are some really interesting modules in this collection, such as bar and circle counters, as well as number counters. If you really want to show off any statistics for data in an interesting way, these counters can be animated.

Counters Live

Options

Blurb Options

Each module has a lot of different options, giving you ultimate control over how your website will look and behave. These options will allow you to change colors, add background images, and you can even animate how they fade in as the user scrolls down the page.

Slider Settings

For example, the image slider can be a full width slider, or you can change the layout so that there is an image on one side and text on another. With just a couple of clicks of your mouse you can greatly change the layout of your site. You can even add features like login forms and call to action buttons that lead users throughout your site.

Contact Form

You can add features that you would expect to see in any other website, such as tabs and accordions. You can also insert full width images, as well as a working contact form on any page and in any location. You can even insert your shop anywhere you want and customize it with the settings that are available.

Ease of Use

The thing that stands out for me with the Divi WordPress theme is how easy it is to use. The entire interface, from start to finish is drag and drop. If you need to reorder the content or move it around, you simply place your mouse on the module and click and drag it in place.

This theme is perfect for anyone who wants to create a custom layout, but who doesn’t know anything about how to code a WordPress theme of their own. It keeps the website design process more visual.

Animations

Even if you don’t know how to code a WordPress theme, there are built–in options for advanced features. If you can fill out a form or click buttons, you can add animations to your site. Certain modules give you the ability to animate how content appears. You can have content fade in, or you can choose for it to slide in from top to bottom or left to right.

Animation

The user experience is excellent when you choose this option. As the visitor scrolls down, content fades in, or it slides from a particular direction and falls into place as they scroll. You can even set it so that your site displays the parallax effect, where an image appears to be layered behind your content.

You can toggle features on and off with the different settings that are available. You can make icons or blurbs into live links that connect to other areas, or you can turn it off altogether.

Videos & Background Images

Background Video

Divi gives you the ability to create custom sliders for the header of your site. You also have the ability to place a YouTube Video, or an MP4 on your site. You can set the background to a specified color, or you can upload a large image to use as a full screen background.

Conclusion

The ability to create a completely customized look for your site is where Divi stands out as a WordPress theme. You can do just about anything imaginable, simply by toggling options on and off. You have full control over colors and fonts, and the layout options provide infinite possibilities. If you don’t know how to code your own WordPress theme, but you want a beautiful custom website, Divi may be just the theme you’re looking for.

  • http://nyasro.com/ Nyasro

    Nice.

  • Twoopl

    Good review of backend, but how about the front-end final result?

    Can you please compare with this drag and drop theme – http://designmodo.com/startup-wordpress/ it has directly visual changes, but I don’t know many about backend.

  • http://www.downloadcrunch.com/ Sainik Biswas

    I implemented Divi for a customer of mine. Turns out what Divi had was more than enough of their requirements. And instead of coding the whole website starting with Genesis or Thesis which I normally do, the end results with Divi are pretty great. The website is http://rid3240.org.

  • craig

    for all those Divi fans out there, check out my new Divi theme showcase website

    http://www.divithemeexamples.com

    • http://WebEminence.com/ Ryan Bowman

      Impressive showcase of the Divi theme Craig. Just checked it out but it would take hours to view your whole showcase!

      Divi is a solid option for WordPress drag and drop. I did a short video here to show how it works since I get so many WordPress beginners asking me about drag and drop for WordPress
      https://www.youtube.com/watch?v=AFePD31Kg0s

      I’ve used Elegant Themes to build sites for clients and find myself going back to Divi often.

      • craig

        yes, 560+ sites and over 100 scheduled to add…:)

    • craig

      this site has 550+ divi site examples now!

  • Sound484

    I have been very interested in Divi and I have scanned everything I can find at Elegant Themes and outside to get information on it. I have concluded that I can not see any reason why I would stop using a premium theme for Divi. My take on Divi is: the E-panel is the same old settings they’ve had for years now. The customizer is severely limited, the fonts are limited, why not have all the google fonts? The styling is limited and you must use CSS to do any real changes. You cannot nest any of the page builder modules. The product support is OK at best. When ever you ask a question out of the ordinary they tell you “this is out of our scope”. Now I wish it was more like a premium theme so I could pay $89 for a year and not have to buy a theme for each project.
    For $58 at Themeforest I get a theme like Swift Ideas Cardinal with $120 of premium plugins, unlimited styling options and tons of modules and the best tech support I have seen and I have been a member of Elegant Themes, Woo and Themify. I am hoping that ET will update the things I have outlined and when they do i will be first in line to signup. -Thanks

  • http://artsnet.org/ Ngoc Nguyen

    Divi theme is powerful and fully responsive WordPress Theme. You can check a live demo here on PC and mobile as well : http://artsnet.org/

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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