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 :
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
About Bizvibe Bizvibe is a B2B online platform that helps in connecting buyers and sellers…
File server investment is the smart investment anyone can make for their business. It has…
Because of the many advantages of the cloud, people are moving more and more towards…
Cloud Adoption Accelerates IT Modernization. More and more online businesses are increasing more and more…
Almost more than half of the total world’s population were using the internet by any…
Plesk is an IT service provider company which was founded in 2000 by Dimitri. The…
This website uses cookies.
Leave a Comment