Elementor is designed to help you create a professional website without dealing with HTML and CSS. But if you have CSS knowledge, Elementor also facilitate it in case you want to add custom CSS to your Elementor design. This post will show you how to add custom CSS in Elementor. From a to z.
Before stepping further, let’s understand the basic of Elementor.
Elementor is a web page builder tool running on WordPress, as a plugin. A web page itself consists of two main components: HTML and CSS. HTML is a markup language governing the structure of a web page, while CSS is a style sheet language governing the design/style of the HTML elements of the web page.
In the context of Elementor, the web page structure is made when you are adding new elements (sections, containers, widgets) to the canvas area of the Elementor editor. Adding a new element equals to adding a new HTML element.
Meanwhile, applying a certain styling option to an element (e.g., setting the color) equals to adding new a CSS style to an HTML element.
As you have known, Elementor offers a bunch of built-in styling options for each element, allowing you to create a professional web page with a creative design. Still, those options sometimes are not enough. That’s why Elementor allows you to add your own styles using custom CSS.
Understanding the CSS Structure
Of course, you need to have CSS knowledge before being able to add custom CSS to your Elementor design.
New to CSS? No worries, we will start with the basic concept of CSS before covering how to add custom CSS in Elementor.
CSS is a language (style sheet language more precisely) designed specifically to style up a web page, which consists of HTML elements. Thus, you also need to have basic HTML knowledge as well before learning CSS. In fact, HTML knowledge is the prerequisite to learn CSS although you don’t need to write the HTML code yourself.
As mentioned earlier, when you add new elements to canvas area in the Elementor editor, you are basically arranging the HTML structure of your web page. You can then apply some stylings to the elements using the built-in styling options offered by Elementor. Again, applying a certain styling to an element equals to adding CSS style.
If you want to apply a certain style and turns out the style is not available in the default settings offered by Elementor, you can achieve it via custom CSS.
In general, CSS consists of the following parts:
- Selector
- Property
- Value
The parts above can be used with the following syntax:
selector { property: value };
— Selector
In CSS, selector is some kind of pattern used to target a certain element to be styled. In the CSS syntax, you can add the selector right before the opening curly brackets. Take a look at the following example:
h1 { font-size: 18px; }
On the example above, the selector is — as you can guess — h1
.
h1
itself is an HTML tag for the heading element level one. Thus, if you implement the code snippet above, all h1
elements on your page will have font size of 18px.
On the code above, h1
is called element selector. Element selector is the type of selector used to target HTML tags (h1
, h2
, body
, p
, em
, div
, etc.).
There are tens of selector types in CSS. In this article, we will only cover three of most common ones:
- Element selector
- Class selector
- ID selector
In practice, you will only use the selector types above in Elementor.
# Element Selector
Element selector, as mentioned above, is the type of CSS selector used to target HTML tags to be styled. That being said, to use this selector type, you need to know what tags available in HTML.
# Class Selector
In HTML, you can add additional information to a certain element, which you can add to the opening tag. This information is called attribute. One of the attributes you can add is class attribute. Here is an example of a class attribute:
<h1 class="extra-bold">Heading One Element</h1>
On the code above, the class attribute is extra-bold
.
The CSS class selector will scan the HTML documents (the pages on your site) to seek for all tags that have class attribute with a certain name. In CSS, you can use a class selector by adding a dot prefix on the class name. Example:
.extra-bold { font-size: 38px; font-weight:900; }
To learn more about how class selector works, take a look at the following HTML code:
<h1 class="extra-bold">This heading is extra blog</h1> <p class="extra-bold">this paragraph is extra bold</p>
As you can see, there are two tags on the HTML code above: h1
and p
(paragraph). Despite that, the two lines on the code above will generate the same output as they use the same class attribute. If you remove the class attribute on the second line, the text will turn into smaller like a normal paragraph.
In CSS, class selector can be used multiple times. Elementor itself uses class selector for its elements. So, you will deal with class selectors more often to add custom CSS in Elementor.
# ID Selector
The way ID selector works is pretty similar to class selector whereby it scans the HTML documents on your website to seek for tags that have ID attribute with a certain name. Here is an example of the use of ID attribute:
<h1 id="extra-bold">Heading One Element</h1>
To use an ID selector in CSS, you can add a hashtag symbol as the prefix on the selector name. For example, to use the ID selector of the HTML code above, the implementation is:
#extra-bold { font-size: 38px; font-weight:900; }
Unlike class selector, ID selector can only be used once on an HTML document. An ID selector should be unique, and you can’t have two ID attributes or more with the same name.
Adding Custom CSS in Elementor
You have just learned the basic concept of CSS and HTML. Now it’s time to add your custom CSS to your design in Elementor. As briefly mentioned above, Elementor uses class selector for its elements. In other words, each Elementor element has a class selector. Thus, to add custom CSS to an element, you need to know the name of the class selector of the associated element.
— How to Find Out the Class Selector of an Element in Elementor
To find out the name of the class selector of an Elementor element, you can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.
Switch to the preview mode on your Elementor editor by clicking the arrow icon on the edge of the settings panel to hide the panel.
Click the cursor icon on the Developer Tools window and point out the cursor to an element you want to find out the class selector of.
While pointing your cursor to an element, you can see the HTML structure of your page on the Developer Tools window. Your web browser (Google Chrome in our case) will highlight the element you are pointing at. You can find the name of the class selector here (the highlighted part).
On the example above, we point out the cursor to a list item on the Icon List widget. As you can see, the class name of this element is elementor-icon-list-item
. We will use this element for the custom CSS example we will cover shortly below.
One thing you need to note. Each Elementor widget and its elements has its own class selector. The Icon List widget, for instance, which consists of the icon element and text element, has several class selectors.
To ease your job in finding out the name of the class selectors of the Elementor widgets, we have created this post.
— Start Adding the Custom CSS
Now that you have understood how to find out the name of the class selector of an element in Elementor, it’s time to use it in a CSS code. As stated above, we will use the elementor-icon-list-item
class selector, which is the class selector of the list items on the Ico List widget, in this example.
First, add the Icon List widget to the canvas area and set the list items. Once done, go to the Advanced tab on the settings panel and open the Custom CSS block.
Add your custom CSS to the available field. Start by adding the word “selector” right before the class selector. Here is the example:
selector .elementor-icon-list-item{ }
Next, you can add your CSS content — consisting of properties and values — between the curly brackets:
selector .elementor-icon-list-item{ padding: 12px 17px; margin-top: 20px; border: solid 1px EAE9F2; border-radius: 5px; background-color: #FFFFFF; }
The code snippet above will result in the following output:
Alternative Methods to Add Custom CSS in Elementor
The method we have just demonstrated above is the most common method to add custom CSS in Elementor. You can use the method above to add custom CSS to a widget or a specific element on the widget.
In addition to the method above, there is another method to add custom CSS in Elementor: via global CSS. You can use this method to add global CSS to your website. To make it clearer, you can take a look at this page. As you can see, the page has some heading elements with some parts being highlighted (the green highlight). You can achieve this type of style using global CSS.
The idea is quite simple. You place the CSS code to a one place, and then use the code wherever you want.
To use this method, first, open Site Settings by clicking the hamburger menu on the top-left corner of the Elementor settings panel. Select Site Settings.
Find Custom CSS and open it. You can place your CSS code here. You can define your own class selector here. Make sure to click the UPDATE button on the bottom side to apply the changes.
We will use the following snippet as the example:
.green-highlight{ box-shadow: inset 0 -.55em 0 #47ED76; }
The code above can be used to highlight a text.
To apply the code above, you just need to add the class selector (green-highlight
) to the text widget (Text Editor or Heading) that you want to highlight.
For example, if you want to highlight a heading, you can add the Heading widget to the canvas area. Next, go to the Advanced tab. Add the class selector to the CSS Classes field (without the dot).
In Elementor, you can also select certain word(s) to be highlighted. On the following example, for instance. You can highlight the word “full-stack” only.
To do so, open the content editor on the Elementor settings panel. Add the class selector between the word you want to highlight with the following syntax:
<span class="class-selector">your text here</span>
You can replace the class-selector
with the name of the class selector you want to use. Here is the example implementation on the example above.
The implementation above will result in the following output:
To highlight other words, you can simply repeat the steps we have just covered above.
This is just an example. You can use global CSS on your website according to your needs.
Bonus: Adding Custom CSS in Elementor Free
Custom CSS is a feature available on Elementor Pro. What if you use Elementor Free and want to add custom CSS?
WordPress has a built-in feature to add custom CSS. You can use this feature to add custom CSS in Elementor Free. To access this feature, open theme customizer by selecting Appearance -> Customize menu on your WordPress dashboard. If you use a block theme, we have an article covering how to enable theme customizer in block theme that you can read.
On the theme customizer page, open Additional CSS.
Add your custom CSS to the available field. Make sure to include the class selector of the Elementor widget you want to add the custom CSS to.
Make sure to click the Publish button to apply the code. Here is the code on the screenshot above:
.elementor-button { background: repeating-linear-gradient(145.47deg, #bfe4ff 24%, #eaeff2 5%, #ceceff 55.07%, #dfd1f9 77%, #e6e3f5 93%, #eaeff2 100%); }
The code above will create a gradient button consisting of multiple colors.
A little note. Adding custom CSS to theme customizer will make it a global CSS. In other words, if you add custom CSS to style up a certain Elementor widget (e.g., button), the custom CSS will affect all the associated widgets (buttons) on your website.
If you want to target a single widget only, you can add an ID selector. On the example above, your code will be:
#button-one .elementor-button { background: repeating-linear-gradient(145.47deg, #bfe4ff 24%, #eaeff2 5%, #ceceff 55.07%, #dfd1f9 77%, #e6e3f5 93%, #eaeff2 100%); }
Next, select a widget you want to apply the custom CSS to. Go to the Advanced tab and add the ID selector (without the hashtag symbol) to the CSS ID field.
We have a dedicated article covering how to add custom CSS in Elementor Free that you can read.
The Bottom Line
Of course, you can create a beautiful web page with Elementor without dealing with CSS. However, CSS allows you to achieve more as the built-in styling options that Elementor offers are quite limited. With custom CSS, you can achieve certain stylings (when the options are not available) without installing an extra Elementor add-on.
Elementor is great when it comes to custom CSS as you can target a specific widget and its elements using a class selector. This gives you freedom to style up Elementor elements to your liking.
4 thoughts on “How to Add Custom CSS in Elementor (A Comprehensive Guide)”
A great article for a newbie like me. Thanks, Aliko. Now I understand how Elementor exactly works. I also want to learn CSS even more thanks to your post.
The most comprehensive explanation about custom CSS in Elementor I have red.
Hi
thanks a lot for your article.
I still got a problem.
I want the “product title” of my products have two different colors.
for example the product name is:
200w solar panel
I want the “solar panel” becomes yellow and “200w” becomes black.
what css code should I use?
this code will be use on single product template that the product title comes for
wooCommerce.
Hi Zahra,
Thanks for the question. We have just created a new post to answer it 🙂 https://www.wppagebuilders.com/create-two-different-colors-for-woocommerce-product-titles-with-elementor/