Once your homepage, global header, and footer, and Theme Builder templates are in place, the inner pages of your site come together quickly.

This part of the Divi 5 Mastery Course walks through building two core inner pages for a coworking space website - a Contact page and an Events page - by reusing the design system you have already built.

Because the header and footer load globally from the Theme Builder and your presets and Design Variables already control color, typography, spacing, and borders, this stage is mostly structural assembly. You will add a few new presets where needed and lean on workflow tools like the Page Manager, the Command Center, and Extend Attributes to move faster.

Building the Contact page

Go to your WordPress Dashboard → Pages → Add Page.
Name the new page Contact.
Click the Publish button - top right side.
Click the Use Divi Builder button.
Choose Build From Scratch when prompted.

The page uses two sections.

The first section holds three rows:
- a page heading,
- a two-column split with the form on the left and stacked detail blocks on the right, and
- a full-width map below.
The second section holds a heading and an accordion for FAQs.

Build the Contact Page Structure

Click the Green button to add a new Row and choose the first option under the Equal Columns section from the Insert Row modal. This will add a Row with one column.
Add the Heading module.
Add a second Row using an Offset Columns structure with two Columns. Choose the fifth option.
In the left Column, add a Contact Form module.
In the right Column, add a Group module containing
- A Heading module
- A Text module,
Duplicate the Group twice so you have three contact detail blocks.
For each Group module, in the Desing tab → Layout → Vertical Gap, apply the Spacing - XSmall variable.
Add a third Row to the first Section using a single-column layout
Add the Map module inside it.

⚠️ Important Note: The Map module requires adding a valid Google Map API. To learn more about how to create a Google Map API, please check the Google Official Documentation.
Add a second Section below the first with a single-column Flex Row.
Add the following modules:
- The Heading module
- Accordion module.

Apply the Contact Page Presets

Edit the Heading module from the first Row and apply the Heading 1 element preset.
For each Heading module in the second row, second column, apply the Subheading element preset.
For each Text module in the second row, second column, apply the Small Text element preset.
For the Contact Form module, apply the Dark element preset.
For the Map module, apply the Black and White element preset.

This preset sets the Filters Saturate value to 0%, turns Mouse Wheel Zoom off, and adds rounded corners.
For the Heading module inside the FAQ section (above the accordion module), apply the Heading 2 element preset.
For the Accordion module, stack two element presets: Dark Text and Contained.

The Dark Text element preset controls the text color, divider style, and toggle icon. The Contained element preset adds the rounded corners and light gray background for each Accordion item.

Contact Page Content

For the first Heading module, change the placeholder text to something like Get in touch, or Book a Tour & Say Hello.
For each of the three right-column groups, add one piece of contact information:
- Phone.
- Email.
- Address.
For the Heading module above the Accordion module, set the text to something like FAQ or Frequently asked questions.
For each Accordion Item, set the title to be a question, and the answer as Body text.

Note: You can download the complete Contact page layout from the Downloads section.

Building the Events page

The Events page is more involved. It has three sections:

A featured event banner with a countdown,
A list of upcoming events,
A subscribe section with an email signup.

Most of the work is structural - once the modules and columns are in place, the styling comes from the presets and variables you already created.

Create the WordPress Page

Go to your WordPress Dashboard → Pages → Add Page.
Name the new page Events.
Click the Publish button - top right side.
Click the Use Divi Builder button.
Choose Build From Scratch when prompted.

Pro tip: If you are already on an existing page, where the Visual Builder is already open, you can use the Page Manager to create the new page right from the Visual Builder.

Build the Feature Event Section

Featured Event Section's Strucutre

Click the Green button to add a new Row inside the existing section and choose the first option under the Equal Columns section from the Insert Row modal. This will add a Row with one column.
- Add the Heading module. This will be your page title.
Add a second Row with two equal Columns.
- In the left Column, add:
  - Three Heading modules,
  - One Text module,
  - One Countdown Timer module, in that order.
  💡Pro Tip: You can add these manually or use the Command Center to add elements faster with the keyboard.
- In the right Column, add:
  - A Group module containing:
    A Heading module,
    A Text module.
  - A Text module,
  - A Button module.

Featured Event Section's Preset

For the Heading module inside the first row, apply the Heading 1 element preset.
For the second Row, apply the Contained – Dark element preset.
Inside the second Row → Left Column:
- For the First Heading module, apply the Subheading and Light element presets. Also, set the Heading Level to H2.
- For the Second Heading module, apply the Heading 2 and Light element presets. Also, set the Heading Level to H3.
- For the Third Heading module, apply the Heading 5 and Light element presets. Also, set the Heading Level to H3.
- For the Text module, apply the Light Text and Small Text element presets.
- For the Countdown Timer module, apply the Light Text - Dense element preset.
Inside the second Row → Right Column:
- Group Module:
  - For the Heading module, apply the Heading 3 and Light element preset.
  - For the Text module, apply the Light Text element preset.
- For the Text module (after the Group module), apply the Light Text and Small Text element presets.
- For the Button module, apply the Filled - Primary Color element preset.

Featured Event Secetion's Content

For the first Heading module, use Community Events.
Inside the second Row → Left Column:
- First Heading module, use Featured Event
- Second Heading module, use Startup Pitch Night & Mixer
- Third Heading module, use August 24 - 25
- In the Text module, add a descriptive text for the event.
- For the Countdown Timer module, target the date to the event start date and remove the module’s heading text
Inside the second Row → Right Column:
- Group Module:
  - Heading module, reads $25
  - Text module reads /person.
  - Button module reads Reserve your spot.

Refine the Featured Event Layout

In the second Row
- Set the left Column's Column Class to 3/5, and for the Vertical Gap, apply the Spacing - Small variable.
- Set the right Column's Column Class to 2/5.
Set the left Column's internal Vertical Gap to 20px to tighten the stacked event details.
Inside the right Column's:
- For the Group module, set Flex Direction to Row and Align Items to Flex End.
- For the Horizontal Gap, apply the Spacing - XSmall variable. This keeps the price and qualifier - such as $25 and /person - on the same baseline.

Build the Upcoming Events List Section

This section is a stack of event rows that share one structure:

A date block on the left,
The event's name and description in the middle,
The price and a Button on the right.

Upcoming Events List Section's Strucutre

Add a new Section. For the first Row, use an Equal Columns Flex layout with a Heading module inside.
Add a second Row using a Three Equal Columns Flex structure:
- In the left Column, add:
  - A Heading module
  - A Text module for the date block.
- In the middle Column, add
  - A Heading module,
  - A Blurb module, and
  - A Text module.
- In the right Column, add:
  - Group module containing:
    A Heading module
    A Text module,
  - A Button module below the Group.

Upcoming Events List Section's Presets

For the Heading module inside the first row, apply the Heading 2 element preset.
For the Left column in the second row
- Apply the Contained - Light element preset.
- For the Background option group, apply the Background - Light Gray option group preset.
For the Heading module inside the middle column, apply the Heading 3 element preset.
For the Blurb module inside the middle column, apply the Dense element preset.
For the Text module inside the middle column, apply the Dark Text element preset.
For the Heading module in the Group module, inside the right column, apply the Heading 3 element preset.
For the Text module in the Group module, inside the right column, apply the Dark Text element preset.
For the Button module in the middle column, apply the Filled - Primary Color element preset.

Upcoming Events List Section's Content

First Row:
1. Heading module's content: Events.
Second Row:
- Left Column
  - Heading module's content: 17.
  - Text module's content: Sep.
- Middle Column:
  - Heading module: Dominate local search: SEO strategies for small businesses.
  - Blurb Module:
    Icon: Choose a "location" icon.
    Title: Main Boardroom, San Francisco, CA.
    Delete the Blurb's default body text.
  - Text module's Body: Learn actionable strategies to put your business on the map. We'll cover Google Business Profile optimization, local citations, and driving high-converting organic traffic to your services.
- Right Column:
  - Heading module's content: $59.
  - Text module's Body text: /person.
  - Button module's content: RSVP.

Refine the Upcoming Events List Section

For the second Row:
- In the Desing tab → Sizing → Padding → Padding Bottom, apply the Spacing - Medium variable.
- In the Desing tab → Border, apply the Bottom Border options group preset.
For the second Row → Left Column,
- In the Desing tab → Layout → Vertical Gap, type in 0px.
- In the Desing tab → Sizing → Column Class, select No Column Class.
For the second Row → Middle Column,
- In the Design tab → Layout → Vertical Gap, apply the Spacing - Small variable.
- In the Design tab → Sizing, enable the Grow to Fill option.
- In the Desing tab → Sizing → Column Class, select 3/5.
For the Blurb module, inside the middle column, in the Desing Tab → Image & Icon → Image/Icon Placement, choose Left.
For the second Row → Right Column:
- In the Desing tab → Layout → Layout Direction, select Row.
- In the Desing tab → Layout → Justify Content, select End.
- In the Desing tab → Layout → Align Items, select End.
- In the Desing tab → Layout → Layout Wrapping, select Wrap.
- In the Desing tab → Sizing → Column Class, select No Column Class.

Build the Subscribe Section

Subscribe Section's Structure

Add a new Section with a Row using the One Column structure.
Add an Email Optin module.
Apply the Contained - Dark Row Element Preset, then override the Row's Background Color with the Background - Light Gray variable. Apply Heading 2 to the left heading, and apply the Signup - Dark Element Preset to the Email Optin module.
Connect the Email Optin module to your supported email service in the Email Account option group, then add the section content. The heading can read Never miss an event.

Subscribe Section's Presets

For the Row, apply the Contained - Dark element preset.
For the Row's Background option group, apply the Backgroun - Light Gray option group preset
For the Email Optin module, apply the Dark element preset.

Subscribe Section's Content

In the Email Optin module's Content Tab → Text → Title use Subscribe to Events Newsletter.

Refine the Subscribe Section

Edit the Email Optin module and:
1. In the Content Tab → Text → Body, remove the text.
2. In the Content Tab → Email Account, add your provider.
3. In the Content Tab → Fields, deactivate the Show First Name Field and Show Last Name Field options.