WordPress Page Builders — Elementor, Beaver Builder and Divi Complete Guide

In this tutorial, you'll learn to build custom WordPress layouts using Elementor, Beaver Builder, and Divi — covering drag-and-drop interfaces, Theme Builder capabilities, performance considerations, and when to use a page builder versus Gutenberg blocks versus a custom theme.

What You'll Learn

• What page builders are and how they provide drag-and-drop front-end design for WordPress
• Elementor — the most popular page builder, its free and pro features, Theme Builder, popups, and dynamic content
• Beaver Builder — a developer-friendly builder with clean code output and white-label options
• Divi by Elegant Themes — an all-in-one theme and builder with visual editing
• How to compare page builders: features, performance, learning curve, and pricing
• How to create layouts with Elementor: columns, widgets, templates, and global widgets
• How to use Elementor Theme Builder to design headers, footers, single posts, and archive pages
• Page builder performance: code bloat, loading time, and optimization tips
• When to use a page builder vs Gutenberg vs a custom PHP theme
• Page builder alternatives: Bricks, Breakdance, Oxygen

Why It Matters

Not everyone knows how to code. Page builders let anyone — designers, marketers, business owners — create complex, professional layouts without writing PHP, CSS, or JavaScript. They lower the barrier to entry for building custom websites. But they also add weight, complexity, and a learning curve. Understanding when to use a page builder and which one to choose is essential for building sites that are both beautiful and maintainable.

Real-World Use

A marketing agency builds landing pages for clients. Each page needs a unique design: custom headers, animated sections, testimonial carousels, and lead capture forms. Building each page with a custom theme would take days. Using Elementor, the agency designs a page in 2 hours, saves it as a template, and reuses components across client sites. The client gets a fast, custom-looking page without paying for custom development.

Learning Path

flowchart LR
    A[Backup & Migration] --> B[Page Builders]
    B --> C[Caching Plugins]

What Are Page Builders?

A page builder is a {{< ilink "WordPress" > }} plugin (or theme) that replaces the default editor with a visual, drag-and-drop interface. Instead of writing HTML or using blocks, you drag widgets onto a canvas and see the result in real time.

Think of it like building with LEGO bricks. Gutenberg blocks are like standard LEGO pieces — they fit together in predictable ways. Page builders are like advanced LEGO kits with specialized pieces — more freedom, more options, but also more pieces to manage.

flowchart TD
    A[Page Builder Interface] --> B[Drag Widget to Canvas]
    B --> C[Configure in Side Panel]
    C --> D[Style with Options Panel]
    D --> E[Preview in Real Time]
    E --> F{Need changes?}
    F -->|Yes| G[Edit Directly on Canvas]
    F -->|No| H[Publish Page]
    G --> C

How Page Builders Work Under the Hood

Page builders store layout data differently than the default editor:

// Gutenberg stores content as HTML comments in post_content
<!-- wp:paragraph --><p>Hello</p><!-- /wp:paragraph -->

// Elementor stores layout as serialized PHP array in postmeta
// meta_key: _elementor_data
// meta_value: [{id: "abc123", elType: "section", settings: {...}}]

// Beaver Builder stores layout as serialized data in post_content
// or in a custom meta field depending on version

This means page builder content is tied to the plugin. If you deactivate the page builder, the content doesn't display as HTML — it shows as raw shortcodes or data.

Elementor — The Industry Standard

Elementor is the most popular page builder with over 5 million active installations.

Free vs Pro

The Elementor Interface

When you click Edit with Elementor, the interface splits into two areas:

1. The Canvas — a live preview of your page. You see exactly how it looks.
2. The Panel — the left sidebar with widgets, settings, and style options.

flowchart LR
    A[Elementor Editor] --> B[Left Panel]
    A --> C[Right Canvas]
    B --> D[Widgets Tab]
    B --> E[Settings Tab]
    B --> F[Navigator Tab]
    C --> G[Live Preview]
    E --> H[Page Settings]
    E --> I[Style Settings]
    E --> J[Advanced Settings]

Building a Layout

Every Elementor layout follows a hierarchy:

Page
├── Section
│   ├── Column (1/3 width)
│   │   ├── Widget: Heading
│   │   └── Widget: Text
│   └── Column (2/3 width)
│       ├── Widget: Image
│       └── Widget: Button
├── Section (full width)
│   └── Column (1/1)
│       └── Widget: Video
└── Section
    ├── Column (1/2)
    │   └── Widget: Testimonial
    └── Column (1/2)
        └── Widget: Testimonial

Creating a Section

1. Click the + icon to add a new section.
2. Choose the column structure (1 column, 2 columns, 3 columns, etc.).
3. Drag widgets from the panel into the columns.

Configuring Widgets

Each widget has three tabs:

• Content: What the widget displays (text, image, link).
• Style: How the widget looks (colors, fonts, spacing, borders).
• Advanced: Extra options (CSS ID, classes, animations, responsive visibility).

Global Widgets

Create a widget once and reuse it across your site. Update the global widget, and every instance updates automatically:

// Global widgets stored as Elementor templates
// They use the 'elementor_library' custom post type
// Template type: 'widget'

Use global widgets for:

• Call-to-action buttons used on every page
• Author bio boxes in every blog post
• Newsletter signup forms
• Pricing tables used on multiple pages

Templates

Elementor templates save entire page designs or sections for reuse:

• Page template: Save an entire page design.
• Section template: Save a single section to insert into other pages.
• Block template: A reusable content block.

// Elementor template library locations:
// My Templates: Save locally on this site
// Cloud: Sync across sites (Pro feature)
// Marketplace: Buy/premade templates (Pro feature)

Elementor Theme Builder (Pro)

Theme Builder is the most powerful Elementor Pro feature. It lets you design every part of your theme visually.

What You Can Design

• Header: Logo, navigation menu, search bar, CTA button.
• Footer: Copyright, menu, social icons, widgets.
• Single Post: Post title, featured image, content area, comments.
• Single Page: Page content, sidebar.
• Archive: Blog archive, category archive, tag archive.
• 404 Page: Custom 404 design.
• Search Results: Custom search results layout.

How Theme Builder Works

1. Go to Templates > Theme Builder.
2. Click Add New and choose the template type (Header, Footer, Single, Archive).
3. Design the template using Elementor widgets.
4. Set display conditions (where this template applies).
5. Publish the template.

Display Conditions

// Examples of display conditions:
// Header: Entire Site (shows on every page)
// Single Post: All Posts (shows on every blog post)
// Single Post: Posts in Category "News" (shows only on news posts)
// Footer: Entire Site (shows on every page)
// Archive: All Archives (shows on all archive pages)
// 404 Page: 404 Page (shows on 404 errors)

Dynamic Content

Dynamic content inserts real WordPress data into your designs:

// Examples of dynamic content tags in Elementor:
// {{post.title}} - The current post/page title
// {{post.featured-image}} - The featured image
// {{post.excerpt}} - The post excerpt
// {{author.name}} - The post author's display name
// {{author.avatar}} - The author's avatar image
// {{site.name}} - Your site name
// {{site.logo}} - Your site logo
// {{comments.number}} - Number of comments on the post

This is how you build theme templates that adapt to each page's content automatically.

Beaver Builder — Developer-Friendly

Beaver Builder takes a different approach. It prioritizes clean output, code quality, and developer extensibility.

Clean Code Philosophy

// Beaver Builder stores content in standard WordPress post_content
// When you publish, it saves the rendered HTML alongside the builder data
// This means Beaver Builder content degrades gracefully if the plugin is deactivated
// The raw HTML content remains visible (though not editable)

Beaver Builder is known for:

• Clean HTML output — no inline styles from the builder
• Standard WordPress integration — uses existing templates and hooks
• White-label option — rebrand the builder as your own for client sites
• Developer API — extensive hooks and filters for custom functionality
• No lock-in — your content remains accessible if you switch builders

White-Labeling

Agencies love Beaver Builder because they can hide the Beaver Builder branding from clients:

// Remove Beaver Builder branding from the admin
add_filter('fl_builder_branding', function($branding) {
    return array(
        'name'           => 'My Custom Builder',
        'help_url'       => 'https://mysite.com/support',
    );
});

Performance

Beaver Builder outputs significantly less HTML than Elementor. A simple section with a heading and text in Beaver Builder produces about 30 percent less markup than the equivalent Elementor section.

Divi — The All-in-One Solution

Divi is both a theme and a page builder from Elegant Themes. You buy the theme and get the builder included.

Visual Builder

Divi's builder works in two modes:

1. Front-end Visual Builder: Edit while looking at a live preview of your page.
2. Back-end Builder: Edit in the WordPress admin area.

// Divi stores layout as shortcodes in post_content
// Example: [et_pb_section][et_pb_row][et_pb_column type="4_4"]
// [et_pb_text]Hello World[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Divi Modules

Divi includes 200+ content modules:

// Common Divi modules:
[et_pb_text] - Text and content
[et_pb_image] - Image with overlay
[et_pb_slider] - Image slider
[et_pb_blog] - Blog posts grid
[et_pb_shop] - WooCommerce products
[et_pb_contact_form] - Contact form
[et_pb_countdown_timer] - Countdown
[et_pb_pricing_tables] - Pricing tables

Divi Theme Builder

Similar to Elementor Pro, Divi features a Theme Builder where you design headers, footers, post templates, and archive pages visually.

Divi Pricing

Divi is sold as part of Elegant Themes membership:

• Yearly access: $89/year (includes Divi, Extra, Bloom, Monarch)
• Lifetime access: $249 one-time (all current and future products)

Page Builder Comparison

Performance Considerations

Page builders add code to your site. How much depends on which builder and how you use it.

Code Bloat

// Elementor adds the following to every page:
// - elementor-frontend.min.js (~50KB)
// - elementor-common.min.js (~30KB)
// - Font Awesome icons (if used)
// - Google Fonts (if configured)
// - Inline CSS for each widget (stored in postmeta)

Optimization Tips

1. Load Google Fonts locally — download and self-host instead of using Google's CDN.
2. Disable Font Awesome if not needed — many templates use Font Awesome by default.
3. Enable asset optimization — Elementor Pro has settings to load only needed CSS/JS.
4. Use a caching plugin — WP Rocket or W3 Total Cache to serve static HTML.
5. Avoid excessive widgets — each widget adds HTML and CSS. Use fewer, more purposeful widgets.

// Elementor performance settings (Pro):
// Features > Performance
// - Switch editor loading method (default vs optimized)
// - Disable default Font Awesome
// - Disable default Google Fonts
// - Load CSS as inline or file

Lazy Loading

Both Elementor and Divi support lazy loading for images and background images, reducing initial page load time.

Page Builder vs Gutenberg vs Custom Theme

When should you use each approach?

When to Use a Page Builder

• Client wants to edit their own layouts.
• You need complex designs quickly.
• You're building landing pages for marketing campaigns.
• The site needs frequent layout changes by non-technical users.

When to Use Gutenberg

• The site has standard layouts (blog, business site, portfolio).
• You want content that's portable between themes.
• Performance is a high priority.
• You don't want to lock the client into a plugin dependency.

When to Use a Custom Theme

• You're building a large, custom application.
• Performance must be absolutely optimal.
• You have development resources.
• The design is unique and requires custom code anyway.

Page Builder Alternatives

Beyond the big three, several newer builders are gaining traction.

Bricks

A newer builder focused on performance and clean code:

// Bricks stores data similarly to Elementor but with cleaner output
// No shortcodes, no inline styles on front end
// CSS is generated and cached in CSS files

Breakdance

Created by the same team behind Oxygen. Aims to be fast and intuitive with a modern interface.

Oxygen

A developer-oriented builder that generates very clean, fast code. Has a steeper learning curve but produces excellent performance.

Common Mistakes

1. Using a page builder for every site. Not every site needs a page builder. A standard blog or business site with Gutenberg blocks loads faster, is easier to maintain, and doesn't lock you into a plugin. Reserve page builders for sites that truly need custom layouts.

2. Building everything with inline styles. Page builders make it easy to style each element individually. But 100 inline styles on a page make it impossible to maintain. Use global styles and CSS classes where possible. Edit one class, update 50 elements.

3. Ignoring Responsive Design. A layout that looks perfect on desktop often breaks on mobile. Always check your page builder layouts at tablet and phone widths. Elementor and Divi have responsive editing modes — use them.

4. Storing too many revisions. Every Elementor edit saves a new revision. On a site with frequent edits, revision history can grow to hundreds of entries, bloating the database. Limit revisions or use a plugin to clean them periodically.

5. Locking clients into a builder they can't use. If a client can't afford to maintain the builder license after you're gone, they're stuck. Choose a builder the client can afford to keep renewing, or use Gutenberg blocks that don't require annual payments.

Practice Questions

1. What happens to a page builder's content if you deactivate the builder plugin? Why is this different for Gutenberg blocks?

2. A client needs a site where they can change the homepage layout every month. Should you use a page builder or Gutenberg? Justify your answer.

3. Compare Elementor and Beaver Builder in terms of: code cleanliness, developer extensibility, and client-friendliness. Which would you recommend for an agency building client sites?

Challenge: Build the same landing page three ways: with Elementor, with Gutenberg blocks, and with hand-coded HTML/CSS. Measure: (a) page load time using Lighthouse, (b) HTML size, (c) time to build, (d) ease of editing for a non-technical user. Write a comparison report with your recommendation for each use case.

FAQ

Mini Project

Build a complete landing page with Elementor.

1. Install Elementor (free is fine for this project).
2. Create a new page and edit with Elementor.
3. Add a hero section: full-width background image, heading, subheading, and CTA button.
4. Add a features section: 3-column layout with icons, headings, and descriptions.
5. Add a testimonial section: 2-column layout with quote text and author name.
6. Add a pricing section: 3-column layout with pricing cards and buttons.
7. Add a contact section: embed a contact form (from Contact Form 7 or WPForms).
8. Add a footer section with copyright text and social icons.
9. Make the page responsive: check desktop, tablet, and mobile views. Adjust column widths, font sizes, and spacing for each breakpoint.
10. Save the page as a template for reuse.

What's Next

Now that you can build custom layouts, learn to make them blazing fast:

Continue to Lesson 33: Caching Plugins — Speed up WordPress with W3 Total Cache, WP Rocket, and Perfmatters.

Related lessons:

• Essential Plugins — Where page builders fit in your plugin stack
• Caching Plugins — Optimize page builder performance with caching
• PHP Basics — Create custom page builder widgets with PHP