How to Build a One-Page Website with Divi Theme

Table of Contents

• Introduction
• Why Choose a One-Page Website?
• Getting Started: Creating a New Page
• Building the Layout with Divi
• Creating Anchor Points for Smooth Navigation
• Setting Up the Navigation Menu
• Enabling Dot Navigation (Optional)
• Finalizing and Publishing the Page
• FAQs

Introduction

A one-page website provides a streamlined and engaging user experience, helping visitors find information quickly without navigating multiple pages. In this guide, we will show you how to build a one-page website using the Divi theme.

Why Choose a One-Page Website?

• Easy to navigate for users
• Smooth scrolling experience
• Ideal for portfolios, landing pages, and small business websites
• Mobile-friendly and modern design

Getting Started: Creating a New Page

1. Log in to your WordPress Dashboard.
2. Navigate to Pages > Add New.
3. Give your page a title (e.g., Homepage).
4. Click on Use Divi Builder.
5. Start building your page layout or load a Premade Layout.
6. Click Publish.

Building the Layout with Divi

• Divide your page content into sections using Divi’s Section Element.
• Example sections:
  • Case Studies
  • Services
  • About Us
  • Contact Us

Creating Anchor Points for Smooth Navigation

Each menu item should scroll to a specific section on the page. To create anchor points:

1. Edit each Divi Section.
2. Go to Advanced Tab > CSS ID & Classes.
3. In the CSS ID field, add a unique ID .

Important Notes:

• Use descriptive names for CSS IDs.
• Follow naming conventions .
• Keep IDs short and unique.

Setting Up the Navigation Menu

1. Go to Appearance > Menus.
2. Create a new menu or edit an existing one.
3. Add Custom Links:
   • URL: Add # followed by the CSS ID (e.g., #case-studies).
   • Link Text: Set the menu item name (e.g., Case Studies).
4. Set the menu as the Primary Menu.
5. Click Save Menu.

Enabling Dot Navigation (Optional)

Divi’s Dot Navigation provides a floating sidebar navigation option.

1. Go to Pages > All Pages.
2. Edit the one-page website you created.
3. In the right sidebar under Divi Page Settings, set Dot Navigation to On.
4. Save the changes.

Note: The number of dots corresponds to the number of Divi Sections.

Finalizing and Publishing the Page

1. Navigate to Settings > Reading.
2. Under Your homepage displays, select A static page.
3. Choose the Homepage you created.
4. Click Save Changes.

FAQs