Elementor Theme Builder: Build Your Entire WordPress Site With Drag-And-Drop

Elementor Theme Builder Review

Active on over two million WordPress sites, Elementor is, by the numbers, one of the most popular WordPress page builder plugins in existence.

However, while it started as a page builder, you can now use it to build a lot more than just pages.

With Elementor Pro – the $49+ premium add-on – you can build your entire WordPress theme – header, footer, blog layout, etc.

Yes – the implications are exactly what you’re thinking – you can build essentially 100% of your WordPress site using Elementor’s visual drag-and-drop editor…and that’s awesome.

In this Elementor Theme Builder review, I’ll take you through how this powerful feature works and what it lets you do.

Then, at the end, I’ll answer some burning questions you might have, like whether or not you still need to care about your WordPress theme if you use the Elementor theme builder.

How the Elementor theme builder functionality works

Much like how the Elementor Popup Builder works, Elementor theme builder lets you take the exact same visual, drag-and-drop interface that you’ll find in the free Elementor plugin at WordPress.org and apply it to designing your entire WordPress theme.

Specifically, this means that you can design your site’s:

  • Header
  • Footer
  • Archive pages – think of this as your overall blog list page, though you can create archive pages for other content types, too.
  • Single pages – think of this as an individual blog post, though you can create single pages for other content types, too.

And if you’re running an eCommerce store, you’ll be able to design your WooCommerce shop and product pages, too.

Essentially, this lets you build your entire WordPress site using Elementor. That is, you can build everything a visitor sees.

To help you build the actual pages, Elementor gives you a ton of new widgets. For example, to create the structure for your individual blog posts, you’ll get new widgets to display a post’s title and content (pulled straight from the WordPress editor).

Finally, you’ll be able to conditionally apply these templates to different parts of your site, which is a really powerful feature. For example, you could create a dedicated layout just for a specific category of posts.

Don’t worry if how all this comes together is still a little fuzzy for you. As I go hands-on with Elementor theme builder, you’ll get a much better understanding of how everything works.

Learn More About The Elementor Theme Builder

How to use Elementor theme builder

Now that you know the basic functionality, let’s get a little more hands-on/tutorial’ly and I’ll show you how everything works.

This should give you a better idea of how everything comes together to help you build your WordPress site.

Let’s start at the beginning – I have a basic WordPress site using the Astra theme. This is what it looks like before using Elementor theme builder:

01 Astra Theme before edits

Now, as I take you through how Elementor theme builder works, you’ll be able to see how each change in Elementor affects this basic website.

Creating a new template in Elementor theme builder

Elementor theme builder works by using a template system. To access this area, you head to Templates → theme builder → Add New.

From there, you can choose the type of template you want to create. This is the specific part of your theme you’re designing:

  • Header
  • Footer
  • Archive
  • Single

02 Choose a new template type

Now, let’s go through the different parts…

Building your header

When you start building your header, you can opt to choose from 13+ pre-made header templates or build your own from scratch:

03 Start from scratch or choose a block

Then, you can design your header using the regular Elementor interface. You can see that I’ve imported one of the templates above:

04 Elementor interface

There are a few unique things going on, though. For example, I didn’t add a regular image widget to add the logo, nor did I add the menu links as regular text widgets.

Instead, I made use of those new Site widgets to dynamically pull that content from my existing site data:

05 Site widgets

For example, Elementor pulls the site logo from the logo I set in the Customizer, and it pulls the menu links from the actual menu I set by going to Appearance → Menus.

If you edit the Nav Menu widget, you can see this. And you can also see how Elementor will give you lots of options for how it should function:

06 Edit navigation menu widget

That’s a key point for how theme builder works. It is not static. Instead, theme builder helps you dynamically pull in your site’s information.

Then, when you publish your template, you’ll be able to choose exactly where to apply that template.

For example, you could apply this header sitewide so that it acts as your header on every page. Or, you could target it towards specific content, which would let you create different headers for different types of content:

07 Set where template is displayed

And once I make it live, you can see how Elementor replaces my theme’s existing header with the header that I just created in the Elementor interface:

08 New header published

Building your footer

I’ll go a little faster now because I think you have the basic idea down.

Creating a footer is the same as a header, and you’ll get the same selection of Site widgets, along with 16+ pre-made footer templates to choose from.

Just as with a header, you’ll be able to design your footer using the visual, drag-and-drop interface:

09 Design footer using drag and drop

Then, when you publish it, you can use those same rules to either target it sitewide, or target specific content.

And now, if I scroll to the bottom of my live site, you can see how Elementor has replaced the default Astra theme footer with the footer that I just designed:

10 Replaced original footer with new one

Building your blog archive page

Ok, so you’ve built your header and footer, but what about your actual content? Your posts and pages?

For blog posts, there are two parts to the puzzle:

  • Archive – this is the design for the page that lists all of your blog posts.
  • Single – this is the design for each individual blog post.

Elementor Pro lets you create both – let’s start with the archive.

To get started, you can choose from 8+ templates or start from scratch. From there, the basic concept is similar, except you’ll get a different set of widgets:

11 Choose a blog archive template

If you edit the Archive Posts widget, you’ll be able to control a lot about the layout, including multi-column designs, image sizes, metadata, and more. For example, you could move to a multi-column card approach like this:

12 Edit archive features

When you publish it, you’ll again be able to control where it shows up. You could use it for all your archives. Or, you could create different layouts for different types of archives like:

  • Author archive
  • Date archive
  • Search results page
  • Specific categories, tags, etc.

And now, you can see how Elementor has replaced the default Astra post list with the archive layout that I just created:

13 Replace original blog archive with new design

Building your blog single page

Creating a single template is similar, but you’ll get a new option when you create a template to choose the post type – like whether you want to build the layout for blog posts or pages:

14 Building your blog single page

You can choose from 7+ templates. Then, you can use a new set of Single widgets to control the design:

15 Choose from the single set of widgets

Another helpful option is the ability to preview the data from one of your real posts as you control your design – you can see that Elementor actually pulled in a real post from my site to help me visualize how things will look.

As with other templates, you’ll also get more settings for each individual widget. And once you publish your template, you can control exactly where to use your single template.

This would, for example, let you create different templates for different categories of blog posts.

Building your WooCommerce store

If you have a WooCommerce store, you’ll be able to apply the same approach to build your shop page and individual product pages, with dedicated widgets for WooCommerce product information:

16 Building your WooCommerce store

One great feature here is that you also get dedicated widgets for related products and upsells.

Building content for custom post types

This is an advanced concept, but one of the most powerful things about Elementor Pro is that you can perform all the same actions above…but for custom post types.

If you’re not familiar with custom post types, they’re basically a way to store a certain type of content. In fact, your blog “posts” are actually one “post type” – you just don’t think of them that way because they come with WordPress by default.

Basically, custom post types are a big part of what took WordPress from “just a blogging platform” to a “fully-functional content management system”.

With a custom post type, you can similarly create a “container” for something else. Some examples:

  • If you wanted to create a job listing site, you could create a custom post type for “jobs”.
  • If you wanted to create an apartment rental site, you could create a custom post type for “apartments”.
  • If you wanted to create a business directory, you could create a custom post type for “businesses”.

Get the idea? Then, Elementor Pro can help you build the designs for those custom post types.

Where this gets really powerful is when you combine it with the next feature I’m going to talk about…

Dynamic content puts theme building on steroids

Up until now, I’ve focused on how Elementor theme builder helps you include “normal” WordPress content, like the title of a post.

However, for building truly custom websites, one of the most powerful features is Elementor theme builder’s dynamic content feature.

This feature lets you dynamically insert content from custom fields and custom taxonomies into your Elementor templates.

If you’re not familiar with what a custom field is, it’s basically a way to store “extra” information about a piece of content.

For example, if you were writing a review post, you could create a custom field to store your rating for the product in question (in fact, this is how most WordPress review plugins do it).

You can add these custom fields to your regular posts or pages. Or, you can also combine them with the custom post types I mentioned above.

For example, if you created a custom post type for apartment rentals, you could further add custom fields for each apartment’s:

  • Monthly rent
  • Number of bedrooms
  • Number of bathrooms
  • Location
  • Etc.

For this example, let’s say I’ve actually implemented that (using Advanced Custom Fields and Custom Post Types UI). Now, I have a simple custom post type with some custom fields that looks like this:

17 Implement advanced custom fields

Now, I want to use Elementor theme builder to display all of that content.

Here’s how it works…

First, you could create a single template for the Apartment Rental post type:

18 Select post type

You could use the regular Elementor Single widgets to add the title, image, and content:

19 Add in title image and content

But what about those custom fields? How can you include those in the design?

That’s where Elementor’s Dynamic feature is so powerful.

To pull in the custom field information, you can add a regular Elementor Text Editor widget. Only now, you can click on that Dynamic option:

20 Click the dynamic button

You can select the ACF Field option, which is the plugin I used to create the custom fields. Then, you’ll be able to select each individual custom field, including an option to prepend and append information:

21 Edit the ACF field

And that dynamically pulls in the custom field information, which means that this information will change for each apartment rental that you add.

Repeating the process for all the custom fields would get you something like this, where all of that information is pulled dynamically from the custom fields:

22 Repeating the process for other custom fields

You can also use dynamic data in other ways, like dynamically setting a section’s background image.

And this is what makes Elementor theme builder so powerful!

With it, you can build 100% custom WordPress sites that go beyond the normal post/page dynamic without the need to code.

Normally, building these types of custom WordPress sites would require at least some baseline technical knowledge. But with Elementor theme builder, you can do pretty much everything with drag and drop.

Do you still need a WordPress theme with Elementor theme builder?

First off, every single WordPress site needs a theme – it’s a basic requirement for WordPress. So yes, you will still need to at least install a theme alongside Elementor theme builder.

I think the more relevant question is “do I need to care about which theme I use if I’m using Elementor theme builder?”.

The technical answer is “no”. You do not need to care about your theme if you’re planning to use Elementor theme builder for everything.

In fact, Elementor created their own ultra lightweight theme that’s designed to pair with theme builder. It has no features – it’s literally just a lightweight foundation for Elementor theme builder.

However, I think you should still care about your theme, even if you do not need to.

Here are a few reasons why:

  • Global styles – Rather than using Elementor to style every element from scratch, you can set up global styles in your theme’s customizer settings. This helps ensure a consistent design and makes it easier to switch things up in the future.
  • Save time – Sometimes, you might not want to use Elementor Pro for literally everything. For example, do you really want to have to design your 404 page with Elementor? A good theme will handle the basic stuff for you, so that you can just use theme builder for the parts you really want to change.
  • Integrations – Some themes will offer direct plugin integrations that can save you time, like integrations with WooCommerce or LMS plugins.

So, taking that into account, what’s the best theme to pair with Elementor theme builder? There are a few good options, but the Astra theme is probably the best starting point for most use cases.

Elementor theme builder helps you build custom WordPress sites

While Elementor theme builder will require a little more sweat equity than using a pre-built WordPress theme, it gives you the ability to fully customize every single aspect of your WordPress site using the same visual, drag-and-drop interface that you use to build your page content with Elementor.

Beyond that, the conditional display rules let you further customize your site by giving you the ability to create different designs for different types of content.

Finally, the dynamic content functionality is incredibly versatile for going beyond basic blog or brochure sites. It unlocks the true power of WordPress by letting you dynamically bring in content for custom content types (the examples I gave you above are really only scratching the surface).

Whether you just want a little more control over the looks of your blog or you want to build your own custom site or eCommerce store, Elementor theme builder is one of the best WordPress plugins you’ll find for this purpose.

Plus, Elementor theme builder is part of the normal $49 Elementor Pro package, which means you’ll also get access to all the other Elementor Pro features for the same price (including the Popup Builder).

To sum it up, from both a functionality and a value perspective, Elementor Pro and theme builder is a no-brainer, and there’s a reason why Elementor has exploded in popularity over the past few years.

Get Elementor Theme Builder

 

Disclosure: This post contains affiliate links. This means we may make a small commission if you make a purchase. This doesn’t cost you any more but it does help us to continue publishing helpful content – thank you for your support!

Get Our Best Content In Your Inbox

Insights to help you build, grow, and profit from your content.

*Includes email updates. Unsubscribe anytime.