Over the past couple of weeks, I’ve introduced you to the Divi theme, we’ve talked about how to set up our website and the basics of the Divi Builder. If you need to catch up, my previous posts are here and here.

Website Goals

First, we must consider the goal of our site. Let’s ask ourselves a few questions.

What do we want our website to do?

• Sell a product or service.
• Inspire readers to learn more about a cause.
• Collect donations to a nonprofit.

Who is your target audience?

What specific features do you need? Some examples:

• Contact form.
• Events calendar.
• Photo gallery.
• Social media integration.
• Blog

If you’re going to include a blog, what topics will you write about?

Are there existing branding guidelines, such as logo, colors, or font styles that must be incorporated?

Take all of these factors into account as you consider the look and functionality of your site.

Design Inspiration

Before we start dragging and dropping, let’s get some inspiration. On the Divi theme website, you’ll find the Layout Library. This is a collection of existing websites built with Divi.

Here’s a layout pack built for a yoga studio. You can see the variety of pages for the site.

Let’s say we’ve decided to go with this one. Just to be sure, you can view a live demo. If you’re ready to add this layout, just click Use This Layout and Divi will add the images and pages to your site for you. You’ll then be able to edit as you please.

Design Your Own Page With Divi Theme

If you’re feeling more creative, and I hope you are, you might want to build your own layout.

Hover over the page and you’ll see the blue section bar. Click the green Plus icon in the center to create a new row. Choose your row layout. In this example I’ve chose a two-column layout for this row.

In one of your columns, click the dark gray Plus icon to add a module. Modules are page elements such as images, text boxes, and more.

You might want to play with some of the modules to see what they do and how they look.

Divi Theme Modules

Here are some of my most-commonly used modules.

Build the Page

Once you create your row (or module or section), you can duplicate it to save time on settings. Here are a few practical Divi Theme tips that might save you a bit of time.

1. Full-Width Content

If you want your row to be full width, use the Sizing settings to ensure that your width is set to 100%.

2. Types of Sections

There are three types of sections: Regular, Full Width, and Specialty.

Use the Full-Width section if you’d like your header image to go from edge to edge. At first you’ll notice the height will be auto. If you want your header image to display fullscreen, click on Design > Layout and toggle on Full Screen.

You won’t find these controls on a regular section, but you can still create a full-width header with a regular section. You’ll just need to paste this CSS into the Custom CSS window under Main Element.

height:100vh; 

That makes the image cover the full height of the viewport. If you want less than 100% height, you can use a lower percentage.

The Specialty section gives you a variety of layouts for your hero section. You can use multi-column layouts for your header.

I’ve also used this type of section for a page with a sidebar. It works much better than regular section, as the content area fills independent of the sidebar.

3. Mobile

Use the mobile design controls at the bottom left of each page when the Divi Visual Builder is active to work on your site in all devices sizes. You can set your own mobile breakpoints if you like.

You can also access mobile controls by clicking on the device icon just to the right of the label.

Divi Library

The Library can be a fantastic time saver. Here’s how it works. I’ve just created a new button. I added the text Click Here and a link. I want to use this button in several places on my site but I don’t want to have to recreate it each time.

Click the Library icon (just to the left of the trash can) to add the button to your Library. Give it a name and check the Global box to make it available sitewide. You can add it to a category if you like, but I don’t use the categories much. Click Save to Library.

When you want to add your library item, click to add a new module. In the dialog that pops up, choose Add From Library. There you’ll see your button. Click to add it.

Remember, library items must be identical. You can’t change the link on your button or it will change every instance.

If you haven’t read the first two posts of my Divi series, you can find them here and here.

---