 Now, when you're working with Elementor, there is one thing that is always constant, whether you're working with the free version or with the pro version. Every time you choose a single Element widget and you drop it onto your website, whether it's a text, whether it's an image or it is a video, you will see that every time we drop a widget here and just click on it for editing, we get three different components right here on the left-hand side, we have the content, we have the style and we have the advanced. Now, each one of these, it's more or less similar to the different widgets that we place on our canvas. So we're going to look at the content, we're going to look at the style and we're going to look at the advanced and how you can use them. Now remember, they are more or less similar, but they differ in the different options that they give you depending on the widget that you drop on site, your board. So let's look at the content. In the content is the part where we actually add our real content. For example, I want to add a proper heading right here so we can have proper heading here. Now we have our proper heading, as I type it here, you will see that it's asynchronously changing here and if I want, I can actually make this text clickable or linkable and I'll add it and choose to send it to google.com so that when I save my page and I click on it, it should be able to take me to Google on the home page. So I'm going to preview the changes by just clicking that small link and allow preferences for my browser and you will now see that this little text that I have here is actually clickable and when I click on it, I actually go to Google. There are more options for me because this is a link. By clicking on this, I'm able to add whether it should go to a new window and I can add no follow-up because I am sending it to a new window. For security reasons, I don't want to send more info onto the new page that will be opened. I can change it from 1H2 to 1H6 for example and I can change even its size from here and choose to make it really small and then I can also give it an alignment because I am working inside the content area. These are the options that I do have for me. Now if you choose to go and style this, you get more options in terms of color, in terms of typography, in terms of shadows and blend modes. Now it's up to you to actually try to check all of this and see what best suits and best fits your kind of work that you're doing. So I can change the text color by clicking on this. The reason why the text color does not work is because I've changed the blend mode and I cannot see the normal color. So I'll change it back to normal, change the color. I can change the typography of it and say that would be Ems. I can change its font family, make it for Bottle. I can also choose to add a weight or transform or style to it. Now notice there are small globes right here on the side. If I click on the custom here, I get the option of styling from my global colors. So I can choose to say I will add this as an accent color or I can choose to make it look like my buttons. And I can also change the typography here and say let it be like the accent font. So these small balls that you do have here actually giving you options from the global settings that you set up so that you can apply them to any element here. Now the beauty is if I was ever to save this site and maybe I come back two years later, I can easily go back to my site settings and then I am going to go to the global colors and I'm going to change the button color from this gray that is dark to something that is blue. And because I've made it blue, remember that we made this text adopt the color of the buttons. So it will also adopt this color because I have placed everything systematically according to the global colors. So if you want to understand how this global colors do work, I've made a video about that that is linked right in the description. But you can also just see the playlist starting from the beginning to the end on how you can use these different settings inside Elementor. Now for the final and third panel inside our setting for any of the widgets that we do have. So let's say on our heading we have the advanced section. Now the advanced section has so many options like adding effects, adding a background specifically to that element, adding a border, giving it a different position or how it will act when it is on a mobile device, on a tablet or on a desktop. So you can go piece by piece to make sure that this works out the way you actually want it to work out. So for example if I go to the advanced options, I am able to add space onto this and the different spaces do matter because we have the margin. We also have that padding. Now for you to understand margin, margin is space outside the box, the container that is of this individual item. For us to visually see this, I'm going to first add a border which is solid to my item. Now when I come back and make this zero, you will see that there is no space in between this border and this video. But if I change this to 50, you will see that the space between the border that's black and the video has increased. So that is the margin. However, if I want to increase the space between the border and the text, I need to go for that padding. And if I change this to 70, you will see that the space in between the text and the border is the one that has increased. So that's the difference between margin and padding inside any WordPress, any CSS, or any Elementor element that you will work on in the widget. Now the Z index or the Z index is for when you have two items and you want one item to be on top of the other. So let's say you have two images and you want one to overlap the other. You just need to select that particular item and then increase its Z index or the Z index for it to actually take predominance. Now let me show you by adjusting this image here and giving it a different position. So I'm going to go to the position and change it from default to absolute. Now from absolute, we are able to change the horizontal offset and the vertical offset. So I can choose to say I want this to be offset from the beginning going outside and I want it to be offset a little bit up or I can make it offset a little bit centrally to that. Now, the reason why this image is on top of this video is because the image came after, but I can choose to get this video here by clicking on this little edit button, come to the advanced section and change its Z index and give it 100 or even 10 and you will see that it goes above this image because I have changed its Z index. So we can also assign an ID to these different widgets if we are going to use custom CSS. Something happens if we are going to use custom CSS. We can also add classes to the individual widgets by using ID and class. Now we can also have motions for our individual items. For example, if I want this image to be with motion as I load the page or as it enters the page, I can choose it to fade in from the right. So if I had a lot of content and this was coming from down as I scroll up, you would actually see it jumping in from the right or the left or from down depending on what animation I had set. I can also change the duration of that so that it's fast or I can change it to be really slow as it comes in. So you can also determine the number of milliseconds that animation takes. So I can choose to select it to be 5000. That means it will be really, really slow. If it's 500, it's taking that much time. If it's 5000, it will be really, really long because that's over five seconds. So it waits for the page to load and then after five seconds, this animation will take place. We can add the background. Let's say we're going to add a static color to this. So that means my image will have a background behind that is red. But let me make that for this piece of writing here. So I'm going to go to advanced, go to the background, give it a different color and say let it be red. So you'll see the background is only for this item that I had selected. Note for the whole site, just the little item here. So remember these little panels that do come up are after we've selected a particular widget and now we start editing and adding our own customization. We already saw how to add a border but you can change so that when you hover, there is no border on that particular item. So you can give the widget a different width. Let's say you want it to be custom and you can say I wanted to just have either that pixel size which is very still or you can have it be a percentage. So let's say it's 79%. So you'll see it's only going all the way up to here and not all the way to the end of its container. So you can also do a vertical align. So you can have it aligned up in the middle or at the bottom. So we saw the options we have with position. It can be either absolute or fixed, meaning that as you scroll will not change its position but if you leave it under absolute, it will take up the space that it is supposed to and that's how you handle the different pieces or the different components of any widget. Now with this in mind, we are now more ready than ever to make our own custom widgets. If you enjoyed the video, please give it a thumbs up, share it with your friends. Don't forget to subscribe if you are new here. So thank you for watching and enjoy your day.