In this article, we will be discussing a very useful and cool feature called as Custom CSS feature. Using this feature you can add your own customized CSS coding inside the sections, columns, Widgets and pretty much everything on your page.
Now before we begin, note that this feature is for elementor pro users. For Ex: Assume that we have a nice looking section containing several columns and buttons. Consider that you want to set several different background colors for a column or a different alignment for a different column heading.
Of course, these kinds of things could be done easily without any code and a style area of the column or widget. But let us first see the basics so you could get the idea.
For that click on the columns icon >> then navigate to >> Advanced and then Custom CSS >> here you will see an area which is added for clean code editor for the use. Now just go to the instructions provided below this editor. You select a target wrapper element.
Target Wrapper element: – For Ex: If you want to get the entire column in blue background color and because you are now editing the column itself, this means that once you set the background color for the wrapper element, you are required to enter the code for the selector.
When you execute that code, the column’s background color will change into blue instantly and now for the headings alignment let’s see the procedure.
Headings alignment: Here we will be talking about the child element inside the column. So after getting the last child element for this heading, from inspect element in your browser, you will get 2 options :
- You could either add this last child element to the selector or
- You could enter the last child element without the selector in front of it. And if you check the heading will still align to center.
Now same goes for a custom CSS class, that you entered in the advanced area.
CSS Classes: – You use it just like with the child element. Now let us check an interesting effect, a gradient. To remove the above code from the coding editor or area and assume that you want to change the background into a linear gradient background.
So for that let us click on the button widget >> then navigate to >> Advanced and >> Custom CSS and because we want to give the background gradient only to the button and not to the entire widget, meaning the entire widget, you will need its last child element. So after getting it from the inspect element in the browser you will have to insert it in the editor along with the code.
Now if you want to give the entire section a gradient background color as well then click on the sections icon>> navigate to the Advanced >> Then to the Custom CSS and because you want the background gradient for the entire section, simply set it to the selector.
Thus now if you cannot see the gradient section yet, it may be because the section may have been overly colored. So go back to the style >> background overlay >> and give it “None”. So now you will see unlimited design options for you without having to leave the page.
Visit – Hostdens
Cheap Web Hosting Comapny In USA
You must log in to post a comment.