This easy to follow video shows How Elementor Page Builder for WordPress works for Beginners.
In order for us to understand how Elementor works, we need to understand how WordPress works. Now, WordPress is built up of it’s core components that allow other pieces of code to tap into it through two major routes.
These two components are what we have as themes that are under appearances, and we also have the plugins. Now the plugins majorly are used to make changes in how the content is handled or how it is stored, while the themes are essentially built to handle the way things are styled on the front end, or how is data of a website is shared.
Create Any Website You Can Imagine Elementor Page Builder for WordPress
So for a website to actually work, it needs to have a theme if it’s built on WordPress. Now by default WordPress comes with a number of themes installed in its core. That’s why you’re never lost as a user, in that when you install WordPress you have a theme to start with.
However, you might not want it to have the look of 2016 or 17 or 15, or even the earlier versions of 14, 13, 12, and 10, but you can build this into something that looks more appealing to you, or even style it according to your brand guidelines.
Check Out Elementor Page Builder for WordPress Here
Now one of the challenges with themes is that you need to understand that with HTML, CSS and Javascript work in order for you to make any changes to what you have here. For you to manipulate your front end to look the way you want it to look, maybe you’re a non programmer or coder, Elementor sort of takes away that bottleneck that you had with you for not knowing programming.
So it gives you the tools in widgets for you to just play with different ideas and colors, so that you can put your ideas, your thoughts, and your creativity on to the screen. Elementor works with this theme that you have installed on your site, and it allows you to work and view different blocks together.
And how is this done?, through widgets. What are these widgets? what are these small building blocks that we are talking about in Elementor? So when we go to edit a post like this one and we shoot off to go and edit it with Elementor, we have this whole new interface that is thrown at our face.
And with this you’re not sure of what to do, that’s how I felt the first time I used Elementor. So to understand better how to build these widgets, we need to also understand how each component of Elementor works, so that as we tap into with our code, we are able to interact and know this is what we are doing and this is how it will be affected.
Let’s start by looking at the different individual components of what Elementor is before we dump into making our own custom widgets. So when we are working with Elementor we’re given two options; one, you can click to add a structure, or there’s another button here where you get a whole new interface that shows you a number of things to use.
Check Out Elementor Page Builder for WordPress Here
So you can use what are called blocks to build your site. For example you can click on insert here to see what this block does for you, it simply as a small component, a ready designed component that looks like this; that you can just actually delete or edit to allow you to change the content that is available here for you.
In the same place you also have the pages. Now these are more complete pieces of work that if you choose to let’s say have this page, you get more like a whole page of already designed work. So with this you’re able to edit this, and you will have your full website already here for you.
Now this doesn’t look much because we’ve not used the full width of our screen. However we can do that with the small components that we have here. For example, I can choose to go to the page layout and then have this as a full width, or I can choose to have it as an Elementor canvas.
So when I choose Elementor canvas, we get this fully blown out the web page for us that is ready to use, all we need to do is edit and add our own information, and we’ll be able to publish this on the front end.
So, those are the small components that I want to look at so that when we start making our own widgets we know what we’re working with, we have the whole picture in mind before we start even coding.
So with this, we’re going to dive into this small individual pieces of Elementor just to see what each particular component does for us and how we can best utilize it if we are making any extra widgets.
Sometimes we might not need to make that widget because it’s already made for us or we already have it hidden somewhere. So besides the pager, we can also choose to make our own templates. With what we already have here, I know I have this building block and I can choose to have this just come below as a section of this, and then at the end of the day, I can choose to save this as my own template.
So once I have saved that, it means I can be able to find it in here as a template. So after making changes to this particular template, maybe we’ve made this a little smaller, medium and so on, we can choose to make our own templates outside of this.
So if I right-click on this section and choose save template, and call it Idea 2 and save it, I can always preview this always preview this or even use it on another webpage. So you can see right here that we now have these ideas too, which I have saved as my own template and they can use it on any page.
With this in mind, we can be able to jump off to start making our own widgets. But what we’ve seen here, this is all coming free out of Elementor. However, as you go on you’ll realize that there’s even a pro version of this.
So what’s the difference between the free and the pro version? The free version gives you a number of widgets, you have about 10 of them right here, and if you go inside the templates, you also have a number of templates that are free for you to use, like these that we have here.
But along the way you get to a place where they tell you that you need to purchase a particular template because it’s not free. Or if you want to use a widget, like this Posts, you won’t be able to use it because you don’t have it in the pro version.
So if you want to get the pro version, there’s a link in the description below you can support the channel, but this will allow you to get all these other widgets that are not available for free. This helps us figure out whether we need to create a new widget or just use what is existing to make what we want.
That’s the reason why we are digging into the different components that Elementor provides. Sometimes you don’t have to go into the pro version, or you don’t have to make your own widget, but understanding the different pieces allows us to better understand what we are building.
So with this in mind, let’s jump into the different components that Elementor has so that we can fully maximize.