Text + Image Modules
Build Your Home Page with Divi 5
Colossians 3:23
“Whatever you do, do it with all your heart.”
Have you ever visited a website and immediately thought, “Wow! This looks amazing!”?
Maybe the pictures caught your attention, the words were easy to read, or everything looked organized and professional.
That does not happen by accident. Someone carefully designed that website!
Today, you are going to become that designer. You will decide how your website looks, what it says, and how visitors experience it.
By the end of this lesson, you will have started building your very own Home page using Divi 5.
1. Your First Big Decision: Scratch or Template?
Before you start designing, you need to make an important decision.
Will you build your website from scratch or use a premade Divi 5 layout?
Both options allow you to create a professional website. The difference is how you begin.
Option A: Design From Scratch
Designing from scratch means starting with a blank page and creating your own layout.
You decide where everything goes!
You will choose your sections, rows, modules, fonts, colors, images, and spacing.
For example, you might decide to place a large heading at the top, a photograph underneath it, and a button inviting visitors to learn more.
You have complete creative freedom, but you must also think carefully about how everything fits together.
This option is a great opportunity to challenge yourself and develop your design skills.
Option B: Use a Premade Divi 5 Layout
A premade layout is a website design that someone has already created.
Think of it like moving into a furnished house. The furniture is already arranged, but you can change things to make the house your own.
Divi provides premade layouts with text, images, sections, and other design elements already arranged.
You can replace the example text with your own words, change the photographs, adjust the colors, and customize the fonts.
A template gives you a starting point, but it should not be your finished website!
Your goal is to transform the layout into something that represents your own brand, personality, or business.
Important: Using a template is not cheating. Professional web designers use templates, too. What matters is how thoughtfully you customize the design.
2. Make Your Design Decision
Before you begin, think about these questions:
Do I already have a clear picture of how I want my website to look?
Would I enjoy creating every part of my design?
Would having an existing layout help me organize my ideas?
Am I willing to experiment, make mistakes, and learn something new?
There is no single correct answer.
Choose the approach that will help you create a website you are proud of.
Once you have made your decision, tell your tutor which option you selected and why.
What Are Text and Image Modules?
Remember when we learned about sections, rows, and modules?
A section is a large area of your page. A row organizes the content inside that section. Modules hold the actual content that visitors see.
Today, we are focusing on two important Divi modules.
The Text Module
The Text Module allows you to add written content to your website.
You can use it for paragraphs, descriptions, introductions, and other information.
For example, imagine you are building a photography website.
Your Home page might include this introduction:
"Welcome to Banks Photography! I love capturing special moments and turning them into memories that last a lifetime."
Your words should help visitors understand what your website is about.
Think about your audience. What do they need to know? What would make them want to continue exploring your website?
The Image Module
The Image Module allows you to display photographs, illustrations, and other graphics.
Images help tell your story without using words.
Imagine visiting a bakery website. Would you rather see a paragraph describing a delicious chocolate cake or a beautiful photograph of the cake?
A great website often uses both!
Your images should connect to your content and help visitors understand your message.
For example, a photography website might feature portraits, while a pet grooming website might show happy, freshly groomed dogs.
Choose images that are clear, relevant, and appropriate for your website.
4. Make Your Words Look Amazing!
Remember when we learned about sections, rows, and modules?
A section is a large area of your page. A row organizes the content inside that section. Modules hold the actual content that visitors see.
Today, we are focusing on two important Divi modules.
The Text Module
The Text Module allows you to add written content to your website.
You can use it for paragraphs, descriptions, introductions, and other information.
For example, imagine you are building a photography website.
Your Home page might include this introduction:
"Welcome to Banks Photography! I love capturing special moments and turning them into memories that last a lifetime."
Your words should help visitors understand what your website is about.
Think about your audience. What do they need to know? What would make them want to continue exploring your website?
The Image Module
The Image Module allows you to display photographs, illustrations, and other graphics.
Images help tell your story without using words.
Imagine visiting a bakery website. Would you rather see a paragraph describing a delicious chocolate cake or a beautiful photograph of the cake?
A great website often uses both!
Your images should connect to your content and help visitors understand your message.
For example, a photography website might feature portraits, while a pet grooming website might show happy, freshly groomed dogs.
Choose images that are clear, relevant, and appropriate for your website.
5. Build Your Home Page Content
Your Home page is often the first page visitors see when they arrive at your website.
Think of it as the front door to your business or brand.
It should welcome visitors, explain what your website is about, and encourage them to explore.
Today, you will begin creating three important parts of your Home page.
Part One: Your Welcome Section
Create a heading that introduces your website.
Underneath your heading, add a short introduction explaining what you do or what your website offers.
For example:
"Welcome to Creative Designs!"
"We help small businesses bring their ideas to life through creative graphic design and beautiful websites."
Your introduction should be written in your own words.
Part Two: Your Featured Image
Add an image that represents your website.
If you are creating a photography website, you might feature one of your favorite photographs.
If you are creating a business website, you might use a photograph of your product or service.
Think carefully about what your image communicates.
Part Three: Your About or Services Section
Add another section that tells visitors more about you, your business, or your services.
Include a heading, a short paragraph, and another image.
Remember, you do not need to finish your entire website today. Focus on making these first sections look great.
6. In-Class Activity: The Home Page Design Challenge
Today, you are officially beginning your Home page design!
Your mission is to turn your ideas into a real website using Divi 5.
First, decide whether you will design from scratch or use a premade layout.
If you choose to design from scratch, open your Home page and begin building your layout using sections, rows, and modules.
If you choose a premade layout, explore the available Divi layouts and select one that fits your website. Replace its example content with your own.
Next, create your welcome section with a heading and introductory paragraph.
Add an image that represents your website.
Then, begin creating a second section with additional information.
As you work, experiment with your font choices, text sizes, and spacing.
Your challenge is to make your Home page look like it belongs to your brand, not someone else's website.
Before class ends, show your tutor what you have created and explain one design decision you made.
Homework: Bring Your Home Page to Life
Continue working on your Home page in Divi 5.
Your assignment is to add the following:
-
At least one heading and one paragraph of original text.
-
Two images that relate to your website.
-
Font sizes and spacing that make your content easy to read.
If you are using a premade layout, replace the example text and at least two example images with your own content.
If you are designing from scratch, add your content using Text and Image Modules.
Make sure you save your changes!
Be prepared to show your Home page to the class and explain why you chose your images and design style.
Scripture Connection: Give Your Best Effort
Colossians 3:23 reminds us to do our work wholeheartedly.
That includes the work we do in this class!
Whether you choose to build your website from scratch or customize a premade layout, your goal should be to give your best effort.
Do not rush through your design just to finish quickly.
Take time to choose meaningful words, find appropriate images, and arrange your content thoughtfully.
You might make mistakes. Your first design might not look exactly how you imagined.
That is part of learning!
Professional designers experiment, make changes, and improve their work over time.
Remember, you are not just learning how to use Divi 5. You are learning how to communicate ideas, solve problems, and create something meaningful.
Your goal this week: Create a Home page that communicates your message clearly and reflects the effort you put into it!
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.