How To Add Custom CSS In Elementor?

How to add custom CSS in Elementor

If you are anything like me, you have a lot of ideas for your website that you want to see come to life. And although Elementor makes it easy to create unique designs with drag-and-drop features and pre-built elements, sometimes nothing can replace the power of pure CSS. In this article, we will cover how to add custom CSS in Elementor so that you can take your website design even further!

3 popular ways to add custom CSS in Elementor

There are various ways to add custom CSS in Elementor. Let’s have a look at our top 3 ways to do so.

Use the WordPress customizer.

To add custom CSS code in Elementor, follow these steps:

Use a CSS Plugin

There are various plugins available in the market, like Simple CSS, Custom CSS Pro, and CSS Hero, that allow you to add custom CSS to Elementor.

To start, go to Custom CSS & JS > Add Custom CSS and click on Add CSS Code.

A basic CSS editor will appear to the left. You can choose to load the CSS code internally or in an external stylesheet using the configuration options on the right. Additionally, you may choose whether the code belongs in the header or the footer: 

adding custom css in wordpress

Once you’re done editing the CSS code, hit the Publish button. 

Note: Switch to a front-end view to see the code in action.

Using HTML widget

You can use an HTML widget to add custom CSS to Elementor. All you need to do for this option is drag and drop the HTML widget and add your CSS code within a Style tag. 

Custom CSS is a way to add custom code to your website. It can be used for many things, from changing the look and feel of your website to adding extra functionality.

Now that you know how to add custom CSS, you can use it on your websites by following these steps:


Now that you know how to add custom CSS, you can take advantage of Elementor’s flexibility. The next time something isn’t behaving as expected, try adding some CSS code instead of fixing it with a plugin or theme change, try adding some CSS code!

Relevant Content

Related Posts

Komal Bothra February 8, 2023

What Are Thumbnail Sizes In WordPress?

In WordPress, thumbnail sizes refer to the predefined sizes of images used to represent other

WordPress Glossary
Komal Bothra February 7, 2023

Why FAQs Are Essential For Your WooCommerce Store?

An FAQ, or Frequently Asked Questions, the page is a common addition to websites. It

Komal Bothra February 7, 2023

Why PageRank Is The Most Important Factor For SEO?

You've probably heard of SEO before, but what are the main factors in getting a


Get started with Seahawk

Sign up in our app to view our pricing and get discounts.