Sections, Rows & Modules
1 Corinthians 12:18
“But now God has placed each one of the parts in one body just as He wanted.”
Think about building a house. A house has rooms, each room has an arrangement, and inside those rooms are things like furniture, pictures, and lamps. Each piece has a purpose and a place.
A website works in a similar way.
In Divi, we organize our website using three main building blocks:
Sections → Rows → Modules
Understanding these three pieces will make building websites much easier. Instead of randomly placing things on a page, you will know exactly where everything belongs.
This connects beautifully with 1 Corinthians 12:18. YAH created the body with different parts and placed each part where He wanted it. Each part has a different purpose, but they work together as one body.
Your website should work the same way. Every section, row, image, button, and piece of text should have a purpose.
1. Sections: The Big Containers
A Section is the largest building block in Divi.
Think of a section as one major area of your webpage.
For example, your Home page might have:
- A Hero Section at the top
- An About Section
- A Services Section
- A Testimonial Section
- A Contact Section
Sections help divide your page into organized areas.
In Divi, Sections are blue.
A section contains one or more rows.
2. Rows: The Layout
Inside each section are Rows.
Rows determine how the content inside the section will be arranged.
In Divi, Rows are green.
A row can have different column structures. For example:
One Column
|
Welcome to My Website |
Two Columns
|
Image |
About Me |
Three Columns
|
Service 1 |
Service 2 |
Service 3 |
Rows are especially important because they allow you to decide where your content will appear on the page.
3. Modules: The Content
Inside the rows are Modules.
Modules are the actual content your visitors see and interact with.
In Divi, Modules are gray/dark gray.
Some common Divi modules include:
- Text
- Image
- Button
- Blurb
- Video
- Gallery
- Contact Form
- Menu
- Testimonial
- Social Media Follow
For example, if you want a picture next to some information about yourself, you could create a two-column row, place an Image Module in one column, and place a Text Module in the other.
Remember the Order
The Divi structure always follows this basic pattern:
SECTION
↓
ROW
↓
MODULE
You cannot simply place a module anywhere. The module needs a row, and the row needs a section.
Think of it like this:
Section = Room
Row = Furniture arrangement
Module = The actual furniture
The structure keeps everything organized.
Example: Building a Hero Area
Suppose you are creating the top of your Home page.
You could build it like this:
SECTION: Hero Section
ROW: Two columns
LEFT COLUMN MODULES:
- Heading/Text
- Short introduction
- Button
RIGHT COLUMN MODULE:
- Image
Now every piece has a place and a purpose.
In-Class Activity: Build a Simple Layout
Today you will practice building a page using Divi's structure.
Create a simple layout that includes:
- Section 1: Welcome
- One row
- One column
- Heading
- Short paragraph
- Button
- Section 2: About
- One row
- Two columns
- Image on one side
- Text on the other
- Section 3: Services or Features
- One row
- Three columns
- Add a Blurb Module to each column
As you build, pay attention to the Divi structure. Ask yourself:
What section am I working in? What row am I using? What module do I need?
Before You Finish
Preview your page on desktop, tablet, and phone.
Check that your sections are clearly separated, your columns make sense, your text is readable, your images fit correctly, and nothing looks crowded.
A good website is not just about making things look pretty. It is about organizing information so visitors can easily understand and use the website.
Homework
Practice Your Home Page Layout
Continue working on your Home page using what you learned today.
Your Home page should include at least:
- 3 Sections
- 2 different Row/Column layouts
- 3 different types of Modules
You might use Text, Image, Button, Blurb, Gallery, or another appropriate module.
Do not focus on making everything perfect yet. This week's goal is to become comfortable with Divi's structure.
Before submitting, make sure you can identify:
Section → Row → Module
This Week's Takeaway
YAH placed each part of the body where it belongs, and each part serves a purpose. As designers, we also need to think carefully about where each part of our website belongs.
Good design is organized design. Every part should have a purpose and a place.