This is Part 5 of the Divi 5 Mastery Course. With your Design Variables and presets already in place, you now have a working design system: every color, font size, spacing value, border, and button style is either a reusable preset or a Design Variable reference.
In this part, you will use that library to build the homepage of a coworking space website.
The homepage has seven sections, from the opening hero to the closing FAQ, and because the design work is done, most of the build is assembly rather than styling.
The build approach
Every section on this homepage follows the same four-step process:
Drop the modules into the correct columns. Focus on structure before styling.
Apply the presets. This is where the work from Parts 3 and 4 pays off. A Heading Element Preset can control font family, size, line height, and color in one click; a Button preset can control padding, border radius, colors, and size.
Handle the remaining static content - text, images, video sources, countdown dates, accordion items, and icon choices. These are content decisions, not design decisions.
Create the Homepage
From your WordPress Dashboard, go to Pages → Add Page.
Give your page a title, such as Home.
Click the Use Divi Builder button.
Note: You will build the global Header and Footer with the Theme Builder in Parts 6 and 7.
Hero section
The Hero section tells visitors what the coworking space offers in the first few inches of scroll. It uses three rows: a headline with primary calls to action, a full-width hero image, and a three-column statement row.
Inside the Group, add two Button modules.
Open the Group's Design tab, and in the Layout group, set Flex Direction to Row and Horizontal Gap to 10px so the buttons sit side by side.
Add a second Row with another Flex Equal Columns one-column structure, and drop an Image module inside for the hero visual.
Add a third Row with a Flex Equal Columns three-column structure. In each column, add one Heading module and one Text module.
Now apply the presets:
The first-row Heading gets the Heading 1 Big Element Preset.
The first Button gets Filled - Primary Color; the second gets Filled - Black.
The Image gets the Rounded Element Preset.
In the third Row, apply the Top Border Option Group Preset to the Border group of each column, then set 30px top padding on each column. Apply Heading 4 to each of the three Headings and Dark Text to each of the three Text modules.
Edit the first heading module and in the Content tab → Text → Heading paste Coworking in San Francisco text.
Edit the first Button module and set the text to Book Tour.
Edit the second Button module and set the text to View Plans.
In each of the three columns, change the Heading's module text to Flexible Spaces, Exceptional Amenities, and Vibrant Community.
Pair each heading with a short supporting paragraph.
Features grid section
The Features Grid showcases six amenities in an evenly spaced layout. It uses CSS Grid so the columns stay consistent across desktop, tablet, and mobile.
Add a new Section with a Flex Equal Columns one-column structure. In the Section's Design tab, open the Background group and set the Background Color using the Background - Light Gray variable. In the Section's first Row, insert a Video module.
Add a second Row with a Flex Equal Columns layout. Inside the single column, add an Icon module, a Heading module, and a Text module, in that order.
Open the new Row's setting and from the Content tab, go to Elements, and click Apply Structure Template.
On Desktop, change the row to a three-column grid.
On the Tablet breakpoint, set it to a two-column grid.
On the Mobile breakpoint, set it to a one-column grid.
Return to the Desktop breakpoint, find the first column, and duplicate it five times so the grid contains six feature items.
Set the following presets:
The Video module gets Rounded.
Each Icon gets Dark - Small - Contained.
Apply Heading 5 to each feature title and Dark Text to each description.
Give each grid column a Vertical Gap of 12px to keep the icon, heading, and text grouped.
Add the Video source and overlay image.
Set the following text for each feature:
Gigabit Wi-Fi, 24/7 Access,
Meeting Rooms,
Private Phone Booths,
Bottomless Coffee,
Mailing Address.
Assign a distinct icon to each from the Icon Library and write a one- to two-sentence description.
Split features section
The Split Features section pairs a tall image on the left with three content blocks on the right within a single row.
Add a new Section with a Flex Equal Columns two-column structure.
In the left column, add an Image module.
In the right column, add a Group module containing
A Heading module and a
Text module.
Duplicate the Group once,
Add a Button module at the bottom of the duplicate,
Duplicate that second Group once more.
For each of the three Groups, open their settings and go to the Design tab → Layout
Set Flex Direction to Column with a 10px row gap.
To speed this up, style one Group, then use Extend Attributes to apply the same layout to the others.
Apply the presets:
The Image gets Rounded.
The first Group's Heading uses Heading 2, and its Text uses Dark Text.
The second and third Groups use Heading 5 for their Headings and Dark Text for their Text modules.
Both Buttons use Text - Primary Color so they appear as inline links rather than solid CTAs.
Add content:
The lead heading is Thrive in a better work environment.
The two supporting blocks cover Ergonomic Comfort and Inspiring Atmosphere, each with a Learn More Button.
Testimonials section
The Testimonials section presents three customer quotes in a three-card layout with a heading above.
Add a new Section with a Flex Equal Columns one-column structure, and place a Heading module in its first Row.
Add a second Row with a Grid Multi-Column structure and three equal columns. In each column, add an Icon module, a Text module, and a Blurb module.
Apply the following presets:
The section title Heading uses Heading 2.
In the second Row's Design tab → Layout group, set Horizontal Gap to 30px.
Each of the three columns gets Outlined - Dark.
Inside each column, the Icon gets Dark - Small, the Text gets Dark Text, and the Blurb stacks two Element Presets: Dark Text and Dense. Give the Blurb image a Border Radius of 8px (or use your rounded image preset from Part 4).
Style the first column, then use Extend Attributes to apply those styles to matching elements within the Parent Row.
Add content:
The section heading reads Testimonials.
Each card gets a quotation-mark icon, a quote in the Text module, and an author photo, name, and role in the Blurb.
The three testimonials are from:
Lisa Robinson, CEO of Brightwave Media.
Albert Flores, Marketing Agency Owner.
Cody Fisher, Founder of Sprout Lab.
Pricing section
The Pricing section is the most structurally complex part of the page. Each price card uses a Group-based layout with nested Groups, an Icon List, and a footer Group, so the middle tier can stand out through contrast.
Add a new Section with a Flex Equal Columns one-column structure, and place a Heading module in its first Row for the section title.
Add a second Row with a Grid Multi-Column structure and three equal columns. Build only the first column for now. Inside it:
Add a Group module,
Another Group module inside that with the following modules
A Heading and
A Text module.
Add an Icon List module as a sibling of the inner Group.
Add another Group as a sibling of the first.
Inside this footer Group:
Add a Heading module and
A Button module.
Delete the two extra columns for now.
On the remaining column, apply the Outlined - Dark Border Option Group Preset. Switch to the Tablet breakpoint, and set t the Rows to a one-column layout,
Return to the Desktop breakpoint.
For clarity, the three Groups are the Header Group, Inner Group, and Footer Group (use the Layers View panel to confirm which you are editing).Each card's Header Group uses Contained - Light (outer cards) or Contained - Dark (middle card).
The first Inner Group gets a Vertical Gap of 10px.
Each Footer Group uses the Padding - Medium Option Group Preset.
Each tier Heading uses Heading 3; each description Text uses Dark Text on light cards and Light Text on the dark middle card; each price Heading uses Heading 5.
Each Button uses Filled - Primary Color on the outer cards and Filled - Black on the middle card.
The Icon List uses Dark on light cards and Light Text on the dark middle card.
Duplicate the first column twice.
Adjust the middle column to its light text presets and set the card background to Black.
Switch to the Tablet breakpoint, and in the second Row's Content → Elements group, set the Layout Structure to 1 column with a Horizontal Gap of 30px.
Set the content. The three tiers are
Hot Desk at $299/month,
Dedicated Desk at $449/month, and
Private Office at $999+/month.
Each gets a short description, included benefits in the Icon List, and a Button module.
Change the Icon List icons to right-pointing arrows.
Countdown section
The Countdown section creates urgency with a promotional CTA in a single row with a bright background.
Add a new Section with a Flex Equal Columns one-column structure.
For the first Row, apply the Contained - Dark Row Element Preset.
Inside the column, add:
A Heading module,
A Countdown Timer module, and
A Button module.
Apply the following presets:
Heading 2 and Center Aligned for the Heading module, with text color set to White.
Light Text for the Countdown Timer module.
Filled - White for the Button module.
Remove the Heading Text from the Countdown Timer so the CTA headline stays the main title.
Set the content.
The heading's text is Founder's Rates Ending Soon!
The Countdown Timer's target date matches your promotional window, and
The Button text is Lock In Low Rates.
FAQ section
The FAQ section uses an offset two-column layout: a short intro block on the left and a collapsible question list on the right.
Add a new Section with a Flex Offset Columns structure and two columns. A 2/5 + 3/5 pattern works well, giving the heading a narrow anchor and the FAQ list more room.
In the left column, add
A Heading module and
A Text module.
In the right column, add an Accordion module.
Apply the following presets:
Heading 2 for the Heading.
Dark Text for the Text module.
Dark Text for the Accordion module.
Add content.
Heading text: Frequently asked questions
For the Text module, add a short intro paragraph.
Add five Accordion items covering topics like
Opening hours,
Guests, parking,
Business address use, and
Meeting room bookings.
Reviewing the homepage
With all seven sections in place, the homepage is complete: a headline and hero image, a feature grid, a split-feature row, testimonials, pricing, a promotional countdown, and an FAQ.
The key point is how it was built. Every module references Design Variables and presets rather than hardcoded hex values, one-off font sizes, or ad hoc padding. That makes the page easy to revise, extend, and keep consistent.
Read the full tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 5: Building A Divi 5 Homepage From Scratch.
Previous Course | Next Course |
Building A Custom Header And Navigation In Divi 5 → |