 Inoda first to understand how Elementa works, we need to understand how WordPress works. Now, WordPress is built up of its co-components that allow other pieces of code to tap into it through two major roots. 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. Why the themes are essentially built to handle the way things are styled on the front end or how data of a website is shared. 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 never lost as a user in that when you install WordPress you have a theme to start with. However, you might not want to have the look of 2016 or 2017 or 2015 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. Now one of the challenges with themes is that you need to understand the way 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've had with you for not knowing programming. So it gives you the tools and widgets for you to just play with different ideas and colors so that you can put your ideas, your thoughts and your creativity onto the screen. Elementor works with this theme that you have installed on your site and it allows you to work and build 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 and 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 it 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 jump into making our own custom widgets. So when we are working with Elementor we are given two options one you can click to add a structure or there is another button here where you get a whole new interface that shows you a number of things to use 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 adds a small component, already 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'll 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 webpage 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 that 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 are working with we have the whole picture in mind before we start even coding so with this we're going to dive into the 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 pages 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 idea2 and save it I can 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 I 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 realize that there is 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 this 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 post you will not 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 is 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're digging into the different components that Elementor provides sometimes you don't have to go into a 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 maximise it