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.
- 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:
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.
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:
Then, click Add New on the Theme Builder:
Next, choose the Template Type, give it a name and click Create Template:
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:
You then enter the editing mode where you can see the elements related to your header on the left (under the Site name):
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:
Give your template a name and click Save:
Your new header is in the Template Library:
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:
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:
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 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 …):
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.