The advanced tab is the same on all elements.With this tab we are able to set a custom background color, border, rounded corners and more to a element.
On any element you want to add this to simply click “advance”
To get started here, i always set a background color first as it makes doing the rest easier as you can see your changes.
So first select a background color using the color picker. I have decided to put a orange background around my heading element.
So now you can see we have added a background color.However it is far too tight to our element. To fix this we can add some padding.This creates space between our element and the background.
So i have added a 20px padding to the top and bottom and 10px to the left and right. This gives our element space between the element and the background.
Next if you want you can change the opacity of the background. So the lower the percentage the more see through the background will be.
Next we can add a border just by enter the amount we want.
We can control were the border shows so if you only want a border on the top only enter a value for the top etc.
To keep this simple i want to add a border around the whole element and i want it to be 3 pixels thick.
Next we pick a border color for our element to use, with the color picker.
Now we can see our border, we can pick a style for it we have lots to pick from.
I really like dotted and dashed. Pick the one you want from the list.
Finally we have the option to round the corners. Just enter a px amount i usually go with 15.
One last option we have is the ability to hide elements on mobile/small screens.To do this just use the yes/no toggle
Click “Save Page”
Click “View Page” to see your advanced styling in all its glory!
You can add advanced styling to any element and the advanced tab is the same for all elements.
That’s it. You’re done.