How to Create Your First Page with Divi 5

Build Your First Page with Divi 5

On the previous page, you explored the Divi 5 interface and learned the foundations of how it works. Now it is time to put them into practice.

Throughout this guide, you will build a practice homepage using the Divi 5 visual builder. You will learn to combine sections, rows and modules to create a complete, modern and fully customisable page. As you progress, you will see that the same workflow repeats constantly: once you understand the method, you can apply it to almost any type of web page.

At Scale & Own, we do not expect you to memorise every option or setting. What matters is understanding the building logic so that you can later design your own projects independently.

If you wish, you can review the complete journey for building your website with WordPress and revisit every stage of the process.

Design system

Global variables

One identity, applied across the entire website

Layout

Flexbox + Grid

Styles

Presets

Before You Begin

Before opening the visual builder, it helps to be clear about what we are going to build and how the page will be organised.

The Homepage Model We Are Going to Build

For this exercise, we have chosen a homepage inspired by a template from the official Divi library. We will use it only as a visual reference: we will not import or use it directly. Instead, we will build each section from scratch, step by step, so that you learn to operate the visual builder yourself.

The homepage is one of the best exercises for getting started because it brings together most of the sections and modules you will find on any website.

The page we are going to build will be divided into six main blocks:

• Main hero
• About Us
• Services
• Process
• Testimonials
• Call to action (CTA)

We will build each section in this order, starting with the hero.

Where to Find Inspiration for Your Designs

One of the best ways to improve as a designer is to analyse existing websites. Observe how they organise their sections and use colours, typography and images, then adapt those ideas to your own projects.

If you are looking for inspiration, the official Divi layout library is an excellent starting point. You will find hundreds of examples organised by industry and website type, including the design that will inspire the homepage we are about to build.

Although Divi lets you import any of these designs with a single click, we recommend learning to build a page from scratch first.

Prepare the Page’s Initial Structure

Before we start designing, we are going to prepare the foundation of our homepage.

Create the Page and Open Divi Builder

From your WordPress dashboard:

• Go to Pages → Add Page.
• Name it Home.
• Click Use Divi Builder.
• The visual builder will open automatically.

This will be your main workspace throughout the page-building process.

If you need to, you can return to the page where we explain how the Divi 5 visual builder works.

How to Configure Variables in Divi 5

As we saw on the previous page, global variables are reusable values, such as colours, typefaces or sizes, that you can apply throughout your website. Configuring them from the beginning will save you time and help you maintain a consistent design.

Inside the visual builder, go to the left-hand sidebar.

• Click the Global Variables icon.
• The panel where Divi organises all the available variable types will open.

We are going to configure the three most commonly used global variables: colour, font and number.

Colour Variable

• In the Global Variables panel, click the Colours group.
• Select the Primary Color variable.
• Choose the purple shade you want to use. For this exercise, we will use #5044AA.
• Repeat the process with the other colours we are going to define.
• Click Save Variables.

Font Variable

Here, you will define your website’s main typefaces so that you can reuse them throughout the project.

• Click the Fonts group.
• Select a predefined font variable, such as Heading or Body, and add other variables if you need them.
• For this exercise, we will select Montserrat for the body text (Body) and Work Sans for headings (Heading).
• Click Save Variables.

As you can see, Divi gives you countless typeface options. You can apply the same logic to your future websites, adapting the font combination to each project’s identity.

Number Variable

Here, you will define reusable values for sizes, margins, spacing and other parts of your design.

This is one of the areas with the most options. For that reason, at Scale & Own we recommend using the Variable Generator directly instead of creating each value manually.

• Click the Numbers group.
• Click Variable Generator.
• Select the type of variable you want to create.
• Click Add Variables to my site, then Save Variables.

The Variable Generator uses clamp(), a function that automatically creates responsive sizes. This allows text and spacing to adjust to each device without requiring you to create one version for desktop, another for tablet and another for mobile.

When you open it, you can choose the type of variable you want to generate:

• Font Size: text sizes (headings, paragraphs, labels and so on).
• Spacing / Gap: spacing between elements.
• Radius: border rounding.
• Border Width: border thickness.
• Width: element widths.
• Clamp (Generic) / Size (Generic): generic values for any other use you may need.

For this exercise, the exact values are not the most important part. You can use the values generated automatically by the Variable Generator or define your own. What matters is understanding how global variables work, because you will later be able to adapt them easily to the visual identity of each project.

The Variable Generator is the fastest way to create a consistent sizing system for your entire website.

Create and Name the Sections

With the variables configured, it is time to prepare the page structure.

Before we start designing, we will create the six main sections of the homepage and give each one a name. Even though they are still empty, this will help you organise the page and find each section quickly as the design grows.

How Do You Create and Name the Sections?

You have two options for creating the page’s six sections:

Option 1 (Recommended): Duplicate an Empty Section

Once you have created the first section, you can duplicate it as many times as necessary. This is the fastest way to prepare the page structure.

Option 2: Create Each Section Manually

Click the blue + button to add a new section. Divi will ask you to select a column structure. Choose any option, such as the first one. If a row is added automatically, delete it. We only need to create the empty section.

Name Your Section

• Select the section and open its settings panel.
• In the Content tab, expand Meta.
• In the Element Label field, enter a descriptive name: Main Hero, About Us, Services, Process, Testimonials and Call to Action (CTA).
• Repeat the process until you have created and named all six sections of the page.

Build the Homepage

We will start with the hero, the first visible section on the page and one of the most important.

This will be the most detailed part of the guide because it is where you will learn the foundations of working in Divi 5: creating a section, adding rows and modules, editing content and customising the design.

After that, we will move more quickly through the following sections and stop only for new modules or important settings.

📸 Visual reference for each section

Throughout this guide, you will find images showing how each section should look once you have finished building it. Use them as a visual reference to check that your design is heading in the right direction. They do not need to be identical in colour or content. What matters is understanding the structure and purpose of each section.

Main Hero

The first impression. Explain who you are, what you do and what the visitor should do.

Configure the Section Background

• Click the section to select it.
• In the settings panel on the right, make sure you are in the Content tab.
• Find and click Background. This option lets you assign a background to any element on the page, whether it is a section, row or module. You can use a solid colour, a gradient or a background image.

Assign a Background Colour with Global Variables

Inside Background, find the Background Color field.

• Click the Insert Dynamic Content icon.
• Select one of the global colours you configured earlier.

Insert and Adjust the Background Image

• In the Background options, click the image tab, represented by a photograph icon.
• Click the image selection area. The Media Library will open.

👉 Download the project image pack and import it into WordPress to follow the guide using the same resources as us.

How to Upload Images to Your Library

• Download the image pack.
• Unzip it on your computer.
• In WordPress, go to Media → Add Media File.
• Drag in all the images or click Select Files.
• Wait for the upload to finish.

Once the images have been imported, you can use them throughout the exercise. When you finish, remember to delete any you no longer need so that your Media Library stays organised.

• Select image 1 from the files you have just imported. We will use it as the background.
• Adjust its position and size so that it fits correctly inside the section:
• Under Background Image Size, choose Custom Size. This lets you assign a specific size to the image.
• Under Image Height, enter 30%.
• Under Background Image Position, select Top Right.

I made a short video to help you find your way around:

Insert Rows and Modules

• Click the green + button in the centre of the section. The Insert Row panel will open.
• In the New Row tab, select the first option: a full-width column, meaning one column that occupies the entire width. This is the row where we will add the content modules.

Inside the row you have just created:

• A black + button will appear. Click it to open the Insert Module Or Row panel.
• In the New Module tab, find and select the Heading module. This module will let you add the main heading to the hero.

Edit Each Module

We are now going to customise each module. You have two options:

• Click directly inside the module, or
• Click the gear icon (⚙) on the module you want to configure.

The settings panel will open with three main tabs:

• Content: where you write and edit the module’s text, links and information.
• Design: where you adjust its visual appearance, typography, colours, spacing, borders, shadows and so on.
• Advanced: where you can add custom CSS classes, attributes, conditional visibility and animations.

Edit the Heading Module

• Click the Heading module to select it. The settings panel will open on the right.
• In the Content tab, enter the heading you want to display in the hero under Text. In our example: DIGITAL CONSULTING.
• Switch to the Design tab and open Heading Text. Here, you can adjust the typography, font size, text colour, letter spacing, alignment and other visual options using the global variables you have already created.

Edit the Button Module

• Click the Button module to select it. In our example, the button says: REQUEST A FREE CONSULTATION.
• In the Content tab, enter the button text.
• In the Design tab, expand Button by clicking the arrow. There, you will find all the options for customising the button: Background, Border, Text, Icon, Sizing and Spacing. Below them, you will also see Box Shadow, Filters and Transform.

Explore each option to adjust the colours, borders, size, shadows and effects according to the design you want.

Insert a Two-Column Row

• Click the green + button below the first row to insert a new row.
• Select the option with two equal columns.

Edit the Row’s Columns

• Click the row to select it → Content tab → Elements. You will see both columns there.
• Click the pencil icon on the first column to open its panel.
• Under Content → Background, assign the background colour from your global variables.
• Under Design, set Border to 20px, set the Spacing padding to 20, then choose one of the predefined styles under Box Shadow.
• Return to the row → Elements, copy the style from the column you have already edited and paste it into the second column. This avoids repeating steps 2 to 4.
• In column 2, change only the background colour under Content → Background to distinguish it visually.

Add Modules Inside the Columns

• In the first column, click the black + button and insert an Image module.
• Beneath the Image module, click + again and insert a Text module.
• Repeat the process in the second column according to the content you need to add.

Customise the Image and Text Modules

• Click the Image module and open its settings panel. Select image 2 from the Media Library.
• In the Design tab, find Border and assign a border radius of 200px. This gives the image a rounded shape that breaks up the rectangular edges.
• In the same Design tab, find Filters and select Overlay under Blend. This setting blends the image with the background colour for a more uniform result and makes the text easier to read.
• Click the Text module. Write the corresponding content and style it in the Design tab.
• Repeat the same steps in the second column.

The main hero is now complete. You now know the basic Divi 5 workflow: create a section, add rows, columns and modules, edit their content and customise the design. From this point on, we will move more quickly through the remaining sections.

About Us

Build trust and present your value proposition.

For this second section, we are working with several rows and different column structures to organise the content more effectively.

Here, you can start to see how a single section can combine different types of composition, including headings, text, statistics, images and visual blocks, within one organised structure.

The Importance of Organising and Naming Elements

As a page grows, maintaining an organised structure inside Divi becomes increasingly important. Naming sections, rows, columns and modules correctly will therefore help you identify each element quickly and work in a much more orderly way.

In the following screenshot, you can see this same section in Divi 5’s Wireframe view, meaning the structural layout without the design. This view makes it much easier to see the page’s complete structure, especially once you start working with many rows and different modules.

What Is New in This Section: the Circle Counter Module

This module lets you present statistics or percentages in a visual and much more engaging way.

How to Configure the Circle Counter Module

• Insert the Circle Counter module in the first column.
• In the Content tab, add the percentage, title and description.
• In the Design tab, customise the circle colours, thickness, typography, size, spacing and animations.

Main Services

Show what you offer clearly and in an organised way.

The logic for building this section is exactly the same as in the previous sections: sections, rows, columns and modules.

We will now focus on an important new feature for working faster and more professionally in Divi 5: Presets.

What Is a Preset?

A Preset lets you save a set of styles and reuse it on other elements without configuring every setting manually. It is a way to work faster while maintaining a consistent design throughout your website.

Element vs. Group

Divi 5 organises presets into two categories:

Element

The style is saved for one specific type of module. For example, a Preset created for a Button module can only be applied to other Button modules. It cannot be used for a Heading, Text or any other type of module.

Group

The style is saved for a group of properties shared by different modules. For example, a Preset created for Group → Text can be applied to any module that includes text, such as a Heading, Text, the title of a Blurb or the content of other compatible modules.

Two Ways to Create a Preset

Both routes lead to the same result, the preset creation panel. Only the starting point changes.

Method 1: From the General Presets Manager

• Go to Divi’s left-hand sidebar.
• Click Presets.
• In the manager, open the Element or Group tab according to the type of preset you want to create.
• Find the category you want to configure. In this case, it is Text under the Group tab.
• Click Add New Preset.

Method 2: Directly from the Module You Are Editing

• Select the module you want to edit. In this case, it is the Text module.
• Go to the Design tab.
• Find the option or group of settings where you want to create the preset, such as Text.
• Click the option for assigning a Preset.
• Select Add New Preset. The preset editing panel will open.

Both methods serve the same purpose: saving a reusable style so that you can later apply it to other elements without repeating every setting manually. Use whichever is faster in each situation: the general manager if you want to organise several presets at once, or the direct route if you are already editing a particular module.

Create a Group Preset for Text on Dark Backgrounds

In this example, we will create a group preset for text placed on dark backgrounds. Whenever you use it, the text will automatically adopt the styles defined here:

• Give the preset a name under Preset Name, such as Text 2.
• Configure the visual settings needed to keep the text readable on a dark background: Text Font, Text Font Weight, Text Font Style and the other design options, including a light text colour.
• Save the changes. The preset is now available to apply to any text module on the website.

Apply the Preset

Once the preset has been created, you can apply it to any text module without repeating the configuration:

• Select the text module where you want to apply the style.
• Go to the Design tab.
• In the corresponding section, select the preset you have just created.
• The text will automatically adopt all the styles saved in the preset.

The important thing is to start creating presets for styles that recur frequently. For example:

• text on dark backgrounds,
• headings,
• primary buttons,
• service cards,
• images with rounded corners.

This will help you work faster and maintain a more consistent design throughout your website.

With the Presets configured, you can finish building the Main Services section with a reusable style system that is ready to apply to the rest of the page without repeating the work each time you need a similar style.

Work Process

Explain how you work step by step so the visitor knows what to expect.

In this section, we are going to build an Element Preset for the Blurb module. The Blurb is one of Divi’s most versatile modules: it combines an image or icon, a title and descriptive text in a single block.

Within that preset, we will apply the Hover option to the images. When the visitor moves the pointer over an image without clicking, its appearance will change, for example with a zoom, a colour change or a shadow.

Step 1: Insert the Four-Column Row

• Insert a row with four equal columns.
• Assign the colour #E9EBF0, the Blurb background, using your global variables.
• Adjust the row’s internal spacing under Spacing and the column borders.
• Copy the style to the other columns through Elements.

Step 2: Insert the Module and Create the Element Preset

• In the first column, insert the Blurb module.
• In the settings tab, click the option for assigning a Preset.
• Click the blue Add New Preset option.
• A black-background editor will open. Name the preset Blurb 2.

Step 3: Configure the Preset’s Content and Design

• Under Design → Image → Sizing, set the size to 50% and centre the image.
• Under Title Text, assign the font size, colour and weight using your global styles.
• Under Body Text, adjust the font size and colour using the global styles you have already created.
• Under Spacing, set the left padding to 10px.

Everything you configure here is automatically saved in the Blurb 2 preset, ready to be applied to the other modules without repeating these settings.

Step 4: Apply the Preset to the Remaining Columns

• In the next column, insert a new Blurb module.
• Under Content, add the title, description and icon for that stage: Strategy, Implementation or Results.
• In the option for assigning a Preset, select Blurb 2.

The module will automatically adopt the entire saved design: image size, typography, colours and spacing.

Repeat this process in the remaining columns.

Step 5: Add the “Step #” Label Above Each Card

We are going to insert a small Text module above each Blurb, with the label Step 1, Step 2 and so on:

• Insert a Text module above the first Blurb module in the same column.
• Enter Step 1 and adjust its style, such as its size and colour, under Design.
• To reproduce it in the other columns, right-click the text module you have created → Copy → Copy Module.
• Right-click the destination position above the next Blurb → Paste Module → Paste Module Above.
• Edit the content of each copy: Step 2, Step 3, Step 4.

Step 6: Apply the Hover Effect

• Select the Blurb module.
• In the Content tab, go to Image & Icon.
• Next to the Image field, click the Edit Responsive Values icon.
• The Responsive Editor panel will open, where you will see the Image field repeated for the different screen versions: desktop, tablet and mobile.
• In the same panel, find the option marked with a mouse-pointer icon, which represents the Hover state.
• Click that option and assign a different image from the one used in the normal state, such as another geometric shape.
• Close the editor. The image will now change automatically when the user moves the pointer over it.

Testimonials

Validate your work through other clients’ experiences.

This type of content acts as social proof and helps build trust among new visitors who do not yet know your brand or service.

For this section, we are going to work with the Slider module. We will use a row with two equal columns: in the left column, we will insert a heading and an image, just as you already know how to do. In the right column, we will place an image and then insert the Slider beneath it, where it will contain your clients’ comments.

Step 1: Prepare the Section and Row

• Assign the dark background colour #000000 to the section.
• Insert a row with two equal columns.
• In the left column, add headings and an image.
• In the right column, add an image and then insert the Slider module beneath it.

Step 2: Configure the First Slide

When you insert the module, the settings panel will display two preset slide options under Elements.

• Click the edit option for the first slide.
• Under Content, write the client’s comment in the main text field.
• Delete the Title and Button. They are not needed for this testimonial format, which only requires the comment text.

Step 3: Add the Remaining Slides

Leave the editing panel and, under Elements, click Add Slide as many times as necessary until you have the number of comments you want to display. Repeat Step 2 for each one: write the comment, then delete the title and button.

Step 4: Assign the Background Colour for Each Testimonial

• Inside each slide, go to Content → Background → Background Color.
• Assign the colour #484545.

Step 5: Configure Each Slide’s Overlay

The Overlay adds a layer of colour over the slide without changing its actual background:

• Background Overlay: colours the slide’s entire background.
• Text Overlay: creates a coloured “card” only behind the text, with rounded corners. It is the dark rectangle surrounding the client’s quotation in the screenshot.
• Switch to the slide’s Design tab and expand Overlay.
• Enable Use Background Overlay and assign the colour #343737.
• Enable Use Text Overlay.
• Under Text Overlay Border Radius, assign a value of 15px to all four corners, using the link icon to apply it to all of them at once. This value is only a suggestion, so adapt it to the style you prefer.

This module is a good candidate for applying what you learned about Presets in the previous sections. If you save this design as a preset, each new slide you add will automatically adopt the same style, and you will only need to change the comment text.

The Testimonials section is now complete: a carousel of comments with a consistent design that reinforces visitor trust through the real experiences of your clients.

Call to Action

Finish with a clear invitation that encourages the visitor to take the next step.

The call to action, also known as a CTA, is a fundamental part of any website. Its purpose is to invite the visitor to perform a specific action.

This section has the same structure as the hero you have already built: one row with Heading, Text and Button. We will not repeat those steps because you already know how to create a button and edit its content and design. Here, we will focus only on something new: how to link it to another page on your website.

Configure the Button Link

Most Divi modules include a Link option. This means that buttons are not the only elements that can direct visitors to other pages: images, text, Blurbs, slides and many other modules can do so as well. In this case, we will work with the main button.

How to Add a Link

• Select the Button module.
• Go to the Content tab.
• Find the Link option.
• Paste the URL of the page where you want to send the visitor.

What Should You Do After Creating the Rest of the Pages?

When your website is still under construction, buttons often do not yet have a defined destination page. That is why you would normally:

• build the homepage first,
• then create the website’s other pages,
• and finally copy the corresponding URLs into each button or linked module.

This works in almost exactly the same way for every module that includes the Link option.

The Call to Action section is now complete. Your homepage is finished, with all six sections connected and ready to guide the visitor towards the action that matters most to you.

Exercise Complete!

You have finished building your first homepage with Divi 5. You now know the builder’s basic workflow and can apply the same method to create any type of web page.

Publish the Page and Set It as the Main Homepage

The final step is to publish your page and configure it as the main page of your WordPress website. This way, when someone visits your domain, this homepage will automatically be the first page they see.

• Go to Pages and check that your Home page is published.
• Then go to Settings → Reading.
• Under Your homepage displays, select A static page.
• Under Homepage, choose the Home page.
• Click Save Changes.

Then open your website in a new tab to check that the homepage appears correctly.

This step is important because WordPress usually displays the latest blog posts by default. By selecting a static page, you tell it that the homepage you designed in Divi should be the first page visible on the website.

The Most Important Point from This Exercise

Before continuing, remember that we deliberately left you some freedom during this exercise so that you could explore the builder on your own. Do not worry if you felt lost at any point or even experienced some information overload. It is completely normal.

The goal was not to memorise every tool or setting, but to understand the Divi 5 workflow and start becoming familiar with its interface. With every new page, you will gain confidence, work more comfortably and find that the whole process becomes increasingly intuitive.

Next Step

Your homepage is now published, but your website is not yet complete. Although visitors can already access it, two essential elements are still missing: the Header and Footer, which will allow them to navigate easily through the rest of the website.

In the next stage, you will learn to create these two global elements:

• Header: the top bar that includes your logo and navigation menu. It will appear on every page of your website.
• Footer: the bottom part of the website, where important links, contact information, social media and other useful content are normally included.

With these two elements, your project will stop being an independent page and become a complete website with clear, consistent and professional navigation.