How to Use the Elementor Free Page Builder 2023

Building your website does not have to be expensive or a hassle. You can easily create outstanding page designs with the free Elementor page builder.

It comes with numerous features and functionalities. They make it possible to build a user-friendly and professional-looking website using your preferred style and layout.

Elementor allows you to work from the front end of your website in such a way that you can see the results of your designs. It has an intuitive editor, and you get the freedom to work with any WordPress theme.

In this tutorial, we will show you how to build the top section from scratch and edit its elements.

If you want a quicker process, you can use Elementor’s free templates. There is a variety of predesigned sections and pages. We will walk you through inserting one of these templates on your website.

You can also design your template and save it for future use.

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

How to Use the Elementor Free Page Builder in WordPress Site
Insert an Elementor Free Template
Conclusion

So let’s dive in.

How to Use the Elementor Free Page Builder in WordPress Site

In this part, you will learn how to design an Elementor block or section for a webpage. Here we will try to make a top section of a website.

Every webpage is made with a few sections or blocks that contain many different elements as well as widgets.

In our tutorial, we will use these widgets to design the top section:

Heading
Text
Button
Image

This is our basic layout of the top section. We will move forward according to this UI:

First, take a section and divide it into two columns. We have shown this in our how to get started with Elementor tutorial.
Take all the widgets (Heading, text, button, image) one by one, drag them from left to right, and drop them according to the image of our basic layout.

After that, it should look like this:

Step 1: Edit the Elementor Section

First, select the section. Then edit its layout properties according to the image below:

Layout: Content Width: Boxed, Columns Gap: No Gap, Height: Min Height, Minimum Height: 100 (VH), Column Position: Middle, Vertical Align: Middle.

Style: Color Code: #108CA1. (You can choose any color that you like)

Advanced: Padding (130, 0, 130, 0)

After changing everything, the sections’ color will be changed to blue and heading, text, button, and image widgets will be set at the middle point.

Step 2: Design the Elementor Heading

Select the heading widget. Make the changes we show in this image:

Layout: Title: “Playground for creative people”.

Style: Text color: #FFFFFF; Typography: Size- 65(px), Weight: 600.

After editing everything, the heading will look like this:

Step 3: Edit Elementor Text Widget

Again make changes to the text widget according to the image below:

Layout: Text: “We are the leading Web Design and Development company”.

Style: Color: #BFBFBF; Typography: Family- “Amarante”,Size- 25(px), Weight: 300.

Now, look at the texts and see how they are looking-

Step 4: Edit the Elementor Button

Change the button’s values under these properties:

Layout: Text: “Read More”, Size: Small.

Style: Typography: Size-15px, Weight: 600, Transform: Uppercase.

Normal Text Color: #000000, Background color: #FFFFFF.
Hover Text Color: #FFFFFF, Background color: #61CE70, Animation: Grow, Padding: (15,45,15,45)

Advanced: Change left margin value from the Advanced tab. Left margin: 100px (Before changing, deactivate ‘Link Values Together’ in the left corner).

“Link values together” allows you to easily change all the values of top, right, bottom, and left to the same number, by changing only one number for either top/right/bottom/left.

But to do this, you have to activate the “Link values together” option in the right corner. By default, Elementor saves it as “Link values together”. If you click on its icon, it will be deactivated.

Let’s see in the image how it works:

If you want to set different measurements simply click on the icon to deactivate the “Link Values Together” option. The color of the icon box will transform from ash color to white color. That means “Link Values Together” is not active.

Let’s see the button’s face after changing the values:

What is the Difference Between Normal and Hover?

If you’re new to web design, you might become confused about one thing. You saw that we have set different values for normal and hover.

Normal means the general look of the button. And hover means when you move your mouse cursor over the button, the button color and its text color will be transformed into different colors that you set.

The button will also be animated in hover mode if you set any animation. We have activated Grow animation for our button.

After hover, the button will look like this:

Step 5: Edit the Elementor Image

Now we will edit our last widget. For this, select the image first and do changes to its properties.

Layout: First, upload your image. Image size- Full, Alignment- Center
You may find sample images from Pexels, Pixabay, and Shutterstock for your website.

Style: Max width: 90, Border type: Solid, Border width: 8(top, right, bottom, left), Color: White(#FFFFFF).
Box Shadow: Color- rgba(0. 0. 0. 0.5), Horizontal- 3, Vertical- 0, Blur- 10, Spread- 0.

Advanced: No changes needed, but you may have to make changes here at the time of editing your own page.

After making all changes, preview the section from the eye icon. If everything is correct, click the “Update” button.

Let’s see how it will look on a live website. Here is the final design of our top section:

Congratulations! You have successfully made a beautiful design of a top section.

In this way, you can design every element or widget of Elementor and Elementor Pro. As a webpage contains many sections, following these steps allows you to make a webpage by designing more than one section.

If you practice more and more, think deeply, and develop your design sense, you will be able to make beautiful designs with the Elementor page builder.

Insert an Elementor Free Template

Elementor provides many templates with their page builder for free. Templates can be pages or blocks. You can easily insert them into your webpage with a few clicks.

If you use the templates, you don’t need to design web pages from scratch. Besides, you can redesign the templates if you need to. This option will save you lots of time.

Let’s see how to insert an Elementor template.

Step 1: Click on the Template Icon

Head over to WordPress Dashboard > Pages > All Pages > Home > Edit > Edit with Elementor. Now you will be redirected to the Elementor dashboard. Here you will see the template icon on the right side. Just click on that icon.

Next, a popup will come up. It’s called the Elementor Library. Here you will see 3 different types of tabs: “Blocks, Pages, and My Templates”.

Blocks: There are various types of premade designs available for you. Here you will find a lot of pre-designed sections or blocks. It includes Call To Action, Clients, Contact, FAQ, Header, Footer, Features, Hero, Portfolio, Pricing, Subscribe, Team, Stats, Testimonial, and more.
Pages: In this section, you can find every type of pre-designed page. For example, 404 Page, Blog Archive, Product Archive, Single Product Page, Single Page, Blog Post Templates, etc.
My Templates: You can also make your own designs with Elementor and save them as templates in this area. In My Templates, you will find only those templates that were designed by you. You can use these templates later when you need them.

Remember that all the templates (Menu, Blog Archive, Blog Post Templates, Woocommerce Templates) are not available in the Elementor free version.

You have to upgrade your subscription to Elementor Pro to get access to all of the templates.

Step 2: Choose a Template

By scrolling down with your mouse you will see more beautiful templates.

Select a template for your webpage and move your mouse cursor to that template.

Here you will find a “+” button to preview templates. This allows you to see how it really looks. We have chosen a template for our home page.

Step 3: Insert the Template

Last, insert the template on a webpage for further use. After inserting, you can redesign it if you want, or you can use the default design.

Click “Insert” to activate this.
Next, click on the “Update” button from your Elementor dashboard to save.

Have a look at the template on a live webpage.

elementor final template on a live web page

Now look at this web page and count the sections. You will find that the web page contains 5 sections. In the same way, you can also insert blocks or sections for your use.

You can also follow this procedure when you need to insert pro templates.

Conclusion: How to Use the Elementor Free Page Builder in WordPress Site

Elementor is one of the best free WordPress page builders in the market. It performs way better than its counterparts by providing lots of design features. It is also quite easy to use, making it an excellent choice for beginners.

Our easy step by step tutorial provides the guidance you need to build your pages from scratch or use the free Elementor templates. It demonstrates how you can add the necessary sections to ensure your users have a smooth experience on your site.

You can easily edit your pages to have an attractive design and make your website match your brand.

If you have any questions, our team of experts is always ready to attend to you.

Read Other Elementor Tutorials:

How to Use the Elementor Free Page Builder 2023