Elementor Button Widget (Beginners Tutorial 2022)
Hi guys in this Tutorial I’m going to show you how to use the button widget in Elementor. Don’t forget to like and subscribe for future Tutorials.
Okay guys so the first thing we’re going to do is drag in our button widget. The first thing you can choose on the left hand side is which type of button it is. Whether it be an info button or a warning or danger button. Next we can change the text displayed in our button. So for this Tutorial. I’m going to take away click here and I’m going to type in just click. Next on the list we can change where our button links to. So if we want to divert someone to another page we can just set the website here.
If we click on the settings icon on the right hand side we can open our page in a new window. We can also set new attributes and we can add a no follow. Moving down again we can change our alignment and underneath that we can change our size.
Now we can add an icon we can either upload one of our own or choose one of the many from Elementor. All you need to do is select which one you want to add and click on insert. Once decided which icon you want to add you can choose them whether you want to add it before or after your text. Then you can choose how much space is in between the text and the icon. Finally we come to our button id and I’m going to show you how to use these in another Tutorial.
So make sure to subscribe to the channel. Now we’re going to move on to the style tab in the top left. The first thing you can change is your typography by clicking on the first drop down menu. You can change the style of your text to make our text easier to read. I’m going to change the colour by clicking on the colour picker and dragging it to black.
If we want to change the colour of our background on our button. All we need to do is click on the colour picker on the left hand side and change it from our green to a new colour. You can also have a gradient background where you have two colours where one fades into another. As it’s a bit harder to see the colour of our text. Now we’re going to change it back to white I’m also going to go back into typography and change the size of our text.
All I need to do is click on the size slide bar and slide it upwards I’m also going to change our letter spacing and our line height. If you want to make your text italic select it on the drop down menu under style. If you want to underline your text click on the menu and select underline. You also have the option to make your text thicker select on weight and click on a number greater than what’s already displayed. You also have the option to make it thinner by doing the opposite.
Elementor also gives you the option to make your text uppercase or lowercase. Moving on from typography I’m going to change the colour location on the gradient of our background by clicking on the slide bar under angle. we can move our gradient around our button background. We also have the option to add it central to our button.
If we click on the location slide bar again we can change the spread of our gradient. If you want to change the position then you can select it in the drop down section. I’m going to select centre right and again if i click on the location slide bar i can control the spread. Moving on there we’re going to add a border to our button. There are five you can choose from but for this Tutorial. I’m going to stick with a solid border I’m next going to choose our border colour.
As always in Elementor it’s as simple as clicking on the colour palette and selecting our colour. I’m next going to make our border bigger by clicking on the up button and I’m going to round off our corners by clicking on the border radius. Now we’re going to add a shadow to our button. The first thing you can do is change the colour of the shadow. Underneath that you have the ability to change the position of the shadow by clicking on the horizontal and vertical axis up and down.
We can also change the spread of the blur. All we need to do is slide up and down on the slide bars at the very bottom. We can change the position of our shadow we can have the shadow outside of our box or we can change it internal. If the shadow is internal then we can still change the positionings of our shadow. Like before all we need to do is click on the horizontal and vertical axis.
That’s everything I’m going to show you in this Tutorial.
If you want to see how to use the advanced tab. then check out the Tutorials. Don’t forget to like and subscribe and I’ll see you in the next Tutorial thanks for reading.
