How to Work with Pages in WordPress and Divi: A Complete Step-by-Step Guide

WordPress powers over 43% of all websites on the internet — and for good reason. Its intuitive interface, vast plugin ecosystem, and flexible content management capabilities make it the go-to CMS for everyone from solo bloggers to enterprise-level businesses. When you pair WordPress with the Divi theme by Elegant Themes, you unlock a drag-and-drop visual builder that lets you design stunning, professional pages without writing a single line of code.

In this comprehensive guide, you'll learn exactly how to create, customize, organize, and publish pages in WordPress using the Divi Builder. Whether you're building your first website or refining an existing one, this tutorial covers everything you need to know.

What Are Pages in WordPress? (And How They Differ from Posts)

Before diving into the technical steps, it's important to understand what a WordPress page actually is — and how it differs from a blog post.

Pages are the structural backbone of your website. They hold content that doesn't change frequently and doesn't need to be categorized or tagged. Think of your About Us, Contact, Services, or Homepage — these are all classic examples of WordPress pages.

Understanding this distinction helps you make smarter decisions about how to organize and present your content.

Prerequisites: What You Need Before Getting Started

To follow this guide, make sure you have the following in place:

• A live WordPress installation on a reliable hosting environment
• The Divi theme installed and activated (available from Elegant Themes)
• Administrator access to your WordPress dashboard
• A basic understanding of your website's structure and goals

If you're still setting up your hosting environment, consider VPS Hosting from AlexHost — a high-performance, scalable solution that gives you full root access, dedicated resources, and the flexibility to run WordPress at optimal speed. For smaller projects or personal sites, Shared Web Hosting is an affordable and beginner-friendly alternative that's fully compatible with WordPress.

Step 1: Log Into Your WordPress Dashboard

Start by opening your preferred web browser and navigating to your WordPress admin panel. The default URL is:

http://yourdomain.com/wp-admin

Enter your username and password, then click Log In. You'll land on the WordPress Dashboard — the central control panel for your entire website.

> Pro Tip: If you're managing multiple WordPress sites or need a more streamlined admin experience, consider using a VPS with cPanel for centralized server and site management from a single, intuitive interface.

Step 2: Create a New WordPress Page

Once you're inside the dashboard, follow these steps to create a new page:

1. In the left-hand navigation menu, locate and click on Pages
2. Click Add New at the top of the Pages list (or use the + New > Page shortcut in the top admin bar)
3. You'll be taken to the WordPress block editor (Gutenberg)

Adding a Title and Basic Content

• Click on the "Add title" field at the top and type your page name (e.g., *About Us*, *Contact*, *Services*)
• In the content area below, you can add text blocks, images, headings, buttons, and other elements using the Gutenberg block editor
• Use the "/" shortcut in the editor to quickly search for and insert any block type

At this stage, you're working with the standard WordPress editor. However, if you want advanced visual customization — and you're using Divi — you'll want to activate the Divi Builder in the next step.

Step 3: Activate and Use the Divi Builder

The Divi Builder transforms the standard WordPress editor into a powerful, visual drag-and-drop design environment. Here's how to enable and use it:

Enabling the Divi Builder

After opening your page in the editor, you'll see a prominent button near the top of the content area:

"Enable Divi Builder" — click it.

WordPress will prompt you with three starting options:

Select the option that best suits your project and click Start Building.

Understanding the Divi Builder Structure

Before adding content, it helps to understand how Divi organizes its layout hierarchy:

Section
  └── Row
        └── Column
              └── Module

• Sections are the largest containers — they span the full width of the page
• Rows sit inside sections and define the column structure (1, 2, 3 columns, etc.)
• Columns are the individual vertical divisions within a row
• Modules are the actual content elements (text, images, buttons, forms, etc.)

Step 3a: Adding Sections and Rows

1. Click the blue "+" icon at the bottom of the canvas to add a new Section
2. Choose a section type: Regular, Fullwidth, or Specialty
3. Inside the section, click the "+" icon to add a Row
4. Select your preferred column layout (e.g., 1/2 + 1/2 for a two-column design)

Step 3b: Adding Modules

Modules are the content building blocks of every Divi page. To add one:

1. Click the grey "+" icon inside a column
2. A module library will appear — browse or search for the module you need
3. Click on the module to insert it into your layout

Commonly used Divi modules include:

• Text Module — for paragraphs, headings, and formatted copy
• Image Module — for photos, graphics, and illustrations
• Button Module — for CTAs and navigation links
• Slider Module — for hero image carousels
• Contact Form Module — for lead capture and inquiries
• Blurb Module — for icon + text feature boxes
• Video Module — for embedded video content
• Testimonial Module — for social proof and reviews
• Code Module — for custom HTML, CSS, or JavaScript snippets

Step 3c: Customizing Modules

Click the pencil (edit) icon on any module to open its settings panel. The settings are organized into three tabs:

1. Content Tab

Configure the actual content of the module — text, images, links, button labels, form fields, etc.

2. Design Tab

Control the visual appearance of the module:

• Typography — font family, size, weight, line height, letter spacing
• Colors — background, text, border, icon colors
• Spacing — padding and margin controls (with responsive breakpoints)
• Borders & Shadows — rounded corners, box shadows, border styles
• Sizing — width, height, max-width constraints

3. Advanced Tab

Access developer-level settings:

• CSS Classes and IDs — for custom styling hooks
• Custom CSS — write module-specific CSS directly
• Visibility — show/hide the module on desktop, tablet, or mobile
• Animations — entrance animation effects and timing

> Design Tip: Divi's responsive controls let you set different values for desktop, tablet, and mobile views. Always preview your page on all three breakpoints before publishing.

Step 4: Organize Your Pages with Hierarchies

As your website grows, keeping pages organized becomes critical for both user experience and SEO. WordPress supports parent-child page hierarchies, which allow you to nest related pages under a common parent.

Creating a Parent-Child Page Relationship

1. While editing a page, look at the right-hand sidebar in the block editor
2. Click on Page to expand the page settings panel
3. Find the Page Attributes section
4. Under Parent Page, click the dropdown and select the page you want to assign as the parent

Example hierarchy:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

This structure creates cleaner URLs (e.g., yoursite.com/services/web-design/) and helps search engines better understand your site's content architecture.

Step 5: Add Pages to Your Navigation Menu

Creating a page doesn't automatically add it to your website's navigation. You need to manually add it to a menu.

1. In the WordPress dashboard, go to Appearance > Menus
2. Select an existing menu or click Create a New Menu
3. In the Pages panel on the left, check the box next to the pages you want to add
4. Click Add to Menu
5. Drag and drop menu items to reorder them or create dropdown sub-menus
6. Click Save Menu when done

> Best Practice: Keep your primary navigation menu focused on your most important pages. Aim for 5–7 top-level items maximum to avoid overwhelming visitors.

Step 6: Configure Page Settings for SEO and Performance

Before publishing, take a moment to configure key page settings that affect both search engine visibility and user experience.

Permalink (URL Slug)

• In the block editor sidebar, find the Permalink section
• Edit the URL slug to be short, descriptive, and keyword-rich
• Avoid auto-generated slugs with numbers (e.g., /?p=123)
• Good example: yoursite.com/about-us/
• Bad example: yoursite.com/?page_id=47

Featured Image

• Assign a relevant featured image to improve social sharing appearance and visual consistency

Page Template

• Some themes (including Divi) offer multiple page templates (e.g., full-width, no sidebar)
• Select the appropriate template under Page Attributes > Template

SEO Meta Data

• If you're using an SEO plugin like Yoast SEO or Rank Math, fill in the:
• Meta title — include your primary keyword
• Meta description — write a compelling 150–160 character summary
• Focus keyword — set your target search term

Step 7: Save, Preview, and Publish Your Page

Once you're satisfied with your page design and settings, it's time to go live.

Saving Options in Divi Builder

At the top right of the Divi Builder interface, you'll find:

• Save Draft — saves your work without making it publicly visible
• Preview — opens a live preview of your page in a new tab
• Publish/Update — makes the page live on your website

Publishing from the Block Editor

If you exit the Divi Builder and return to the standard block editor:

1. Click Save Draft to save without publishing
2. Click Preview to review how the page looks on the front end
3. Click Publish when you're ready to make it live
4. Confirm by clicking Publish again in the confirmation panel

> Important: Always preview your page on both desktop and mobile before publishing. Divi's responsive design tools are powerful, but manual review catches issues that automated tools miss.

Advanced Tips: Getting More Out of WordPress and Divi

Use the Divi Theme Builder for Global Templates

The Divi Theme Builder (available in Divi 4.0+) lets you create global templates for headers, footers, and specific post/page types. This ensures design consistency across your entire site without manually editing each page.

Save Layouts to the Divi Library

If you've designed a section or layout you love, save it to the Divi Library for reuse across other pages. This dramatically speeds up your workflow.

Enable Divi's A/B Testing (Split Testing)

Divi includes a built-in split testing tool that lets you test different versions of a module, section, or page against each other to see which performs better — invaluable for conversion rate optimization.

Secure Your Site with SSL

If you haven't already, make sure your WordPress site runs on HTTPS. An SSL certificate is essential for user trust, data security, and Google rankings. AlexHost offers SSL Certificates that are easy to install and compatible with all WordPress hosting environments.

Use a Custom Domain

A professional domain name reinforces your brand and improves click-through rates in search results. You can register and manage your domain directly through AlexHost's Domain Registration service, with support for hundreds of TLD extensions.

Troubleshooting Common Issues

Conclusion

Working with pages in WordPress using the Divi theme gives you an exceptionally powerful and flexible toolkit for building professional websites — no coding required. By following the steps in this guide, you can:

• Create well-structured WordPress pages with clear titles and content
• Design visually compelling layouts using Divi's drag-and-drop builder
• Organize your pages into logical hierarchies for better UX and SEO
• Configure key settings like permalinks, meta data, and templates
• Publish confidently after previewing across all device types

The combination of WordPress's content management power and Divi's visual design capabilities is hard to beat. And with the right hosting infrastructure underneath it all, your site will be fast, secure, and ready to scale.

For resource-intensive WordPress projects, high-traffic sites, or applications that need dedicated computing power, explore AlexHost's Dedicated Servers — offering enterprise-grade hardware, full server customization, and maximum performance for demanding workloads.

*Ready to build your next WordPress project? Start with a solid foundation — choose the right hosting, install Divi, and follow this guide to create pages that look great and rank even better.*