How to Add Custom CSS in Elementor for Free [4 Methods]

Updated on August 23, 2023 by Editorial Team

Elementor is a popular WordPress page builder that offers a wide range of customization options. One of the best features of Elementor is the ability to add custom CSS to your website. 

This can help you to create unique designs and add advanced functionality to your website.

Custom CSS allows you to modify the appearance of your website beyond what is possible with the default Elementor settings. 

By adding custom CSS, you can change the font, color, size, and layout of different elements on your website. 

In this article, we will explore the benefits of adding custom CSS to your Elementor website and also provide step-by-step instructions on how to add custom CSS using different methods.

Let’s begin! 

Table Of Content

What is CSS?

CSS (Cascading Style Sheets) is a styling language used to add design and formatting to web pages. It is a code language that tells the web browser how to display the HTML elements in a visually appealing way. 

CSS allows developers to customize the appearance of their web pages, including colors, fonts, layout, and positioning.

Css style sheet 1 how to add custom css in elementor for free [4 methods] from the plus addons for elementor

It is a powerful tool for web designers and developers. It allows them to create visually stunning and unique web pages without having to write complex code. 

Instead, they can use CSS to apply styles to HTML elements, which makes it easier to maintain and update the design of a website.

It’s based on a set of rules and properties that define how HTML elements should be displayed. These rules can be applied to individual elements or to groups of elements, making it easy to create consistent designs across a website.

Benefits of Adding Custom CSS in Elementor

Here are some benefits of adding custom CSS in Elementor:

  • Customization: Custom CSS allows users to fully customize the look and feel of their website. With Elementor, users can easily add CSS to their pages and widgets without any prior knowledge of coding.
  • Consistency: You can create a consistent look and feel across your website by using the same CSS styles across all pages and widgets.
  • Performance: By using custom CSS to style your pages and widgets, you can reduce the amount of code that needs to be loaded, which can improve the speed and performance of your website.
  • Flexibility: With Elementor, users can easily add custom CSS to their pages and widgets, allowing them to create unique designs and layouts that stand out from the crowd.

How to Add Custom CSS in Elementor? (4 Methods)

Adding custom CSS in Elementor is a simple process that can greatly enhance the style and functionality of your website. 

By using any one of these four methods, you can easily add custom CSS to your website and take control of your site’s style.

1) How to add Custom CSS with Elementor HTML Widget ?

One of the easiest ways to add custom CSS to your Elementor website is by using the HTML widget. 

The HTML widget allows you to add custom HTML and CSS code to your pages without having to edit the theme files.

To add custom CSS with the HTML widget, follow these simple steps:

  1. Select the page where you want to add custom CSS and open the Elementor editor.
  2. Drag and drop the HTML widget onto the page.
Drag html widget how to add custom css in elementor for free [4 methods] from the plus addons for elementor
  1. Next, Click on the HTML widget on the page to open the editor on the left.
  2. In the HTML widget editor, go to the Advanced tab and scroll down to the Custom CSS tab.
Navigating to custom css tab in html widget editor how to add custom css in elementor for free [4 methods] from the plus addons for elementor
  1. Add your custom CSS code in the text area provided.
  2. Save your changes and preview your page to see the changes.

Using the HTML widget to add custom CSS is a great option if you only need to make small changes to your website’s design. 

However, if you need to make more complex changes, you may want to consider using one of the other methods available in Elementor.

2) How to add Custom CSS with Theme Customizer?

To add custom CSS to a Classic WordPress Theme, users can utilize the Theme Customizer. This method is beginner-friendly and requires no technical knowledge.

  1. To get started, navigate to Appearance > Customize from the WordPress dashboard. 
Wordpress customizer how to add custom css in elementor for free [4 methods] from the plus addons for elementor

  1. Next, locate the Additional CSS option in the Theme Customizer. This will open up a text editor where users can add their custom CSS code.

Additional css option in customizer how to add custom css in elementor for free [4 methods] from the plus addons for elementor
  1. Users can add their custom CSS code directly into the text editor field. They can also remove the placeholder comment and add their CSS code.
  2. Once the custom CSS code has been added, users can preview their changes in real-time. If they are satisfied with the changes, they can click the Publish button to make the changes effective.

It is important to note that this method only works with Classic WordPress Themes and not FSE (Full Site Editing) themes.

3) How to Add Custom CSS with Elementor PRO?

Elementor PRO provides more advanced customization options than the free version. One of these options is the ability to add custom CSS to specific templates and widgets.

To add custom CSS with Elementor PRO, follow these steps:

  1. Open the Elementor Editor and select the template or widget you want to customize. For demo here, we will select the Text Editor widget.
  2. Click on the Advanced tab in the settings panel.
  3. Scroll down to the Custom CSS section and click on the pencil icon to open the editor.
Add custom css with elementor pro 1 how to add custom css in elementor for free [4 methods] from the plus addons for elementor
  1. Add your custom CSS code to the editor and click on the Save button.

Using Elementor PRO’s custom CSS feature can save time and effort when it comes to customizing your website. 

It allows you to make specific changes to templates and widgets without affecting the rest of your website’s design.

4) How to add Custom CSS with The Plus Addons for Elementor?

The Plus Addons for Elementor is a popular plugin that offers a range of features and functionalities to enhance the Elementor page builder. 

One of its features is the ability to add custom CSS to your Elementor containers and sections.

To add custom CSS with The Plus Addons for Elementor, first, you need to install and activate the plugin on your WordPress website. 

Once activated, you can follow these simple steps:

  1. Open the Elementor editor and select the container you want to add custom CSS to.
  2. Navigate to the Advanced tab in the editing panel.
  3. Scroll down to the Plus Extras tab and open it.
  4. In the Custom CSS section, you can add your custom CSS code.

Add custom css with the plus addons for elementor 1 how to add custom css in elementor for free [4 methods] from the plus addons for elementor

  1. Once you have added your custom CSS code, click on the Save button to save your changes.

The Plus Addons for Elementor also offers a range of pre-built CSS styles that you can use to customize your Elementor pages and posts. 

These pre-built styles are organized into different categories such as typography, buttons, forms, and more.

Along with this, The Plus Addons also offers 120+ Elementor widgets that help in enhancing the functionality of your Elementor editor.

The plus addons for elementor 4 how to add custom css in elementor for free [4 methods] from the plus addons for elementor

Check 120+ Elementor Widgets Library from The Plus Addons

20 checklist for wordpress site maintenance how to add custom css in elementor for free [4 methods] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​

    Wrapping Up

    Adding custom CSS to Elementor is a simple and effective way to enhance the look and functionality of your website. 

    With the various methods available, including using the HTML widget, WordPress customizer, Elementor Pro, and The Plus Addons for Elementor, users can choose the best option that suits their needs.

    It is important to keep in mind that while adding custom CSS can improve the appearance and functionality of your website, it is essential to use it judiciously. Overuse of custom CSS can slow down the website’s loading speed and affect its performance negatively.

    Therefore, users should be cautious and only add custom CSS that are necessary for their website’s functionality and design. 

    FAQs about Adding Custom CSS in Elementor

    Is it safe to add custom CSS in Elementor?

    Yes, it is safe to add custom CSS in Elementor as long as you are familiar with CSS syntax and best practices. However, it’s always a good idea to back up your site before making any major changes.

    How do I add custom CSS to Elementor for free?

    To add custom CSS to Elementor for free, you can use the built-in Custom CSS feature. Simply go to the Site Settings panel, select Custom CSS, and enter your CSS code in the text box that opens.

    How do I add a custom script to my Elementor?

    To add a custom script to your Elementor page, you can use the HTML widget. Simply drag and drop the HTML widget onto your page, and paste your script into the text box that appears.

    How to add custom code to Elementor?

    To add custom code to Elementor, you can use the HTML widget and the Advanced tab. Simply drag and drop the HTML widget onto your page, and paste your code into the text box that appears. For CSS and JS, use the Advanced tab and enter your code in the text box that opens.

    How do I add custom CSS in Elementor?

    To add custom CSS in Elementor, open the page or post you want to add CSS to, click on the Edit with Elementor button, and then click on the Advanced tab. From there, you can add your custom CSS in the Custom CSS box.

    Where do I put custom CSS in Elementor?

    You can put custom CSS in Elementor by going to the Advanced tab and adding it to the Custom CSS box. Alternatively, you can also add custom CSS to your theme’s stylesheet or use a plugin like Simple Custom CSS.

    What is the syntax for adding custom CSS in Elementor?

    The syntax for adding custom CSS in Elementor is the same as regular CSS syntax. You can use selectors, properties, and values to style your page or post as desired.

    Can I add custom CSS to specific Elementor widgets?

    Yes, you can add custom CSS to specific Elementor widgets by using the widget’s Advanced tab and adding your CSS to the Custom CSS box.

    How do I remove custom CSS from Elementor?

    To remove custom CSS from Elementor, simply delete the CSS code from the Custom CSS box in the Advanced tab. You can also remove custom CSS from your theme’s stylesheet or plugin settings.

    Stop Coding !

    Try the Plus Addons for Elementor and create websites that stand out from the crowd.
    Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

      Automatically Convert Figma Designs to 100% Editable Elementor Website
      X