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

Getting Started with Elementor Theme Builder 

Building Your Header

After this, a New Template window appears:

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

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:

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

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:

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

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

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

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

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

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:

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

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

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:

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:

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):

Click Yes in the Document Import Settings window: 

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

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:

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:

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

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:

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:

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.

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:

Then, it’s a matter of exporting the desired element (header, footer, single post template …) by clicking the Export 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:

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

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

Exporting a Theme Fully

Exporting the theme fully follows 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 drop down. 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 …):

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:

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.