Installing the Divi Theme + Divi Builder 5
1 Corinthians 14:40 – “Let all things be done decently and in order.”
Good website design requires order too. We organize our content so visitors can easily understand and use our website.
What Is a WordPress Theme?
A theme controls the overall design and appearance of a WordPress website.
Think of WordPress as the structure of your house. The theme helps determine what that house can look like.
A theme can affect things such as:
- Fonts
- Colors
- Page layouts
- Menus
- Headers
- Footers
- Buttons
- Blog layouts
- Overall website style
There are thousands of WordPress themes available.
For this class, we will use Divi.
What Is Divi?
Divi is a WordPress theme and visual website builder created by Elegant Themes.
Instead of creating every part of a website using code, Divi allows you to build pages visually.
You can add something to your page, change its settings, and see what it looks like while you are designing.
This is called visual website building.
Think of Divi like building with digital blocks.
You choose the blocks you need and arrange them to create your website.
Step 1: Install the Divi Theme
Your Tutor will provide the Divi Theme file you need for class.
From your WordPress Dashboard:
- Go to Appearance → Themes.
- Click Add Theme or Add New Theme.
- Click Upload Theme.
- Select the Divi
.zipfile provided by your instructor. - Click Install Now.
- Wait for WordPress to finish installing Divi.
- Click Activate.
Once Divi is activated, it becomes the active theme for your website.
Important: Do not unzip the Divi file before uploading it. WordPress needs the .zip file.
Step 2: Meet Divi Builder 5
Now that Divi is installed, we can begin designing.
Divi Builder 5 allows you to build your website using different types of building blocks.
There are three important terms you need to know:
Sections
A section is a large area of your webpage.
For example, your homepage might have:
Welcome Section
About Me Section
Services Section
Photo Gallery Section
Contact Section
Sections help keep your webpage organized.
Rows
A row goes inside a section.
Rows allow you to divide your content into columns.
For example, you could create:
1 column
IMAGE
or
2 columns
IMAGE | TEXT
or
3 columns
SERVICE 1 | SERVICE 2 | SERVICE 3
Rows help you control where information appears on the page.
Modules
Modules are the actual pieces of content you place inside your rows.
Divi includes modules for things such as:
- Text
- Images
- Buttons
- Videos
- Galleries
- Contact forms
- Testimonials
- Maps
- Social media icons
- Menus
- Blog posts
Think of it this way:
SECTION → ROW → MODULE
The section creates the area.
The row creates the layout.
The module adds the content.
Example: Building a Welcome Area
Imagine that you are creating a website for a photography business.
You want the top of your homepage to have a photograph, your business name, a short sentence, and a button.
You might build it like this:
SECTION
↓
ROW
↓
IMAGE MODULE
TEXT MODULE
BUTTON MODULE
Your button might say:
View My Photography
When a visitor clicks the button, it could take them to your photography portfolio.
You have just created part of a webpage using Divi!
Exploring the Divi Builder Interface
When you open a page using Divi Builder, you will see different tools and settings.
You do not need to memorize everything today.
Your goal is to become comfortable exploring the builder.
As you explore, look for tools that allow you to:
- Add a section
- Add a row
- Choose columns
- Add a module
- Add text
- Add an image
- Change a background
- Change a font
- Change text size
- Change spacing
- Add a button
- Move an item
- Delete an item
- Duplicate an item
- Save your work
You will learn how to use these tools throughout the course.
A Designer's Rule: Explore Without Fear
One of the best ways to learn website design is to click, explore, and experiment.
You are going to see buttons and settings that you have never used before.
That is okay.
Instead of immediately asking, “What does this do?”
Try asking:
“What happens if I click this?”
Professional designers did not learn every program by memorizing every button first. They learned by experimenting, making mistakes, fixing those mistakes, and continuing to build.
Class Activity
Divi Click-Through Exploration
For today's activity, you are going to explore Divi Builder 5.
Your goal is not to create a perfect webpage.
Your goal is to discover what Divi can do.
Try to find and experiment with the following:
-
Add a section.
-
Add a row.
-
Create a two-column row.
-
Add a Text Module.
-
Type some sample text.
-
Change the text size.
-
Change the text alignment.
-
Add an Image Module.
-
Add a Button Module.
-
Change a background.
-
Duplicate something.
-
Move something to a different location.
-
Find the option to delete something.
-
Find the option to save your work.
Exploration Challenge
Find one Divi feature that was not on the list above.
Be prepared to tell the class:
What did you discover?
What do you think it could be used for?
Homework
What Is Your Website About?
Write one paragraph explaining what your website will be about.
Your paragraph should answer:
What is the purpose of your website?
Who is your website for?
What will visitors be able to see, learn, buy, or do on your website?
What makes your website idea unique?
Write at least 5 complete sentences.
Example
My website will be about nature photography. I want to create a place where people can see photographs of animals, plants, landscapes, and interesting things I discover outdoors. My website will include a gallery of my favorite photographs and information about how I took some of them. It will be designed for people who enjoy photography and nature. I want visitors to leave my website inspired to pay more attention to the world around them.
Answer each question below:
What is a WordPress theme?
What is Divi?
What are sections, rows, and modules?
How does organization make a website better?
And most importantly, remember:
SECTION → ROW → MODULE
That simple structure will become one of the foundations of how you build with Divi.