Learning how to use Divi Builder in WordPress makes it easier to create and customize pages without advanced coding skills. Divi Builder lets you build layouts, add content, and adjust page elements through a visual editing interface, making it a practical choice for beginners.
Divi Builder uses sections, rows, columns, and modules to structure your pages. This guide walks you through the main workflow, from creating a new page and choosing a layout to customizing the design, checking the mobile layout, and fixing common problems.
1. What Is Divi Builder?
Divi Builder is a visual page builder for WordPress that lets you create and customize page layouts through a drag-and-drop interface. You can arrange content, adjust design settings, and preview changes as you build your page.
Divi Builder organizes page content using sections, rows, columns, and modules. You can add elements such as text, images, buttons, videos, forms, testimonials, and other content, then customize their appearance to match your website’s design and branding.
Divi Builder can be used to create different types of WordPress pages, including homepages, landing pages, service pages, portfolios, and blogs. You can start from scratch or customise a pre-made layout for your project.
2. What You Need Before Getting Started
Before you start building a page with Divi, make sure your WordPress site has Divi installed and activated and that you have administrator access. Prepare your page content and assets, including copy, images, your logo, and other brand elements.
If you are working on an existing website, create a backup before making major changes. This gives you a safe restore point while you test the new layout with Divi Builder.
3. Step-by-Step Guide to Using Divi Builder
Once WordPress and Divi Builder are ready, you can start building your page in the Visual Builder. The steps below cover the main workflow from creating the page to publishing the finished layout.
Step 1 – Create a New WordPress Page
From your WordPress dashboard, go to Pages → Add New and enter a title for the page, such as “Home,” “About,” or “Services.” You can also open an existing page to redesign it with Divi Builder.
Once the page is open, click Use Divi Builder to launch the Visual Builder. Divi loads the page in its visual editing interface, where you can build and edit the layout directly on the front end.
Step 2 – Choose a Layout or Start From Scratch
After opening the Visual Builder, choose how you want to build the page. Divi provides options such as Build From Scratch and Choose a Premade Layout. Depending on your Divi version and setup, you may also see an option to build with Divi AI.
If you are new to Divi, a premade layout provides a ready-made starting point for your Divi Builder page. You can replace the demo text and images, then adjust the colors, fonts, spacing, and other design settings to fit your website.
If you already have a specific page structure in mind, choose Build From Scratch to start with a blank layout.
Step 3 – Build the Page Structure With Sections and Rows
Divi uses a simple hierarchy: sections contain rows, rows contain columns, and columns contain modules. Start by adding sections for the main areas of your page, then add rows and choose a column structure that fits each section.
For example, you might use one section for a hero area, a two-column row for text and an image, and separate rows for services, testimonials, or other content. This structure makes it easier to organize your page before adding individual modules.
Step 4 – Add Modules to Your Layout
With the page structure in place, add modules to the columns where you want your content to appear. Divi modules include elements such as Text, Image, Button, Blurb, and Contact Form.
Choose a module based on the content you want to display. For example, use a Text module for headings and copy, an Image module for visuals, and a Button module for calls to action. Open the module settings to add content and customize its appearance, spacing, typography, and other design options.
Step 5 – Customize the Design
Once your content is in place, open the settings for each section, row, column, or module in Divi Builder to customize the design. Divi provides settings for typography, colors, backgrounds, spacing, sizing, borders, and other visual properties.
Start with the basic design elements, such as fonts, colors, spacing, and button styles. Then adjust individual elements where necessary. Keeping these settings consistent across the page will make the layout feel more cohesive.
Step 6 – Check the Layout on Mobile
Before publishing the page, check how your design looks on different screen sizes. Divi’s Visual Builder lets you preview and adjust your page for desktop, tablet, and phone views. You can modify settings such as font size, spacing, width, and visibility for different devices.
You should reduce heading sizes, adjust spacing, change widths, or modify column layouts to keep the content easy to read. Pay particular attention to sections with large images, multiple columns, or large headings.
Step 7 – Review and Publish Your Page
Before publishing, review the page from top to bottom and check the content, links, images, spacing, and responsive layout. Preview the page as a visitor would see it and make sure everything appears in the intended order.
Once everything looks correct, save your changes and publish the page. Open the live page to verify the final result, then test important buttons, forms, and links on desktop and mobile.
4. Best Practices and Tips for Using Divi Builder
A few practical habits can make your Divi workflow faster, easier to manage, and more efficient as your website grows.
4.1 Keep Your Divi Layout Simple
Build each section around a clear purpose rather than adding animations or decorative effects solely to fill space. A simpler layout is easier to navigate and maintain.
4.2 Keep Your Divi Design Consistent
Use the same fonts, colors, button styles, and spacing throughout your website instead of styling every page from scratch. Consistent design makes your website easier to maintain and gives different pages a more unified look.
Divi’s Global Presets can also help you reuse design settings across multiple modules. Updating a preset can apply the same design changes to the elements that use it.
4.3 Optimize Images Before Uploading
Large images can add significant page weight, especially on pages with banners, galleries, or multiple visual sections. Resize images to the dimensions you actually need and compress them before uploading them to WordPress.
Avoid using unnecessarily large files for small elements. Keeping image sizes under control can reduce page weight and help improve loading performance.
4.4 Save Reusable Layouts and Sections
If you create a section you expect to use again, save it rather than rebuilding the same design on every page. Reusable layouts can be useful for common elements such as service sections, testimonials, pricing blocks, contact areas, and calls to action.
Divi’s Divi Library allows you to save layouts, sections, rows, and modules for reuse.
5. Common Problems and Fixes
Common Divi issues are often related to caching, plugin conflicts, outdated software, or responsive settings.
5.1 Divi Builder Is Slow or Takes a Long Time to Load
If the Divi Builder feels slow, the cause may be limited hosting resources, a large or complex page, outdated software, or a plugin conflict.
Start by updating WordPress, Divi, and your installed plugins. If the problem continues, temporarily deactivate non-essential plugins and test the Visual Builder again. If performance improves, reactivate the plugins one at a time to identify the source of the conflict.
5.2 Changes Are Not Showing on the Live Page
If your changes appear in the Visual Builder but not on the live page, caching is one of the first things to check.
Clear your browser cache and any WordPress, caching plugin, server, or CDN cache used by your website. Then save the page again and open it in a private browser window to check whether the updated version is visible.
If the old version still appears, temporarily turn off caching to determine whether the cache is causing the issue.
5.3 The Layout Looks Different on Mobile
If a page looks correct on desktop but breaks on mobile, check the responsive settings for the affected sections, rows, columns, and modules. Look for differences in tablet or phone views, such as font size, spacing, width, or visibility. Also, check whether multi-column layouts have enough space on smaller screens.
5.4 A Plugin Conflicts With Divi
If a Divi issue starts immediately after installing or updating another plugin, that plugin may be causing a compatibility problem.
Temporarily deactivate the suspected plugin and test the page again. If the problem disappears, reactivate your plugins one at a time to confirm which one is responsible.
Once you identify the conflicting plugin, check for available updates or contact the plugin developer for a compatibility fix. Avoid permanently turning off a plugin if your website depends on its functionality.
6. Useful WordPress Plugins to Use With Divi
Divi handles page building and design, while additional WordPress plugins can add performance, image optimization, SEO, or security features.
6.1 WP Rocket for Performance
WP Rocket is a caching and performance plugin that can help improve page loading speed on WordPress websites. It can be useful for Divi sites with image-heavy pages, complex layouts, or multiple visual elements.
When configuring performance plugins, avoid enabling overlapping optimization features in multiple plugins.
6.2 ShortPixel for Image Optimization
ShortPixel can compress and optimize images before or after they are added to your WordPress media library. This can be particularly useful for Divi pages that use large hero images, galleries, background images, or other visual content.
Start with appropriately sized images, then use an optimization plugin when you need additional compression or automated image handling.
6.3 Rank Math SEO for Search Optimization
Rank Math SEO provides tools to manage SEO settings, including page titles, meta descriptions, schema markup, and other on-page optimisation options. It can complement a Divi-built website by helping you manage the search optimization side of your pages.
Divi controls how your page is visually designed and structured, while an SEO plugin handles additional search-related settings.
6.4 Wordfence Security for Website Protection
Wordfence Security provides security features designed to help protect WordPress websites from common threats. It can be useful for websites that need additional monitoring and protection beyond WordPress’s built-in security measures.
Keep WordPress, Divi, plugins, and themes updated, use strong administrator credentials, and remove plugins that you no longer need.
6.5 PluginPro for a More Efficient WordPress Workflow
If you need additional WordPress themes or plugins for your Divi website, PluginPro offers an affordable way to access products for different website-building needs. This can be useful when you want to add new functionality or explore additional design options without purchasing every product individually.
PluginPro can complement a Divi-based workflow by providing access to additional WordPress themes and plugins for diverse website needs. Choose products based on your project’s requirements and always check compatibility before installing a new theme or plugin.
7. FAQs
7.1 Is Divi Builder suitable for beginners?
Yes. Divi Builder uses a visual editing interface, allowing beginners to create and customize WordPress pages without advanced coding skills. You may need some time to become familiar with sections, rows, columns, modules, and the builder’s design settings.
7.2 Do I need coding knowledge to use Divi Builder?
No. You can build and customize many types of WordPress pages without writing code. Basic knowledge of HTML and CSS can still be useful if you want to make more advanced customizations.
7.3 Can I use Divi Builder on an existing website?
Yes. You can use Divi Builder to create new pages or redesign existing ones. Before making major changes to an existing website, create a backup so you can restore the previous version if something goes wrong.
7.4 How can I improve Divi website performance?
Start by optimizing images, keeping your layouts reasonably simple, and using caching where appropriate. Also keep WordPress, Divi, and your plugins updated, and check for plugin conflicts if the Visual Builder becomes slow.
7.5 Where can I find affordable WordPress themes and plugins?
If you’re looking for premium WordPress themes and plugins without purchasing each product individually, PluginPro offers affordable options, including a $4.5 per-item option and membership plans for users who need multiple products.
8. Conclusion
Learning how to use Divi Builder gives you a practical way to create and customize WordPress pages without advanced coding skills. From building the page structure with sections, rows, columns, and modules to adjusting the design and checking the mobile layout, Divi gives you control over the entire page-building process.
Start with a simple layout, build your content step by step, and use reusable layouts and consistent design settings as your website grows. If you also need WordPress themes or plugins, PluginPro offers affordable options to support your website-building workflow.
