Best WordPress Themes: Divi by Elegant Themes

by | Sep 16, 2018

Best WordPress Themes: Divi

Choosing a theme is probably one of the first decisions you’ll make for your WordPress Site. There are certainly some decent free themes available, but when you’re ready for the big time – we think Divi is

the way to go.

Divi was developed by Elegant Themes and has been downloaded over 480,000 times. So, I think it’s safe to say, we aren’t the only ones who love Divi.  Plus, Divi is bundled with the Extra theme and three custom plugins.

Have a subscription but have to say –  I’ve never used Extra because…well, because Divi.

What’s the Big Deal about Divi?

It’s flexible, it’s customizable, it’s responsive and no two sites look the same. If you want a website that’s unique to your brand, Divi makes it easy to design.  

But that’s just part of why so many web designers and developers are using it:

  • Regularly updated (with rollback protection)
  • Online chat support and easy to use Help Center with searchable documentation
  • Token system to let support access your site
  • Cool niche themes bundled in the installation
  • Visual Builder to work right in the browser
  • Simple social media integration
  • Woo Commerce included
  • Lots of built-ins, needs few plugins
  • Amazing blog with configuration tips, CSS tricks and cutting-edge ideas.

How-To Use Divi

When you download Divi, it comes in a zip file. Don’t unzip it or extract the files – you’re going to upload it to your website.  Login to your site and go Appearances/Themes on your dashboard. Click Add New and upload Divi from your computer. Once it’s uploaded, click Activate and you’re ready to rock.

Go to a Pages/Add New. You’ll get a blank page, add your title on the top – My Divi Home Page. Look over Then click the button that says use the Divi Builder. This is where the fun starts.

This is how Divi works. There are Sections (the blue and gray box) that hold rows (the green and white box.) Rows are configured in columns that hold content modules. Every element (section, row, column and modules have standard styles that can be customized.

Choose your column configuration.

Choose the modules you want to in them.

That’s how easy Divi is to use. Every section can have as many rows as you want, and every row can have different column configurations and modules.  Add new sections any time you want or add a special Full Width Section. No columns there – those modules are single column and to cover the screen.

One thing to be aware of – once you’ve created content in the Divi Builder, switching back to the Default editor will delete it. So, don’t switch back once you’ve started putting your content together.

Designing with Divi

You saw how the backend editor for Divi works but that’s just the beginning. There are so many cool things you can do with Divi.  Let’s start with the tweaks you can make in the Divi Options menu right after you activate the theme.

  1. Go to Integrations tab and add your account name and API key to authorize updates. (Login to your Elegant Theme’s account to snag your API key.)
  2. Go back to the General tab and change the standard color palette. (Click on a color and change the hex code to the color your using.) SAVE CHANGES.
  3. Get a Google Maps API if you don’t already have on and put it in the Google API field. SAVE CHANGES.
  4. Click the button beneath the API – Enqueue Google Maps Script. SAVE CHANGES.
  5. Upload your logo file. SAVE CHANGES. (Don’t freak if it’s too big or small – this is the perfect chance to introduce yourself to support…)
  6. Add the links to your social media accounts. SAVE CHANGES.
  7. If you want Divi to put social media buttons on the site’s footer, turn on buttons for your accounts.
  8. Turn on these buttons: Back to Top, Smooth Scrolling, Minify and Combine JavaScript Files, Minify and Combine CSS Files. SAVE CHANGES.

There are definitely other things to play with in Divi Options, but this is a good start.  And I know I sound like a broken record with the Save thing but trust me, very annoying to have to do this stuff more than once.

Theme Customizer

If there is one problem I have with Divi, it’s that there are so many options in so many places.  The Theme Customizer is the main place to make global customizations. The Module Customizer is where you set up specific Modules.

Theme Customizer Module Customizer

Before you get too far into building pages and posts, you really want to do a walk through on these two menus.  Choose your fonts, set up how you want your navigation to work, add your email provider and list to the Email Opt-in – do it all up front.

Even if you go back and tweak it, once you’ve customized a menu or a button or blurb, your changes will apply across the site.

The other cool thing are the controls on the bottom. They let you look at the site sized for different devices – desktop, tablet and smartphone. You can quickly see places where the font is too big for the device or you need more padding.  The same controls are in the Visual Builder (more details to come further below.)

Multiple Themes in One

One other really cool option in Divi, especially if you hate starting from a blank page is the layouts that come with the theme. Once you choose the Divi builder option on your page, there are two buttons that will interest you: Pre-Made Layouts and Load Layouts.

The Pre-Made Layouts are just general page layouts.  You can pick one and see what it looks like in the browsers. If you don’t like it, just click Clear Layout and try another one.

Load Layouts is where you’ll find all the niche mini-themes that are included with Divi. There are templates for churches, doctors, real estate agents, photographers, restaurants, politicians – you name it, it’s in there.

Click the one you want, and it loads – with all the images.  Now honestly, you should swap the images out for new pictures or risk looking exactly the same as anyone else who knows how to click the Load Layouts button.

But all the sections, rows, columns, modules and most importantly all the settings are there – done. Edit at will. Blows you away how much time you can save, especially when you’re first starting out.

Divi’s Visual Builder

The Visual Builder is the crown jewel of Divi – no question about it. As we described earlier, when you build a page with the backend Divi builder, you’re looking at sections, rows and modules. You work in the modules, save it and preview it and tweak it.

(A backend tip – you can give Divi Modules a name – so instead of 10 modules called Text, change it to something that tells you what text it is: staff, refund, hours, etc. Otherwise as you build your page, its’ easy to get confused about what module is holding what text.)

But when you use the Visual Builder, you make your edits right in the browser. Change the text, swap out pictures. You can change the spacing around sections or rows simply by dragging them. It’s wild.

Want to try it? You can – here’s demo where you can play around with Divi’s Visual Builder.

First Thing

If you’re on a computer, there’s is a large purple button with three dots in the middle of the screen. Click it and you’ll see a Save button on the right and view controls by device on the left.  

Remember that blue are sections, green are rows. Move your cursor around the boundaries will pop up as you hover.  There’s a settings button for each, click and it and look at what you can do for each. You can make changes in the Settings tab and save them or make them right in the builder.

This demo will let you try everything – clone, delete, change the text,  add a row, insert another module. It’s almost too much how much you can do with Divi – without knowing a line of code or CSS.

Mobile Ready

The device controls in the Visual Builder are total timesavers. Designing for multiple screen sizes, browsers and operating systems can be a pain in the…body part of your choice. Now you can see what everything looks like – without having to own every device under the sun.

If you’re just learning – it’s really helpful to understand how responsive website manage content.  On a computer, “We’ve Got You Covered” is two rows with four columns. On a tablet, it’s four rows, two columns per and on the phone – its just one column and eight rows.

 

Tablet Mode Smart Phone

When you view the site on smaller screens, you start to notice things that work better on the computer than they do other places. For example, the text may be too big on the tablet or you need more room around the buttons on the phone.  Divi has got your covered.

Two Ways to Customize Mobile

First, you can use the Theme Customizer to set up sizes for the spacing around mobile sections, rows and fonts.  It’s pretty basic stuff, but helpful as a starting point.

In the Visual Builder, switch from the computer view to a smaller device.  

Using the “We Got You Covered” blurbs, click the Settings button, and go to the Design Tab. This is where you can change any number of style choices, but we’re going to look at Title Text.

If you look in the screenshot, there’s a small smartphone icon at the end of the settings for title text. If you click it, you can set different size type, line spacing or leading by device.

Use the demo to get the idea, but remember – these guys know exactly what they’re doing.  Once you’re building your own site – you’ll appreciate these tools a lot more.

For Beginners & Web Professionals

Here’s the thing – Divi is super helpful for non-technical people or when you’re just starting out online. But don’t expect to outgrow this theme anytime soon.  There is so much you can do with it.

And the Elegant Themes Blog? OMG – it will walk you through some of the most outrageous designs and page layouts.  There was a recent post on adding motion to section dividers, where a gray background melted down the page.  

You think to yourself, “I could never do that”… then you start following the directions. You learn how to do it!  It’s amazing to have access to experts who walk you through step by step, taking your site way beyond the next level.

There’s a YouTube channel too, if you prefer to learn by watching. There are so many Divi designers and developers on YouTube or Tumblr or GitHub, willing to share their expertise. That’s the sign of something bigger than a theme – it’s a community.  Resources are everywhere.

Pricing

Elegant Themes uses a subscription model – either pay once a year or pay a set fee for life.  Sometimes they run specials – you definitely want to sign up for their newsletter (even if you aren’t ready to buy.)

The annual fee for the Elegant Themes bundle is currently around $100. The lifetime, one-time fee is $249.  Is it worth it? Heck yeah. You can use the theme as on as many different websites as you want too – no limitations while your license is current.

If you let the plan expire, your site is still functional, but you won’t be able to update.  Not the best from a security perspective.

The Divi Nation

We’re definitely part of the Divi Nation. We think this is one of the best – if not the best – theme on the market.

It’s lightweight, loads fast, plays well with most major plugins and takes the aggravation out of designing for mobile device.  The visual builder, the theme customizer, all the built-ins without any of the bloat. The Support folks are nice, the speed of response is pretty standard. But what we love is the remote support tokens where they go in and ten minutes later have solved a problem that’s been eating your lunch for a week…

The Divi Nation – join us.

Free Exclusive Website Building Tips

Enter Your Email to Get Access to my Proven Techniques to Building Great Websites and More

Share This