divi theme

Build a Web Page With the Divi Theme

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.

divi theme

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.

divi theme

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.

add modules in divi theme

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.

Blog

Adds posts to your layout. You can specify the number of posts, categories to pull from, and much more. This is how you add recent blog posts to your home page or any page.

divi blog module

Button

If you customized your button via the Customizer (See Part 1), you’ll just add this module anywhere you want a button, add your text and link and your button will appear.

add a button to divi theme

Blurb

You can use either an image or an icon for the blurb. It’s for content you want to call out separately from the rest of the page.

Call to Action

Use the call to action module if you want your user to do something.

divi theme call to action

Code

Add your own custom HTML code or shortcodes here.

divi code module

Countdown

It is what it is. Divi allows you to customize the appearance of your countdown.

Circle Counter

Track your progress toward a goal.

divi circle counter

Email Optin

Add your email marketing provider, choose the list you want your form to connect with and add your copy.

 divi theme email optin

Filterable Portfolio

This is great if you have more than one category of work you’d like to display. Create portfolio items, place them in a category and Divi will sort them according to category. You can choose between a grid and a one-column layout.

Gallery

Add a photo gallery. Choose between a grid or slider layout.

divi theme gallery

Login

If you have a membership site, you can create a login form.

Maps

This module will add a Google Map to your page. This module will only work with a Google Maps API key, which you can get from the Google Developers site at Developers.Google.com.

Menu

The Menu module places the menu of your choice anywhere on your site. I’ve most often used it for sidebar or footer menus.

Number Counter

This module places an animated counter on your page and counts up from zero. You can customize the numbers and text.

Person

Use this module if you want to build a team page and include brief team member bios.

Portfolio

The Portfolio module arranges your portfolio items in a grid layout.

Post Slider

The Post Slider module creates a slider that includes post featured images. You specify how many posts are included.

blog post slider

Pricing Table

Easily create great-looking pricing tables — with or without prices. You can include a list of features without prices if you choose.

Shop

This module adds a shop to your site. You can sort your products by best-selling, most popular, and featured and put items on sale.

Tabs

Add items to space-saving tabs. Add a heading and content.

Testimonial

Add testimonials to your site. If you don’t have images to use, you can leave them out.

Toggle

Use a Toggle Module to save space on your page. You can set it to be open or closed by default.

Video

The Video module takes a video URL and embeds it on your page.

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.

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

divi specialty section

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.

divi library item

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.


Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Share on pocket

Get My Free Website Guide

15 Essentials for a Top-Notch Website

My free guide will help you turn your website into your best marketing tool.

You’ll get a quick list of must-haves. Whether your DIY’ing it or hiring a pro, you need this guide.

Tweet
Share
Buffer
Share
Pin
Flip
Pocket