Elementor Theme Builder: How to Create a WordPress Theme with Elementor Pro

Elementor Pro takes WordPress page builders to another level, giving the user the ability to create WordPress themes with it. Because of this interesting feature, I explain how to build a WordPress theme with Elementor Theme Builder.

More...

Yay!

Nay!

  • You can create your own WordPress themes.
  • The theme can be created fast if you use the predefined content blocks.
  • You can export your theme (in pieces or fully) to another website.
  • You need to have Elementor installed on the destination server if you decide to export your theme there.
  • There is a learning curve until you fully grasp the idea behind creating a theme. You’ll eventually master the builder, but at least for me, it took a bit of practicing (a couple of requests to customer support) first.

Getting Started with Elementor Theme Builder 

Traditionally, WordPress page builders have been tools that are used to create a good-looking blog post or page on your website. But with Elementor Pro, you can take things further; it allows you to create a WordPress theme.

(Please Note: Here the words theme and template have been used in parallel. In fact, when you create a theme with Elementor Theme Builder, you are actually building templates). 

Building Your Header

To get started with theme building with Elementor Pro, you first go to Templates on the WordPress menu and choose Elementor Theme Builder. Then choose Add New:

elementor theme builder wordpress menu

After this, a New Template window appears:

elementor theme builder new template menu

From here, you choose the template type on the dropdown:

elementor theme builder choose template type

In my case, I chose the Header. Also, on the same screen, you can name your template.

Once these settings are done, just click the Create Template button:

elementor theme builder create template

Then it’s time to choose a Header template for your website:

elementor pick a header template

Here, you can choose a predefined template that you can then modify according to your needs. But you can also create a custom header template that can be used as a header for your theme (see the section, Creating Your Own Header Templates later on in this post).

In this example, I chose a predefined template and clicked Insert:

elementor choose header template

Then, the chosen header is shown in the editor, and you can start tweaking it to your liking:

elementor header editing mode

Here, I can right-click on top of the header and choose Edit Section to modify the style settings related to the header:

elementor edit section

I edited the background of the header by turning it green (yuck!):

elementor edit section background

Once the changes are done, it is time to publish them. To do that, you can click the Publish button at the bottom:

elementor header hit publish

Under Publish Settings, you are asked where to publish my Header; just click Add Condition:

elementor publish settings

The conditions define where this new header template is visible on your website. For instance, you can include it or exclude it on some pages. But for the sake of simplicity, choose the Entire Site option on the dropdown if you want to display the new header everywhere:

elementor where to display header

Once the publishing is done, click Save & Close at the bottom of the page:

elementor header save and close button

To take a look at how your current design looks, click the Preview button at the bottom:

elementor preview button

And there it is, your new header in action!


Building Your Footer

Building a footer is pretty much the same process as building a header. The only exception is to choose the footer in the template selection menu:

elementor choose a template footer

The steps are otherwise the same as when building a header.

Building Your Content Template

This is where you design the content template that sits between your header and your footer.

Once again, go to the Template Selection window (see the Building Your Header section on this post to see how to get there), but you choose Single as your Template Type and Post as your Post Type:

elementor single post template selection

Then, choose the template you like by clicking the Insert link at the bottom, or choose a template of your own (see the section Creating Your Own Header Templates later on this post):

elementor choose a single post template

Click Yes in the Document Import Settings window: 

elementor document import settings

Then, edit the template according to your needs. You’ll see the available blog post elements under the Single category on the left:

elementor single elements

These particular widgets (under Single category) are called Dynamic Content (Post Title, Author Box, Comments …) widgets because the information that they contain is populated dynamically.

However, keep in mind that you are not limited to using Dynamic Content widgets in your blog post design; you can also use the other elements on your template as well.

Finally, after you have worked a while with the theme, it’s a good idea to preview it. You can do this by choosing the Preview and then Settings:

elementor preview settings post source

There you can choose an existing post and see how it looks with your template. In the Preview Dynamic Content as, choose Post and on the latter field, enter the name of one of your existing blog posts you want to preview:

elementor preview settings

Then click the Apply & Preview button, and you can now see the post with a new WordPress theme:

elementor preview in action

Once you have finalized the design of your theme, it’s time to publish it to your site.

First, hit the green Publish button at the bottom. Then, in the Where Do You Want to Display Your Single window, choose Posts and All:

elementor publish post template

Finally, click the green Save & Close button at the bottom, and your blog post template is then created!

For instance, this is how my (horrible) post template looks like:

elementor template full page

Here, I created a custom header template but used the predefined footer design. Also, the content area of a blog post was taken from the selection of predefined designs that Elementor provides.

Creating Your Own Templates

When building a WordPress theme, you might also like to use your own custom content blocks instead of the predefined ones.

Here, I give you steps on how to create a custom header. This same technique can be applied to, for instance, creating custom footers as well.

To get started with designing a custom Header template, choose Templates and Theme Builder:

elementor create header template

Then, click Add New on the Theme Builder:

elementor header add new

Next, choose the Template Type, give it a name and click Create Template:

elementor header template name

The next step is perhaps a bit confusing... So instead of choosing any of the predefined templates, you should click the cross at the top to close this window:

elementor header template library

You then enter the editing mode where you can see the elements related to your header on the left (under the Site name):

elementor header site menu

However, you can also drag other elements from other element categories to your header as well.

Once you have designed the header you want, you can save it as a template. Just right click on top of the header section and choose Save as Template:

elementor save as template 1

Give your template a name and click Save:

elementor header save template name

Your new header is in the Template Library:

elementor header my templates

In future projects, when you want to create a WordPress theme with your custom header, you can find it under Library > My Templates.

Building Your Archive Pages

Creating an archive is actually pretty straightforward with Elementor. It follows the same principle as creating a header or a footer. So, take a look at how the header template is created (see Building Your Header section on this post) to get started with building the archive page.

A small difference when publishing your custom archive page is the publishing option. On the Where Do You Want to Display Your Archive? window, choose All Archives as the condition, and then choose the Save & Close button:

elementor archive page

And you are done!

Exporting Your Theme to Another Website

Let’s say that you created a cool-looking theme on your website with Elementor Pro’s theme builder. Now, you would like to export that theme to another website. 

Is this possible? Yes.

You have two ways to export a theme: either in pieces or fully. Here is what I mean.

Exporting the Theme in Pieces

When exporting a theme in pieces; first, you go to WordPress, choose Templates and then Theme Builder:

elementor export template wordpress

Then, it’s a matter of exporting the desired element (header, footer, single post template …) by clicking the Export Template link:

elementor export header template link

Your template will be exported as a JSON file to your local hard drive.

On the destination machine, you can then go to WordPress > Theme Builder, and click Import Templates at the top:

elementor import template

Once you have chosen the template file (with .json file extension), click the Import Now button:

elementor import template browse

You can then find your imported template under the Theme Builder tab:

elementor template directory

Exporting a Theme Fully

Exporting the theme fully follows pretty much the same steps as when doing the process pieces.

Go to Templates in WordPress and choose Theme Builder and then the Theme Builder tab. From there, choose the Export selection on the dropdown. Click the Title checkbox, so that all the items in the list become selected (here, I only have theme-related items on the list, like header, footer …):

elementor export theme fully

Finally, when you click the Apply button, all the selected files are exported as JSON files, which you can then import to your destination WordPress website (that has Elementor installed as well).

Once You Have Exported Your Templates ...

Importing a template is also needed, if you want to use it on the destination web site.

So log in to your destination website's WordPress Dashboard, go to Templates > Theme Builder, and import the downloaded template(s), by clicking the Import Templates link at the top:

elementor import template 1

Just make sure that you also have the necessary Elementor version installed on the destination server. If your template only consists of the widgets that can be found on the free version of Elementor, then the free version on the destination server is enough. Otherwise, if you have used the Pro widgets, the destination website needs the Elementor Pro plugin as well.

Elementor Theme Builder: The Conclusion

So far, I have relied on external theme developers to change the outlook of my blog. However, the situation is now different because I can create a theme by myself.

However, keep in mind that there is a learning curve when it comes to building your own theme. Elementor is taking the right steps on this, but for some parts, the UI (and the whole process of building a theme) takes a while to get used to.

Timo
 

I'm into building websites and writing detailed reviews about site builders. When I'm not at my computer, you can find me spending time with my family or training for marathons or for triathlons.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: