You might have known it. That Elementor Pro comes with a theme builder feature. A feature that eliminates the coding skill requirement to create a WordPress theme. To better understand how a theme builder works, you need to understand the components of a WordPress theme first.
In general, a WordPress theme consists of a header, footer, single post, archive pages (category pages, tag pages, author pages), search results page, error 404 page, and so on. The layouts of those components are controlled by template files belong to the associate theme.
Over the years, WordPress users had to rely on a theme to create a unique website. And then theme builders emerged. Elementor Theme Builder itself was firstly introduced in 2018, along with the release of version 2.0. Since then, WordPress users (Elementor users in particular) have been able creating custom templates — using Elementor visual editor — to replace the default templates of the theme they use. This allows any WordPress user (including those who don’t know PHP) to be a professional website developer using WordPress.
Elementor Theme Builder: A Short Intro
If you rely on a theme to customize the appearance of your website, then there are many limitations you have to face. Today’s modern WordPress themes offers more customization options, yet it would be great if you could customize every single part of your website without limitations. Using a theme builder like Elementor Theme Builder allows you to customize every single part of your website — in a visual way — without any limitation. You can set your own layouts, elements, colors, typographies, behaviors, and so on. Everything is drag and drop.
The display condition supports even allows you to set where a certain custom template to be applied. In other words, it is possible for you to have distinct parts (e.g., headers) on a single website.
11 Things You Can Do with Elementor Theme Builder
Please note that the Theme Builder feature is only the pro version of Elementor. So, make sure to upgrade your Elementor to the pro version if you haven’t done so.
Here are eleven things you can do with Elementor Theme Builder:
1. Create a Custom Header
As we said above, Elementor Theme Builder allows you to customize every single part of your website, including the header. You can use Elementor Theme Builder to create a custom header template and the template you created will replace the default header template (header.php) of your theme. You can create the custom header using the visual editor of Elementor. No need to deal with code at all. You have limitless options to customize your header and can add any element as well. You can read our previous article for more detailed instructions on how to create a custom header in Elementor. Several examples of the elements you can add to your custom header are:
- Site Logo
- Nav Menu
- Button
- Social Icons
You can also set custom header behaviors like sticky, hide on scroll, and so on.
Elementor Theme Builder supports display conditions to allow you to assign a custom header template to specific pages or the entire site. You can also combine the theme builder of Elementor with its popup builder to create a full-screen menu or off-canvas menu. If you need to add a mega menu, you can install JetMenu.
2. Create a Custom Footer
The WordPress theme you use has a template file named footer.php which controls the layout your site footer. Elementor Theme Builder allows you to create a custom template (or more) to replace that default theme template. Same as the header, you can also set where your custom footer to be applied thanks to the display condition support.
You can either create the custom footer template from scratch or from a premade template. Elementor offers over thirty premade footer templates you to streamline your workflow.
You can read our previous article for more detailed instructions on how to create a custom footer in Elementor.
3. Create Custom a Single Post Template
Today’s modern WordPress themes offer customization options whereby you can set the blog post layout, typography settings, the components (features image, meta post, and so on), text color, and so on. Still, the customization options have limitations. Plus, most themes don’t allow you to use different blog layouts for different blog posts.
The display condition support allows you to assign a custom single post layout to specific blog posts. When assigning a custom single post template, you can use the following parameters:
- Post with certain tags
- Post under certain categories or subcategories
- Post written by certain authors
You can also manually select blog post(s) you want the custom template to be applied to. You can read our previous article to learn how to create a custom single post template in Elementor. Several Elementor widgets you can use to create a custom single post template are:
- Post Title
- Post Excerpt
- Post Content
- Featured Image
- Table of Contents
- Author Box
- Post Comment
- Post Navigation
- Post Info
4. Create a Custom Page Template
Both blog post and page are two of the default content types you can add to WordPress. In most themes, they have the same or similar layouts. If you want it, you can create a custom template for page so that you can set your own layout as well as the components.
5. Create a Custom Template for a Custom Post Type
To extend the functionality of WordPress, you can create a custom post type so that you can add more content types other than blog posts and pages. For instance, if you want to create a bike rental website, you can create a custom post type to add the bike items you offer. Or if you want to create a song database website, you can also create a custom post type add the song items.
You can use plugins like Custom Post Type UI or Pods to create a custom post type. You can then create a custom template using Elementor Theme Builder to display the content of your custom post type.
The ability to set display condition in Elementor Theme Builder allows you to assign a template to a custom post type other than default WordPress content types.
When creating a custom post type, you can also add custom fields to accommodate the custom data you want to add to your custom post type. ACF, Pods, JetEngine are great options to create custom fields in an Elementor-powered WordPress site.
6. Create Custom Archive Pages (Categories, Tags, Authors)
Most WordPress themes have an archive.php file. It is a file template used to control the layout of the archive pages on your website. In this context, archive pages refer to category pages, tag pages, and author pages.
Elementor Pro comes with a widget called Archive Posts. The widget will display the articles from an archive where a certain template is assigned to. For instance, if you add the widget to the category archive, it will display the articles under the current category.
You can read the following articles to learn more about how to create a custom category page template and author page template in Elementor:
- How to create a custom category page template in Elementor
- How to create a custom author page template in Elementor
7. Create Custom Search Results Page
WordPress has a built-in search feature to allow you and your visitors to find a certain content on your website. The appearance of the search results page is controlled by a template file named search.php. Elementor Theme Builder allows you to customize the appearance of the search results page by creating a custom template. You can add handy elements such as search box to your custom search results page.
In addition, you can also set the layout of the search results page as well as styling up the elements like titles, excerpts, and thumbnails.
You can read our previous article to learn more about how to create a custom search results page in WordPress using Elementor.
8. Create Custom 404 Error Page
When a visitor accesses a certain URL on your website and it contains no content, your web server will display 404 error message. Each WordPress theme has a file template to handle this error message. If the 404 error page of your theme looks ugly to you, you can create a custom template to replace it.
You can add useful elements like “back to home” navigation to make your visitors stay on your website. You can read our previous article to learn more about how to create a custom 404 page in WordPress using Elementor.
9. Create Custom WooCommerce Single Product Page
Do you use WooCommerce to create an online store? If yes, you can also use Elementor Theme Builder to customize some parts of your store. WooCommerce itself consists of the following main components:
- Shop page (yoursite.com/shop)
- Single product page
- Product archive pages
- Checkout page
- Cart page
- Account page
One of the WooCommerce components you can create the custom template of is the single product page. Here are the widgets you can use when creating a custom WooCommerce single product page with Elementor Theme Builder:
- WooCommerce Breadcrumbs
- Product Title
- Product Images
- Product Price
- Add To Cart
- Product Rating
- Product Stock
- Product Meta
- Short Description
- Product Content
- Product Data Tabs
- Additional Information
- Product Related
- Upsells
10. Create Custom Product Archive Pages
Just like blog posts, when adding a new WooCommerce product, you can also assign the product to a certain category and tag. WordPress themes also have a default template to display WooCommerce product categories and tags and Elementor Theme Builder also you to create custom templates to replace them. You have the following widgets to create a custom product archive page for WooCommerce:
- Archive Title
- Archive Products
- Archive Description
11. Create Custom Shop Page
After installing and activating the WooComerce plugin, you will automatically have a new page on your WordPress site. The page displays all your WooComerce products. You can access the page via the URL yoursite.com/shop. Elementor Theme Builder also allows you to customize this page by creating a custom template.
What about other WooCommerce components?
Until Elementor Pro version 3.2, you can’t create custom templates for the checkout page, cart page, and account page. If you really want to create custom templates for these components, you can install JetWooBuilder, an Elementor add-on from Crocoblock dedicated to creating a WooCommerce site.
The Bottom Line
The era has changed. You no longer need to rely on your theme to customize your WordPress site. Instead, you can use a theme builder plugin which offers way more options to customize your website, in a visual way. Elementor Theme Builder is one of which. You can use Elementor Theme Builder to customize every single part of your website without touching a single line of code. From the header, footer, single post template, and so on.
The ability to display custom post type content as well custom field data are two things most WordPress themes can’t do. By taking advantage of these features, you can create a complex WordPress-based website with minimum plugins possible.
Display condition is another reason feature why Elementor Theme Builder is worth trying. Elementor Theme Builder is particularly great if you dreamed of becoming a professional web developer yet have no programming skills. You can go deep into custom post type and custom field to become a professional web developer using WordPress if you have no programming skills.
1 thought on “Elementor Theme Builder: 11 Things You Can Do with It”
Elementor Theme Builder sounds like a game-changer! The ability to
customize every element of your website visually, from the header to the footer,
is a dream come true for web designers and developers. It’s like having a magic
wand for web design. I can’t wait to give it a try and unlock its full
potential! 🚀💻 #WebDesignMagic