The page builder area has allowed you to create a WordPress theme without coding. Elementor (the pro version) and Divi Builder are two of the popular page builder plugins that come with a theme builder feature. The theme builder feature of a page builder works by replacing the default theme parts of your currently active theme. For instance, if you create a custom header using Elementor’s theme builder, this custom header will replace the default header of your current theme.
Be it Elementor or Divi Builder can be installed on any WordPress theme so you don’t need to change your theme if you want to install either Elementor or Divi Builder and use their theme builder feature. Previously, we have covered the differences between Divi Builder vs Elementor Pro. In this post, we will be focusing on the theme builder feature they offer.
Elementor Theme Builder vs Divi Theme Builder: Things in Common
Commonly, a WordPress theme has the following parts:
- Header
- Footer
- Single post layout
- 404 page
- Archive pages (tags and categories)
- Author page
Both Elementor Pro and Divi Builder allow you to create custom theme parts to replace the parts above. When creating a custom theme part, you can apply it whether to the entire website or specific post(s) or page(s).
In other words, you can create a custom theme part for certain posts or pages, with certain parameters such as by tags, categories or authors.
If you use WooCommerce, you can also create custom parts for your e-commerce website such as the custom single product page, custom category product page, custom archive product page, and custom shop page.
Elementor Theme Builder vs Divi Theme Builder: Key Differences
There is a fundamental difference in terms of display condition setting. In Elementor, you can set the display condition after you are done creating the theme part.
Conversely, in Divi Builder, you can set the display condition upfront before you begin to create the custom theme part.
One thing you need to know in case you have never used a theme builder before. The custom theme part you created is called a template. Both Elementor and Divi Builder come with a template manager to manage the templates you have created. In Elementor, you can manage your templates by going to Templates -> Theme Builder. While in Divi Builder, you can manage your templates by going to Divi -> Theme Builder.
Be it on Elementor or Divi Builder, you can identify each template to figure out where it is assigned to.
Elementor is better in this section with a strong enough reason. In Elementor, templates are well organized in 7 tabs.
- Theme Builder: You can find all of the templates you have created.
- Header: You can find only the header templates.
- Footer: You can find only the footer templates.
- Single: You can find only templates of the single post layout and single page layout.
- Archive: You can find the templates of the archive pages (category pages, tag pages).
- Single Product: You can find only the single product templates.
- Product Archive: You can only find the archive product templates.
The template manager of Divi Builder is not that neat. Every time you create a new template, Divi Builder will just create it, without assigning it to a certain template category as Elementor does.
Another difference. Elementor offers a number of premade templates that allow you to effortlessly create custom theme parts, in no time. Elementor even offers template kits. A template kit is a set of Elementor templates with a consistent design concept. A template kit is designed for a certain website type. An Elementor template kit commonly consists of the following templates:
- A header template
- A footer template
- A homepage template
- A 404 page template
- An about page template
- A contact page template
And other templates according to the website type it is designed for.
When creating a custom theme part, say the header, you can simply search for a suited template on the template library and change its default styling options and content.
Divi Builder also basically offers premade templates (Elegant Themes — the developer of Divi — uses the term “layout” instead of “template”). However, the layouts offered by Divi Builder are limited to page layouts. There are no header templates, footer templates or single post templates you will find on the layouts library of Divi Builder.
Elementor Theme Builder vs Divi Theme Builder: Elements You Can Add
Technically, you can add any element you want to the custom theme part you are creating. In Elementor, you can add any widget you want while in Divi Builder, you can any module you want. But of course, you don’t need to use all Elementor widgets or Divi Builder modules.
Overall, here are are the elements you can add to the custom theme part you create:
Elementor widgets
| Post Title | Site Title |
| Post Excerpt | Product Title |
| Post Content | Product Images |
| Featured Image | Product Price |
| Author Box | Product Rating |
| Post Comments | Product Meta |
| Post Navigation | Product Content |
| Post Info | Product Related |
| Posts | Product Stock |
| Nav Menu | Products |
| Site Logo | Product Categories |
Divi Builder modules
| Blog | Woo Meta |
| Blurb | Woo Price |
| Comments | Woo Related Product |
| Menu | Woo Rating |
| Post Content | Woo Reviews |
| Post Navigation | Woo Stock |
| Post Title | Woo Title |
| Woo Description |
At a glance, Elementor seems to have more elements than Divi Builder. This is true, but Divi Builder has an all-on-one module in Blurb. Blurb is a module to display dynamic content like post title, post excerpt, post meta, post links, site title, and so on. Blurb is like a simplified version of some Elementor widgets combined.
Another question you probably think of. Does Divi Builder allow to add featured image? Of course yes it does. When adding an Image module, you can turn it into a dynamic image taken from the featured image of each blog post.
Divi Builder is better than Elementor to create a custom single post layout. In Elementor, you can only customize the typography (font size, font family, font style) of the main body text as well as the text color, while Divi Builder allows you to control nearly everything, not limited to the main body text. You can also customize the typography of the heading text. If you want, you can even set different typography settings for each heading level. You can also set different typography settings for the link, bulled and numbering, and blockquote. Divi Builder is better than Elementor when it comes to customizing the single post layout.
Conversely, Elementor is better than Divi Builder to create a custom header. Despite the elements you can add, Elementor allows you to create a more creative header thanks to its popup builder feature. You can, for instance, create a full-screen menu as follows (read here to learn more).
The verdict
Theme builder is a relatively new feature in Divi Builder. It started available in Divi 4.0 which was released in late 2019 (around October). Elementor, on the other hand, already has the theme builder feature since the beginning the page builder emerged in 2016. In general, there are no too significant differences between Elementor’s theme builder and Divi Builder’s theme builder. The two allow you to create custom theme parts (header, footer, single post layout, 404 page, archive pages, author page, and so on) and set them whether to the entire website or specific post(s) or page(s).
In Elementor, you can create a more creative header thanks to its popup builder feature. Conversely, Divi Builder gives more controls to customize your custom single post layout.
