Introduction to Divi – My Favorite Theme

by | Jul 2, 2020

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 – I am confident you can benefit from using Divi by Elegant Themes (or at least the Divi builder)

Divi was developed by Elegant Themes and has been downloaded over 700,000 times. So, I think it’s safe to say, I’m not the only one who celebrates the capabilities of Divi.  Plus, Divi is bundled with the “Extra” theme and three custom plugins.

I started building sites using Divi around 2014 or 2015 when I hired someone else to build a website for me. As I tried to implement changes and updates to my own site, I soon discovered the process was both fun and exciting. It helped me build my own website, and within a couple of years, I completely changed my career path to working on websites full time.

When I build websites from the ground up, I only use Divi. The versatility of this theme has allowed me to create sites for multi-million dollar clients, real estate companies, health care businesses, small businesses, architects, affiliates, and many other types.

What’s the Big Deal about Divi?

It’s flexible, it’s customizable, it’s responsive and no two sites have to look the same. If you want a website that’s unique to your brand, Divi makes it easy to design. If you are new to Divi, there are a ton of great pre-made theme templates you can use as a foundation for your website. For the less experienced, this can give you a great introduction into some of the ways Divi can make your website look great.

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
  • Split testing functionality
  • Theme defaults and global module settings for rapid development
  • Deeply customizable WooCommerce capabilities
  • Lots of built-ins (reduced need for plugins)
  • Amazing blog with configuration tips, CSS tricks, and cutting-edge ideas.

Some Divi Basics

The Divi builder is amazing – if you are looking for an all in one, forward-thinking solution to your website, Divi is all that and a bag of chips. For an experienced Divi pro, this is an amazing playground of opportunity, but to the uninitiated, the versatility can feel overwhelming. This is exactly why I created a course with a walkthrough on how to get your website up and running. If you can overcome the barrier of too much of a good thing, you will find that your journey to a better website is paved with possibility through this elegantly simple theme.

While the visual builder is nifty, the back end wireframe is still a little more simple to work with. Front end changes sometimes lead to little conflicts depending on screen size, and there are some elements for best practices of page building that are still much quicker to complete from the back end or classic editor.

Take a look at this classic editor back end – this is what I prefer to use when building websites from the ground up. As you will see, the simple design makes creating a layout straightforward, and while the front end editor is a little more user friendly, the back end editor contains more customization options at present.

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 easily.

Select 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.

Additionally, if you create a great standard template for your usual web pages, you can save certain elements as “global” and change them for the entire site from a single module. More on this in a minute.

Designing with Divi

You can get an idea for how the backend editor for Divi looks from the photos but that’s just the beginning. There are so many cool things you can do with Divi.  Let’s start with the integrations and tweaks you can make in the Divi Options menu right after you activate the theme. Be sure to click “save changes” every time you complete one of these to ensure the new integrations are working properly.

  1. Go to the Integrations tab and add your account name and API key to authorize updates. (Log in 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.) 
  3. Get a Google Maps API if you don’t already have on and put it in the Google API field. 
  4. Click the button beneath the API – Enqueue Google Maps Script. 
  5. Upload your logo file and save your changes to see it on the front end. Try to keep your logo at or below 250px wide and/or about 150px tall to keep your page speed fast without compromising the quality of your image.
  6. Add links to your social media accounts. 
  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. 
  9. Consider disabling animations to make your site extra speedy.
  10. Link your account to an email marketing platform by selecting your platform and entering your account API (from your email marketing platform’s back end).

There are definitely other things to play with inside of Divi Options, but this is a good start.  And I know I sound like a broken record with the Save thing but trust me, it can be 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. When I work with clients who have limited budgets and/or time frames, this is where I turn for inspiration.

Working from an existing page template does not mean every site will look the same, but it certainly helps clients get a better idea for what they like and don’t like – so I recommend when you are working on your own site, you should load some of these templates and see if any pages, sections, modules, fonts, colors, etc speak to you.

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. It will blow 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, you can easily 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 great for people who don’t like staring at wireframes. With that in mind, I still find some issues within the visual builder when optimizing for multiple formats, so if you see a glitchy formatted area, head back to the wireframe editor to get your visuals working the way they ought to.

Want to try it? You can – here’s a 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 lengthy process. 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 websites manage content.  On a computer, the area displaying “We’ve Got You Covered” in the example 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 there is a different user flow. Some desktop content may turn into a giant waste of space on a phone. That’s why you want to customize the user experience for each device type.

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.  This is a pretty good way to see what a typical mobile experience may look like, but it isn’t perfect so be sure to look at your phone as well.

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.

If you want to knock the learning curve down to a fraction of the time to learn on your own, take a course and read the amazing Divi blog. The blog will walk you through many technical customization opportunities within the theme. Over time, I have managed to enhance my Divi skills through the regular use of their blog. In bite-sized pieces, this is an amazing tool! You can learn a lot without being overwhelmed.

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, the one-time fee is about the equivalent of 3 years of subscription.  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

I am a proud member of the Divi Nation. I am certain this is one of the best – if not the best – theme on the market. 

It’s robust, loads quickly, plays well with most major plugins, and takes the aggravation out of designing for mobile devices.  The visual builder, the theme customizer, and all the built-ins give you a thorough solution to your custom business website without any of the bloat.

As someone who has been making a living by building websites for years, I am happy to say this is my one size fits all solution that has resulted in many very happy customers. If you get to know the theme, you will see why I can trust this is more than enough to create a great website for virtually any need.

Stay In The Know!

We are coming out with great articles, courses, and ways to help you continue to enhance your digital web presence. Subscribe to our email list to be notified when we introduce new content!