Elementor Advanced Widget Tab In Full Tutorial
Hi guys in this Tutorial I’m going to show you the advanced tab in Elementor. These settings and options are the same on nearly every element so it saves time if I cover them all in their own Tutorial. Don’t forget to like and subscribe for future videos let’s get into it.
Okay guys as I said at the start of the Tutorial. These options are almost the same on every element so I’m going to drag one here in at random and drop it onto the page and go on to the advanced tab. I’m not going to show you how to change any of the colours or text. I’m just going to show you the advanced tab. The first thing you’ll see when you click on the advanced tab is margin. The margin lets you change the amount of space that’s on the outside of your element.
If you want to change the margin on one side of the element. Then all you need to do is click on the grey link to change the margin on all four sides. Just click again if you click the up button. You’ll see that all the margins are changing at the same time. If you just wanted to change the margin on the left hand side click on the grey box and it’ll let you change each individual margin independently.
So if you just click on the up button you can see it’s pushing more to the left and you can put more margin on the bottom and on the top. You can also decrease the margin. So if you click on the down button. Here it will start slowly moving the element up the page. I’m also going to show you in a minute how to change the padding and this is the space inside the element like the margins.
You can change the padding or at the same time by clicking on the up button or you can change them independently by clicking on the grey box and moving each one individually. The next thing you can change is the width of the element on the page. You can set this as default full width inline or add a custom width by selecting full width.
It will allow the content of the element to span across 100% of its box. Anything other than default will give you the option to change the vertical alignment of that element. Next we’re going to move on to position and this is probably one of the cooler features that Elementor offer. By clicking on absolute it gives you the freedom to move the element wherever you like on the page.
Once you’ve positioned your element you can just click off of it and it will stay where it is on the page. If you change your mind on where you want it all you need to do is select it and start moving it around again. You can also use the horizontal and vertical orientation buttons to change the position of the element. You can use the offset slides. Next we’re going to move down to z index what this option allows you to do is layer your elements.
So if you wanted that text to sit on top of an image. All you’d have to do is change this to number one and the text will sit on top of the image. The next two boxes are CSS ID and CSS classes. These two options let you completely control how your element acts. I will show you how to use them in another Tutorials. So make sure you subscribe you can set this back to a fixed or default setting.
I’m going to move on to motion effects now so if i click on layout and motion effects. If I click on default you can see all the animation effects that you can choose from. If I select fade in here you’ll see that the element will slowly appear on the screen. If I select fade in from the left it will slide in from the left. You can also choose how slow or how fast the animation loads in.
If you want a slight delay on your animation loading in just change the time. Underneath next I’m going to be moving on to transform. In here you can change the angle of the element. So if I click on rotate and I move the bar up I can slowly spin around the text. It’s also possible to give the element a 3D effect here you can rotate the element on its x and y axis. So if you’re a star wars fan you can have your text sitting on the page like it does in the intro of star wars.
So I’ll rotate the text background to its original position and you can get an idea of what I mean. You can also add motion effects so if I change this to fade up. You’ll see that it slides and fades in from below. Next I’m going to click on background this allows you to change the colour of the background element. You can also add a hover effect on this as well you do this by just clicking on hover.
For the purpose of the Tutorial I’m just going to click on a paintbrush. As you can see there is the option to add an image or you can just change the colour of the background. If you select on the colour picker. You can choose any colour for the background of the element. You can also select how opaque the background colour is you can reset the colour of the background at any time by just clicking on the reset button. Next we’re going to go to the border tab.
If we click where it says none you can see you’ve got all your different options for your borders. I’m going to select a dashed border and from here I’m going to change the width of it like changing your margins. All you need to do is push the up button to change the width of your borders. As you can see you can change each one individually. so you can make them bigger or smaller and you can set them all the same.
If you want to change the colour of the border you need to select the colour picker on the right. you can also change the border radius by just clicking on the up buttons like before. If you’d like to add a shadow then just click here. You are also able to change the shadows colour opaqueness and position on the page. All you have to do is slide the bar up or down to add more of a shadow on the left or right or on the top and bottom.
If you want to change the thickness of the shadow. All you have to do is click on the spread button and either drag it up or down and if you want to change how blurry the shadow is. All you have to do is go to blur and scroll upwards. The final option in shadows is if you scroll to the bottom. Here you can either put the shadow inside the box or outside the box.
It is a much better effect if you don’t have the tile tilted like it is in this Tutorial. The next tab I’m going to click on is mask. This effect looks much better if you use an image. What it does is puts the image behind the background and shows it through a shape that you select in the drop down menu.
You can change the size position and whether it repeats itself. The next option we’re going to select on the left hand side is responsive. In here you can change whether the element is visible on a desktop tablet or mobile phone. As you can see I’ve chose to hide it on a mobile. So if I select a preview window in the top here for the mobile it will hide this element on the page.
As you can see the element is grey so you won’t be able to see this on the final page. To make it visible again all you need to do is click on the hide button again. The final two options are attributes and custom CSS these two options are only available on Elementor Pro.
If you are thinking about signing up to Elementor Pro there is a link in the top of the description. It is an affiliate link it doesn’t cost you any more to use but if you do choose to buy Elementor Pro. Then it does give me a very small percentage of Elementor’s profits and doesn’t cost you any more. I will also be making tutorials on Elementor Pro. So please do subscribe to the channel and like this Tutorial.
Thanks for watching and see you in the next one.
Home
Elementor Tutorials
Tutorials
YouTube Channel