Table of Contents
Elementor tutorial is a leading WordPress page builder that helps people new to WordPress to build and design website pages with a visual building experience.
The Elementor page builder makes creating a website an absolute breeze for beginners.
In this Elementor tutorial for beginners, we will focus on equipping you with everything you need to know to get started with Elementor’s free page builder in 2023.
Getting Started with the Elementor Page Builder
The first thing that we need to do is log in to our WordPress dashboard.
Now, before we dive into Elementor page builder, it’s important to understand the difference between building website pages with WordPress vs building your website pages with Elementor.
For example, if we were to build our WordPress website pages without a website builder like Elementor, what we would do is navigate over to ‘Pages’ and then to ‘All Pages’. We will select the ‘Text Page’ down below.
If we were to build this website page with WordPress, we would have to build it in the backend.
However, with Elementor what we’re doing is building our website pages on the frontend (what you see) using a visual builder.
This means that you can visually build your website which is a lot easier than building it in the backend (this can be very tedious).
With a visual builder like Elementor, you can make changes in real-time rather than going back and forth from the WordPress backend and frontend to view your design and content changes.
Read more: How To Create a WordPress Website using Elementor Cloud
How to Install Elementor page builder
This is where the free Elementor page builder for WordPress comes in.
There are two ways that you can quickly install Elementor on your WordPress website.
Install Elementor – Option 1
The first way is to head to Elementor’s website through this affiliate link.
*The link above is an affiliate link, which means we will get a commission if you sign up to Divi (at no extra cost to you). This helps support our education-based website and we thank you in advance!
Head down to ‘Pricing’. Down here you can see all the different pricing options for the paid version of Elementor.
But if we scroll down, you can see ‘Get Started with Elementor for Free’.
Click ‘Get Started’.
Follow the step-by-step process with signing up with Elementor and then you’ll be prompted to download the Elementor plugin.
Once you’ve downloaded the Elementor plugin, head back to your WordPress dashboard.
Now, navigate down to ‘Plugins’ and then select ‘Add New’. On the top, you’ll find ‘Upload Plugin’. Click on it.
This is where you can simply upload the zip file that you downloaded from Elementor’s website and then install the plugin.
Alternatively, you can follow the second option to install the Elementor page builder.
Read more : How To Use Divi Theme in WordPress
Install Elementor – Option 2
You can search for the Elementor plugin by typing in ‘Elementor’ in the search bar. If you scroll down, you can see that we have ‘Elementor Website Builder’ with more than 5 million active installations.
Install and activate it if you haven’t already.
Now we want to show you how to use Elementor so that you can start building your website pages.
Read more : How To Create Website Pages in WordPress
How to Use Elementor Page Builder
Head back to ‘Pages’ and locate the ‘Text Page’ again. Click on it and then select ‘Edit with Elementor’.
Give it a moment to load and just like that we can start building our website pages with Elementor’s visual drag and drop builder.
Now, on the left-hand side, you can see all the widgets.
These are essential elements that you can add to your website page.
It’s important to know that your website page is made up of sections, columns, and widgets (elements).
First, what we want to do is click the ‘+’ icon and select a column structure.
We can have single, double, triple, and more column structure types. For this free Elementor builder tutorial, we’ll select the double-column structure.
Over on the left-hand side, you can see some layout editing options.
Within our layout, we can add widgets. We can access more than 40 free widgets within Elementor’s free plan.
For example, you can drag the image module and place it on the web page you’re designing.
As mentioned earlier, you can customize this widget on the left-hand side.
For instance, we can change the image size or alignment, add a caption or link.
If you decide to add a link, when someone clicks on the image, it would take them to a specific link.
Then let’s say we wanted to add another widget over here, what we would do is drag the ‘Text Editor’ widget and place it within the selected column.
On the left-hand side, you can edit the text the way you like. Here, we also have simple formatting options.
To customize the text editor, you can click ‘Style’ and then change the alignment, text color, typography, or text shadow as per your preferences.
If we click back on our website page, what we can do is click on the ‘+’ icon again and add another section – this time a single column structure.
On the section, click the ‘+’ icon and embed a video.
To do that, simply drag and drop the ‘Video’ widget. You can add a video by simply pasting a YouTube video URL under ‘Link’.
Feel free to check out other basic settings. Under ‘Style’, here you can change the aspect ratio of the video and more.
After making the changes, click ‘Update’.
From the top-left where you see the three lines, you can ‘Exit To Dashboard’ if you want to edit a different page using the same process, or if you just want to head back to the WordPress dashboard.
To continue customizing this page, simply click on the website page or navigate to the icon shown in the screengrab.
If you keep scrolling down the widgets, you’ll notice the ‘Pro’ category.
When or if you decide to upgrade to a paid plan, you will have access to more templates and widgets to further customize your website pages.
However, for today’s Elementor tutorial for beginners, we’re just going to focus on the free plan because it’s sufficient for beginners.
Read more : WordPress eCommerce Tutorial for Beginners
Free Pre-made Templates
With the free plan of Elementor page builder, you also have access to pre-made templates that have been professionally designed and built, you can actually customize these templates the way that you like.
This means that you don’t have to build from scratch like we’re doing now.
To do that, click the folder shown in the screengrab. Here, we have both free and paid pre-made templates.
Click on any of these templates to view the template. If you like the look of it, simply click ‘Insert’.
You can see that your selected template has been imported into the website page.
Now, you can begin customizing the sections, columns, and widgets as per your requirements.
For example, you can simply click the pencil icon to customize the element selected.
On the left-hand side, you can change the text, title, and then upload your own image or icon. Remember to hit ‘Update’ once you make the changes.
Then if we want to edit a section background, click on the popup. You can add a new section, edit the section, or delete it.
If you decide to edit the section, you can see the customization options on the left.
You can also see the button widget, large text title, and the video widget within this section.
It’s very easy to import pre-made templates and then simply customize each section, column, or widget the way you want.
Read more : Ultimate WordPress Tutorial for Beginners
Free Pre-made Sections (Blocks)
If you don’t want to import an entire page, you can import specific sections.
Scroll down to the bottom to click the folder icon again and then navigate up to ‘Blocks’. These are sections that you can add to your website page.
Let’s say, we want to add our contact information on the Contact Us page.
We’ll move over to ‘Category’ and choose ‘Contact’ from the drop-down. That’s going to generate these contact sections that you can import.
Again, many of these are ‘Pro’ which means that you do need to upgrade to the paid version of the Elementor page builder to be able to use them.
View a pre-made section that you like, and then click ‘Insert’.
You can now start customizing the pre-made section the way you like.
For beginners, we recommend using pre-made templates and blocks so that you gain an understanding on how the sections, columns, and widgets work when building your website pages.
That gives you a blueprint to follow and simply customize according to your needs.
That is everything we wanted to cover in this Elementor tutorial for beginners to help you get started with Elementor’s free plan.
Read More: Divi VS Elementor
Elementor Tutorial for Beginners (Video Guide)
Take the time to play around with the sections, columns, and widgets, and with practice, it won’t take long for you to get the hang of how Elementor’s visual drag-and-drop builder works.
You should now feel confident to use Elementor to build your WordPress website!
If you’re looking to watch a visual walkthrough of Elementor, we will insert a beginners video tutorial below to get you started.
Enjoy building with Elementor!
