How to Use the Divi Theme Builder: A Beginner Guide for WordPress

Introduction

As the Founder and CEO at Acquaint Softtech, I have seen the Divi Theme Builder become one of the most popular WordPress page builder tools we work with. It can seem daunting at first, but once you understand how it works, its power is clear: with visual, front-end editing, hire WordPress developers or beginners alike can build beautiful, responsive WordPress sites more easily than ever.

In this article, we walk through how to use the Divi Theme Builder from start to finish: installing Divi, the interface, building templates step by step, customising pre-made layouts, blog and product templates, and what a Divi developer does. Whether you searched Divi builder, divi page builder, divi theme builder tutorial, or Divi theme customization, this is your map.

---

This full-length guide covers everything you need to create a fully functional website or blog with the Divi Builder. Using Divi is also cost-effective, especially for small businesses, since a budget-friendly yet professional site is well within reach. If you are still choosing a stack, our guide on why to use Laravel is a useful companion read.

Below, we define the builder, install it, tour the interface, and walk through building and customising templates, with a real project to ground it all.

What Is the Divi Theme Builder?

The Divi Theme Builder is a drag-and-drop WordPress page builder that designs headers, footers, and templates without coding.

The Divi Builder is a user-friendly, drag-and-drop Divi website builder for WordPress. It lets designers create stunning pages without coding, and as a complete Divi site builder, it handles whole websites, not just single pages, without a steep learning curve. 

While combining code with Divi enhances the experience and results. Divi is also highly cost-effective, especially for small businesses: by hiring remote developers who know Divi well, businesses get budget-friendly, professional websites.

Installing the Divi Theme

Install Divi by subscribing to Elegant Themes, downloading the theme, uploading it in WordPress, and activating it.

To begin, install and activate the Divi theme as you would any WordPress theme. A quick guide, linking your Elegant Themes account along the way:

• Subscribe: choose Divi's annual plan at 89 USD or a lifetime plan at 249 USD, and create an Elegant Themes account.

• Download the theme: from the download tab on Elegant Themes, download the compressed Divi file.

• Upload the theme: in WordPress, go to Appearance > Themes > Add New, click Upload Theme, choose the file, then Install and Activate.

• Link your account: under the Divi section in WordPress Admin, click Update and enter your Elegant Themes API keys and username.

The Divi Theme Builder Interface

The Theme Builder lets you create templates for headers, footers, and body content, all edited live in the Visual Builder.

After activating Divi, you will see a new Divi bar on the right of your WordPress dashboard, which opens the Theme Builder interface. There you create templates for different sections of your site, including headers, footers, and body content. The Visual Builder edits pages or templates in real time, letting you add elements, customise their appearance, and see instant previews. 

The Default Website Template at the top left represents the header, body, and footer; click a section to customise it in the Visual Builder. For pixel-perfect results, our frontend development team can extend Divi with clean, custom markup.

How to Use the Divi Theme Builder: Step-by-Step

Go to Divi > Theme Builder, add a template, then build a header, body, and footer in the Visual Builder and publish.

1. Open the Theme Builder: in the WordPress sidebar, click Divi, then Theme Builder.

2. Add a template: the Default Website Template covers your whole site; click Add New Template for specific areas like blog posts, categories, or shop pages.

3. Set where it applies: under the Use On criteria, check boxes such as All Posts or specific categories.

4. Add global or custom elements: add a global or custom header, a custom body, and a global or custom footer.

5. Design in the Visual Builder: build with Sections, Rows and Modules, and insert dynamic modules like Post Title, Post Info or Featured Image.

6. Save and publish: save the layout, then click Save Changes in the main Theme Builder dashboard to push your templates live.

This is the core Divi Theme Builder tutorial workflow. For anything beyond drag-and-drop, a Divi theme developer can add custom code, and you can lean on CMS development to keep everything manageable. 

Customising Pre-made Divi Layouts

Pre-made layouts are the fastest way to start; load one, then customise sizes, colours, fonts and content.

Divi's drag-and-drop features and pre-made layouts make it easy to design. For a full-page layout, go to Pages > Add New, name it, click Use Divi Builder, then either start from scratch or click Browse Layouts to pick from Divi's library, preview with View Demo, and click Use This Layout to load it.

To customise pre-made page elements in sections:

• Choose a section: in the Theme Builder, pick header, footer or body.

• Open the library: click the three purple dots at the bottom, then the plus sign to Load from Library.

• Pick a template: browse, choose one, and click Use This Layout.

• Customise it: adjust size, colours, fonts and elements in the module settings.

You can use this for new or saved templates, or replace existing content by choosing Replace Existing Content before loading. Take your time to pick templates that match your brand; developers use pre-made layouts to deliver website development solutions faster.

Blog Templates

Build a blog template by adding an All Blog Posts template and using dynamic post modules.

Divi makes blog pages easy with dynamic post-content modules:

• Start a new template: in the Theme Builder, click Add New Template, choose All Blog Posts, then Create a Template.

• Insert a row: click the plus button and pick a row layout.

• Use modules: add Post Content, Post Title, Featured Image, Post Author, Author Profile Picture and Publish Date.

• Customise and save: tweak font, colour, size and alignment in the sidebar, then click Save.

Include a clear, reader-friendly title font, a category section and a publish date, so readers can scan and navigate your blog easily. If budget is on your mind, our guide on web application development cost breaks down what to expect.

Product Templates

Create WooCommerce product templates with Divi's dedicated Woo modules.

For WooCommerce sites, Divi builds custom product templates with its Woo modules:

• Add the template: click Add New Template, choose All Product Pages, then Create Template.

• Disable the global body: click the hamburger icon and select Disable Global to make a custom product template.

• Add a row and Woo modules: use Woo Images, Title, Price, Description, Add to Cart, Rating, and Related Products.

• Customise and save: adjust each module in the sidebar, then click Save.

What a Divi Developer Does

A Divi developer goes beyond drag-and-drop to write custom code, build child themes and create custom modules.

A Divi theme developer (or Divi theme designer) is a WordPress professional who builds, extends, and customises sites using Divi and its visual builder from Elegant Themes. A skilled Divi theme website designer goes beyond basic styling. The table sums up what they do, with tools below.

Area	What they do	Example
Custom code	CSS, JavaScript, PHP	Modify module behaviour
Theme Builder	Global headers, footers, templates	Dynamic post archives
Integrations	APIs and plugins	Connect third-party data

• Custom code and extensions: custom CSS, JavaScript and PHP to change and extend module behaviour.

• Theme Builder layouts: global headers, footers, templates and dynamic archives via the visual system.

• API and plugin integration: connect third-party tools and data the standard blocks cannot handle.

• Marketplace creation: build and sell custom modules or layouts in the official ecosystem.

Key resources include the Divi Developer API (hooks, filters, and extension tutorials), Divi AI for context-aware CSS and code, and Divi Cloud to store and sync reusable layouts and snippets across client sites.

Client Case Study

Acquaint Softtech built a polished WordPress product-gallery website for an Australian interiors studio, focused on clean visual presentation.

Project at a glance

• Client: Coolum Tile & Stone Studio, an interior and tile studio in Australia.

• Sector: Interiors and retail, a visual, gallery-driven WordPress website (the kind Divi excels at).

• Goal: A clean, professional site that showcases products in an easy-to-browse gallery.

What Acquaint Softtech delivered

• A polished WordPress build with a strong product gallery and clear navigation.

• A responsive, on-brand design that presents products beautifully.

• An easy-to-manage CMS so the team can update content themselves.

Outcome

A modern, professional storefront that helps the studio present its range and win enquiries.

Proof: See the interiors website project, and verified reviews on Clutch.

This reflects a standard seen across a 5-star Clutch rating over 60+ reviews, 1,293+ clients on Upwork with a 98% success rate, and 1,300+ projects delivered by 70+ in-house engineers over 13+ years. We have also built a Divi-based tanning-salon site (The Tan Republic); if you would prefer to feature that, Acquaint Softtech can swap it in. Explore more in our case studies.

Features of the Divi Theme Builder

Divi's features include a visual builder, global elements, pre-made layouts, responsive design and WooCommerce support.

• Visual drag-and-drop builder: complex layouts without coding.

• Theme Builder templates: custom headers, footers, archives and single posts.

• Global elements: site-wide headers, footers and sidebars for a cohesive design.

• Pre-designed layouts: a large library to speed up development.

• Responsive design: every layout adapts to all devices automatically.

• Theme Customizer and custom CSS: real-time changes plus advanced styling.

• WooCommerce integration, revision history, and export/import of templates.

• Cost-effective plans (89 USD a year or 249 USD lifetime) with unlimited sites, ideal for agencies.

To keep a Divi site fast and secure over time, plan for ongoing support and maintenance, and read our official Laravel Partner story to see how we work.

Alternatives to Divi

Elementor is the main alternative: a popular builder with a free version and a lower-cost Pro license.

While Divi is comprehensive, other page builders exist. Elementor is a highly popular alternative with a free version and a Pro license often priced lower than Divi, plus an intuitive drag-and-drop interface and a large library of templates and widgets.

Why Work With Acquaint Softtech

Acquaint Softtech is an experienced WordPress and Divi partner that builds professional, affordable, custom sites.

Acquaint Softtech has deep WordPress and Divi experience across many industries, backed by a dedicated QA team and an Official Laravel Partner pedigree. We build professional, budget-friendly Divi sites, and you can use software development outsourcing or a full custom web development engagement to build with Acquaint Softtech across the USA, UK, Europe, and Australia. 

To Sum Up

This beginner's guide has shown the impressive capabilities of the Divi Theme Builder for WordPress, from its many features to ready-made templates that streamline building. With Divi, you can craft visually stunning, highly functional websites that stand out. And if you would rather hire a remote developer to build an exceptional site on a budget, Acquaint Softtech can help you start your WordPress journey across the USA, UK, Europe, and Australia.

Frequently Asked Questions