Elementor Pro Tutorial: How to Use the Elementor Theme Builder 2023

We all know that the design of your website can greatly impact your web page ranking and traffic. It affects how search engines crawl your site and the willingness of your visitors to stay on the site and take the desired action.

But improving your site without any technical expertise can turn out to be an impossible task. You could end up making it worse than it originally was.

Elementor Pro makes everything easier. It provides a theme builder feature that you can use to customize different components of the website, such as the header, footer, and single blog posts.

The best part about using Elementor Pro is that it is easy to use and fast. You can have a beautiful and professional-looking website with minimal effort, as you will see in this tutorial.

If you are using Elementor, upgrade to Elementor Pro to take advantage of these perks.

Here’s a quick index to help you navigate this article:

How to Create a Header/Footer Using Theme Builder
How to Create a Page
How Do I Save a Template to Use Later?
How to Create a Blog Archive/WooCommerce Product Archive Using Elementor Theme Builder
Create a WooCommerce Archive
How to Create a Single Blog Post Template/ WooCommerce Product Post Template
Create a WooCommerce Single Product Page
Wrapping Up

Let’s get started.

How to Use the Elementor Theme Builder in WordPress Website

First, you need to know how many types of components a website may have. We have created a list:

Header
Footer
Page (Home/About Us/Contact Us/ Privacy Policy, etc.) (All General Pages)
Archive (Blog Archive/Product Archive)
Single Post Template (Blog/Product)

We will try to cover all of these things in our tutorial.

Let’s make a website structure. We will move forward according to this site structure:

Home
About Us
Blog

Blog Post 1
Blog Post 2
Blog Post 3

How to Create a Header/Footer Using Theme Builder

In this section, we will create a header and footer for our website.

Before you get started, create a menu from the WordPress dashboard. Include these pages in your menu: Home, About Us, Blog.

Now go to the WordPress dashboard, Then Templates > Theme Builder > Header > Add New Header

After clicking “Add New Header”, a popup will appear.

Select the type of template you want to create. Choose “Header”.
Next, give a name to the template. You can give it any name you wish.
Click Create Template.

Select Header from the left search box.
Then choose a template that you like most.
Insert it into your webpage.

Upload your Site Logo.
Check that your menu is correct.
You can also customize the design as you wish.

After that, you have to add the condition of the menu. You’ll first need to decide if you want to insert it into the entire site or just a specific page. Head over to the Publish button and click on it.

After that, a popup will appear in front of you, prompting you to set the condition.

Select “Entire Site” if you want to see the header on all pages.
If you want to set the header to a specific page, choose the page that you want it to appear on.
Finally, save the changes.

You can also set more than one condition by clicking the Add Condition button again.

Create a Footer: All the processes are the same as the ones we used when we created the header.

Templates > Theme Builder > “Footer” Tab > Add New Footer > Choose Template Type(Footer) > Give a name (My Footer) > Create Template > Choose a Template from Elementor Library > Insert it > Edit (If needed) > Add Condition (Entire Site/Specific Page) > Save and Close.

Look at the footer template that we have chosen for our website:

How to Create a Page (Home/ About Us/ Contact Us)

Now we will learn how to create general web pages, such as the home page, about us, contact us, privacy policy page, etc.

Let’s create the “About Us” Page first.

Go to Pages > All Pages > About Us > Edit > Edit with Elementor

You can also customize it manually with the widgets.

Insert sections and columns.
Drag and drop your essential widgets.
Provide contents to all widgets: image, video, text, etc.
Finally, change the values of properties to design them.

If you want to add a template, simply click on the template icon.

After clicking the Add Template icon, you will see a collection of Templates from the Elementor library.

Choose a template for your “About Us” page.
We are choosing the “Digital Agency- About page” template.
Insert the template.
Redesign it if needed.
Finally, click on the Update or Publish button.

See, our About Us page is now live:

Following these steps, you can create all the other pages you need, such as the home page, privacy policy page, landing pages, etc. All the processes are the same.

How Do I Save a Template to Use Later?

Suppose you have made a design manually or redesigned a template. How can you save it as a template, so that you can use it as needed in the future? Saving it is very simple.

After completing your design:

Click this icon to find “Save Options”
Now click “Save as template”.
Give a name to your template.
Save it.

Your template will be saved in the Elementor library. You will find the template in the “My Templates” section. You can preview the template and insert it any time you need it.

How to Create a Blog Archive/WooCommerce Product Archive Using Elementor Theme Builder

Blog archive or Woocommerce archive pages are different from all other pages. You can’t make them in the same way as the general pages. But what do I mean by “blog archive”?

“Blog archive” refers to all the blog posts you’ve previously made, which will be shown on a single page with a featured image and summary of your post.

“Woocommerce archive” refers to all the products you sell being shown on a single page, but with less product information than the full catalog page.

Before you start, publish some posts first.

Go to WordPress dashboard > Posts > All Posts > Add New > Write Post > Publish.

After publishing a few posts, go back to the WordPress dashboard again. Now go to Templates > Theme Builder > Archive > Add New Archive

Choose template type: Archive
Give any name to your archive template: My Blog Archive.
Now click on Create Template.
Select Archive from the search box.
Choose a template from the Elementor library.
Insert the template.

Redesign the template if needed.
Add a condition to it: All Archives.
Save and Close.

Here is our “Blog Archive”:

Create a WooCommerce Archive

First, go to WordPress Dashboard > Templates > Theme Builder > Archive > Add New Archive (Same as blog archive)

Then select Product Archive from the search box > Choose a Template > Insert > Redesign it if needed > Add Condition > Save and Close.

How to Create a Single Blog Post Template/ WooCommerce Product Post Template

In this section, we will show you how to create a single blog post template.

First, log in to your WordPress dashboard. Next, go to Templates > Theme Builder > Single Tab > Add New Single.

Select the type of template: “Single”
Select post type: “Post”
Give a name to your template: “Mingle”
Last, Click on “Create Template”
You can design it manually or insert a template.
Choose Single Post from the search box. (If you want to insert a template).
Choose a blog post template from the Elementor library. Scroll down to show more templates.
Insert a template to your page as a single blog post template.

Make changes to the template if needed.
Add a condition to it: Post and All.
Click “Save and Close”.

Here is our single blog post template:

Create a WooCommerce Single Product Page

You can create a WooCommerce single product page in the same way as a single blog post template.

WordPress Dashboard > Templates > Theme Builder > Single > Add New Single > Type of Template (Single) > Select Post Type (Post) > Select “Single Product” from the search box of Elementor library > Choose a Template > Insert It > Add Condition “Post” and “All” > Save and Close.

woocommerce single blog post in elementor

Wrapping Up: How to Use the Elementor Theme Builder

Upgrading your website using the Elementor Pro theme builder is easy-peasy. You don’t need to be an expert in coding or hire a web designer to get it done.

Whether you want to create a WooCommerce Single Product Page or improve the design of your blog, the Elementor theme builder will help you get it done to your taste and preference.

You can create a Home and About Us Page that is compelling and represents your brand. The theme builder also allows you to create templates and save them for future use, making your work easier.

If you have a question, leave a comment below and we’ll get back to you.

If WPCITY‘s this post helped you, kindly share it on Facebook, Twitter, and LinkedIn.

Others Elementor Tutorials:

Elementor Pro Tutorial: How to Use the Elementor Theme Builder in 2023

How to Use the Elementor Theme Builder in WordPress Website

How to Create a Header/Footer Using Theme Builder