Super Simple Elementor Free Custom CSS

Table of Contents

In this article we will learn how to add custom CSS to an Elementor free page or website easily. There are three ways of doing so, follow the instructions below to complete this task in Elementor quite easily.

The three ways of adding a custom CSS to an Elementor page or website are:

  • Add CSS code via the HTML element.
  • Via the Code Snippet plugin.
  • Using the Elementor theme customiser

Method 1: Add CSS code via the Elementor HTML element

Use this method if you want to add CSS to a single page only.

Step 1: Drag and drop the Elementor HTML element

You can place this HTML element anywhere in the page, and it will work just fine.

elementor_add_custom_css

Step 2: Click on the Edit HTML icon

Super Simple Elementor Free Custom CSS 1

Click on the Edit HTML icon to the right of the Elementor HTML element. On clicking this,  an edit HTML toolbox will appear in the right of the screen.

Step 3: Add your CSS code

Super Simple Elementor Free Custom CSS 2

  1. Click on the Content tab and open the HTML code drop down.
  2. Place your CSS code within the <style></style> tags.

Method 2: Elementor free custom CSS via the Code Snippet Plugin

Advantages of using the Code Snippet plugin:

  • If you want to change or update your WordPress theme, then the CSS will still be applied.
  • It is the most convenient and efficient way to add in CSS code, since you can activate or deactivate CSS code like plugins.

Step 1: Open plugins tab of your WordPress website

Super Simple Elementor Free Custom CSS 3

Step 2: Add a new plugin

Super Simple Elementor Free Custom CSS 4

Click on the "Add New" button to navigate to the new plugins addition page.

Super Simple Elementor Free Custom CSS 5

  1. Search for the plugin "Code Snippets".
  2. Install Code Snippets by clicking the Install Now button after the search results come up.

Step 3: Activate the Plugin

Super Simple Elementor Free Custom CSS 6

Click on the "Activate" button after the plugin installation has completed to activate the Code Snippets  plugin.

Step 4: Open the plugin page and add a code snippet

Super Simple Elementor Free Custom CSS 7

  1. Open the Snippets tab from your WordPress page.
  2. Click on the Add New button to add a new snippet.

Step 5: Make a Code Snippet and activate it

Super Simple Elementor Free Custom CSS 8

  1. Give a meaning name to your code snippet.
  2. Inside the <style></style> tag, write your relevant code. This code is available below for copying.
  3. Click on the "Save Changes" button to save snippet.
  4. After saving the CSS click on "Activate" to activate the CSS code.
   
add_action( 'wp_head', function () { ?>

<style>

//CSS Code Here

</style>
<?php } );

Method 3: Using Elementor Theme Customizer

Note: Be careful before using this method because if you change your theme then you will lose this custom CSS addition.

Step 1: Open the theme customizer

Super Simple Elementor Free Custom CSS 9

Go to your website and click on the customize option in the upper navbar. This will open up a theme customizing window.

Step 2: Click on the Additional CSS tab

Super Simple Elementor Free Custom CSS 10
This will open up the CSS entry page.

Step 3: Add in your CSS code

Super Simple Elementor Free Custom CSS 11

Conclusion

Alright! Now you know how to add custom CSS to an Elementor free page or website easily. This will make you more flexible in designing unique web pages in Elementor Free.

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments