Custom CSS (Pro)

This article explains how to add custom CSS to WordPress with Elementor. With Elementor Pro, you can add custom CSS to every section, column or widget. If you want to get even more control over the CSS styling of the page, you can use the custom CSS feature to add CSS to every element in the page.

Add Custom CSS to Columns

1. Click on the column to get the left column settings panel.

2. Go to Advanced > Custom CSS

3. Add your CSS code to the clean code editor.

4. To give the column a red background color, I insert the following code: 

selector {background-color:red;} 

The column will instantly receive the red background color.

selector .elementor-heading-title {text-align:center;}

Add a Gradient Effect in Elementor Using Custom CSS

I want to give the button a linear gradient effect. 

1. Click on the button to get the left widget settings panel. 

2, Go to Advanced > Custom CSS 

3. I will now insert the gradient CSS code to the class 'elementor-button':

.elementor-button {
background: rgba(255,106,0,1);
background: -moz-linear-gradient(left, rgba(255,106,0,1) 0%, rgba(238,9,121,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,106,0,1)), color-stop(100%, rgba(238,9,121,1)));
background: -webkit-linear-gradient(left, rgba(255,106,0,1) 0%, rgba(238,9,121,1) 100%);
background: -o-linear-gradient(left, rgba(255,106,0,1) 0%, rgba(238,9,121,1) 100%);
background: -ms-linear-gradient(left, rgba(255,106,0,1) 0%, rgba(238,9,121,1) 100%);
background: linear-gradient(to right, rgba(255,106,0,1) 0%, rgba(238,9,121,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6a00', endColorstr='#ee0979', GradientType=1 );
}

Add a Gradient Effect to Sections

1. Click on the section to open the panel. 

2. Go to Advanced > Custom CSS 

3. Add the gradient effect CSS code to the section 

selector {
background: rgba(190,147,197,1);
background: -moz-linear-gradient(top, rgba(190,147,197,1) 0%, rgba(123,199,204,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(190,147,197,1)), color-stop(100%, rgba(123,199,204,1)));
background: -webkit-linear-gradient(top, rgba(190,147,197,1) 0%, rgba(123,199,204,1) 100%);
background: -o-linear-gradient(top, rgba(190,147,197,1) 0%, rgba(123,199,204,1) 100%);
background: -ms-linear-gradient(top, rgba(190,147,197,1) 0%, rgba(123,199,204,1) 100%);
background: linear-gradient(to bottom, rgba(190,147,197,1) 0%, rgba(123,199,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be93c5', endColorstr='#7bc7cc', GradientType=0 );
}

4. Remove the background overlay.

In this article we've seen how to add custom CSS to any WordPress page using the Elementor Page Builder Pro plugin for WordPress.