> For the complete documentation index, see [llms.txt](https://learn.sitecove.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.sitecove.com/how-to-guides/content-management-systems-cms/themes-templates-and-customization/using-page-builders.md).

# Using Page Builders

A page builder is a visual editing tool that simplifies website design by allowing users to build pages using drag-and-drop blocks instead of coding.\
This guide covers popular page builders, their features, and how to use them effectively in **WordPress**, **Joomla**, and **Drupal**.

**Why Use a Page Builder?**

* **No coding required**.
* **Faster website creation and layout customization**.
* **Pre-built templates for quick setup**.
* **Improved design flexibility**.
* **Works with most CMS themes**.

A page builder is ideal for users who want full control over design without hiring a developer.

***

#### Popular Page Builders for WordPress

WordPress offers several page builders, each with unique features.

**1. Elementor (Most Popular)**

* **Features**:
  * Drag-and-drop live editor.
  * Hundreds of pre-made templates.
  * Advanced customization (CSS, animations, effects).
  * Mobile-responsive editing.
  * Integrations with WooCommerce and third-party plugins.
* **How to Use Elementor**:
  * Install Elementor from **Plugins > Add New**.
  * Create a new page and click **Edit with Elementor**.
  * Drag widgets (text, images, buttons) to build your layout.
  * Customize styles, fonts, and spacing.
  * Click **Publish** to save changes.

Elementor Pro offers more advanced features like theme building and global widgets.

**2. Divi Builder (Best for Advanced Designs)**

* **Features**:
  * Front-end and back-end visual editor.
  * Custom CSS control for advanced styling.
  * Pre-designed layouts and full website packs.
  * Global settings for site-wide customization.
  * Built-in A/B testing and marketing tools.
* **How to Use Divi**:
  * Install the Divi theme or Divi plugin.
  * Create a new page and click **Use Divi Builder**.
  * Choose **Start from Scratch** or select a pre-made template.
  * Drag and adjust sections, rows, and modules.
  * Save and publish your page.

Divi’s split-testing feature helps compare different designs for better conversions.

**3. Gutenberg (Default WordPress Editor)**

* **Features**:
  * Block-based editor (replaces the classic editor).
  * Pre-built blocks (text, images, buttons, columns).
  * Lightweight and fast for SEO optimization.
  * Works seamlessly with most WordPress themes.
  * Allows third-party block plugins for extended features.
* **How to Use Gutenberg**:
  * Open any page or post in WordPress.
  * Click the + (Add Block) button to insert content.
  * Drag and arrange blocks into a custom layout.
  * Customize block settings from the right panel.
  * Click **Publish** to apply changes.

Gutenberg is ideal for blogs and simple page layouts but may lack advanced design flexibility.

***

#### Page Builders for Joomla

Joomla also offers powerful page builders to create custom layouts.

**1. SP Page Builder (Best for Joomla Users)**

* **Features**:
  * Drag-and-drop interface.
  * Pre-designed content blocks and templates.
  * Works with Joomla articles and modules.
  * Responsive design for mobile editing.
  * No coding required.
* **How to Use SP Page Builder**:
  * Install SP Page Builder from Joomla Extensions.
  * Create a new page under **Components > SP Page Builder**.
  * Drag elements like text, images, and videos.
  * Customize styles and layouts.
  * Save and publish the page.

SP Page Builder’s pre-built templates speed up the design process.

***

#### Page Builders for Drupal

Drupal offers layout builders and modules that function as page builders.

**1. Drupal Layout Builder (Best for Custom Drupal Sites)**

* **Features**:
  * Drag-and-drop page editor.
  * Works with Drupal’s block system.
  * Allows creating custom layouts per page.
  * No third-party plugin required.
* **How to Use Layout Builder**:
  * Enable the Layout Builder module in Drupal Admin.
  * Go to **Structure > Content Types** and enable layout editing.
  * Open a page and click **Layout** to start customizing.
  * Drag and drop blocks into place.
  * Save the changes.

Drupal Layout Builder is best for users who need deep content structure customization.

***

#### Best Practices for Using Page Builders

* **Choose a Lightweight Page Builder** – Avoid slow-loading builders.
* **Use Pre-made Templates** – Saves time and ensures consistency.
* **Optimize for Mobile** – Always check responsiveness.
* **Minimize Plugin Conflicts** – Test new plugins before installing.
* **Keep Page Builder Updated** – Ensure security patches and performance improvements.

Always test custom page designs in a staging environment before launching them live.