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.
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.
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.
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.
Code
Add your own custom HTML code or shortcodes here.
Countdown
It is what it is. Divi allows you to customize the appearance of your countdown.
Circle Counter
Track your progress toward a goal.
Email Optin
Add your email marketing provider, choose the list you want your form to connect with and add your copy.
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.
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.
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.
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.