For the next few weeks, I’m going to focus on the Divi theme for WordPress. It’s an insanely popular theme that offers a drag-and-drop page builder. Divi Builder is also available as a plugin for any site — even one that doesn’t run Divi.

The Divi theme is flexible enough to allow you to create nearly any layout you can imagine. If you’re not feeling creative, Divi offers numerous templates and layouts that you can adapt for your own purposes.

Divi Child Themes

If you anticipate that you might make major changes, it’s a good idea to create a child theme. Divilife is an excellent resource if you want to learn more about the Divi theme. Here is Divilife’s advice to help you decide if you need a child theme.

When You Need a Divi Child Theme

• You anticipate you’ll make changes to Divi’s PHP theme template files such as a header.php, footer.php, single.php, 404.php, etc.
• You’ll add custom functions or code snippets to functions.php.
• You are customizing the theme’s javascript files, or adding lots of new javascript.
• You’re making edits/additions to ANY file that is within Divi’s theme files.
• You don’t want clients to see any code that you saved in Theme Options in case they mess with it and break something.

If you decide to add a child theme, you need two files in addition to any files you plan to edit:

1. Function.php
2. Style.css

If you don’t want to make your own child theme, you can download Divilife’s bare bones child theme here.

Theme Options

Although the bulk of the customization controls are in the WordPress customizer, you’ll have to do the initial setup in the Theme Options.

This is a Divi site I’m currently working on for a local yoga studio, which just happens to be founded by my youngest daughter.

As you can see, most of the options are pretty self-explanatory. The first step in your site setup is to upload the logo. Simple enough.

As you scroll down the page, you’ll see various options, including a place to enter a Google API key, which you’ll need if you’re going to use the Google map module.

Continue scrolling and when you reach the bottom of the page you’ll see a box for custom CSS. I like to keep this open on a tab while I’m working so that I can easily add a little CSS to make things behave. These CSS changes will remain when you update the theme.

Click on the next section in Theme Options, which is Navigation. Here you’ll set basic options for your navigation menu. On the Categories tab, you can control the dropdown menus. In General Settings, the only control is whether you want to disable the top tier menu links on your dropdown menu.

Let’s move on to the Builder options. You can enable the Divi Builder on posts, pages, testimonials, and portfolio projects on the Post Type Integration tab, but that doesn’t mean you should. I strongly recommend against enabling the builder on posts. If you change themes, all posts built with the page builder will have to be reformatted as they’ll be full of useless shortcodes. It’s a much better idea to use Gutenberg to format posts.

Click on the Advanced tab in the builder section for some important controls. There are a couple of performance controls, and an option at the bottom to enable the Classic Editor. This will take you back to the older editor instead of Gutenberg. Depending on what plugins you have installed you may need to enable it while editing on the front end. Otherwise I leave it disabled.

Next is Layout. One setting you may want to watch out for is Place Thumbs on Post. If you enable this, Divi will display your featured image on the post, which can give you duplicate images if you’ve placed the image in your post. Single Page Layout works the same way. Under General Settings, you probably want to enable Show Thumbs on Index Pages as this will add thumbnails to your archive pages.

Under the SEO section, you have controls for custom titles, meta description and other SEO elements. I honestly don’t pay much attention to this as I add Yoast SEO to any site I build and it will take care of SEO.

Integration allows you to add custom code to the <head> and <body> sections. This is where you’d add code for Google Analytics, Facebook pixels, and any other custom code.

The last section in Theme Options is Updates. Add you username and API key for easy updates to the Divi theme.

The WordPress Customizer

The Customizer is where the real fun starts. The first section, General Settings, is where you’ll upload your favicon (site icon) and add your title and tagline if you have one.

Next in General Settings is Layout Settings. Set site width, gutter width section and row heights and your accent color. Typography and Background are simple and self-explanatory.

Header & Navigation contains important settings. First, you’ll choose your header format. Divi allows for primary and secondary menus. Here’s an important tip.

If you don’t want your menu to resize on scroll and you’re using a fixed menu, ensure that your primary menu height is the same in the Primary Menu Bar section as it is in the Fixed Navigation section.

Under the Footer section, you can determine your footer layout. The Bottom Bar is generally used for copyright information.

The Buttons section allows you to globally define your button styles and specify hover colors. Adjust section height, row height, and text sizes in Mobile Styles.

The Divi theme allows for three menu locations, primary, secondary, and a footer menu. The Menus section is where you define the position of each menu. You can add menu items from this section and drag and drop the menus into the order you like.

Home Page Settings is where you’ll define a static home page or if you’d like your home page to be your most recent posts.

Additional CSS is another place to add CSS if you like and will reflect code you added in the Theme Options CSS section.

A Few Divi Getting-Started Tips

• Install the Elegant Themes Updater plugin. That will allow the end user to update Divi easily. Divi pushes updates frequently, so this is important.
• Instead of Divi’s built-in social media integration, I prefer Social Warfare. [WordPress Social Sharing Plugin – Social Warfare – WordPress plugin | WordPress.org] Divi only includes Facebook, Twitter, Instagram, and Google Plus (which is no more), so it’s pretty limiting.
• If you need to get a website up and running very quickly, browse the Divi Layouts page on Elegant Themes’ website [Divi Library | Elegant Themes]. You can download any of these templates for a quick start and design inspiration if you need it.

Come back next week for more about Divi. Next week we’ll look at the builder.