Elementor: How to Add Custom CSS to the Free Version

Recently one of our readers who did not have the Pro version of Elementor challenged us on how he could add custom CSS to his website.

Since the issue is a bit more complex, we thought that several users might face this problem. So we decided to provide a detailed article on how to get there.

In this article, we'll show you how to easily add custom CSS to an Elementor page or website.

The three ways to add custom CSS to an Elementor page or website are as follows:

• Add CSS code via the HTML element.
• Via the plugin Snippet code.
• Using Elementor's Theme Customizer

Method 1: Add CSS code from Elementor's HTML element

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

Step 1: Drag and drop the Elementor HTML element

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

Step 2: Click the Edit HTML icon

Click on the icon Edit html to the right of the Elementor HTML element. Clicking on it will bring up an HTML editing toolbox on the left of the screen.

Step 3: Add your CSS code

1. Click on the tab Contents and open the drop-down list HTML code.
2. Place your CSS code in the beacons.

Method 2: Custom CSS for Elementor via Code Snippets plugin

Benefits of using the Code Snippets plugin:

• If you want to change or update your WordPress theme, the CSS will always be applied.
• This is the most convenient and efficient way to add CSS code because you can enable or disable CSS code like plugins.

Step 1: Open the extensions menu on your dashboard

Step 2: Add a new plugin

Click the " Add »To access the page for adding new plugins.

1. Look for the plugin " Code Snippets ".
2. Install it by clicking on the button install now once the research results are positive.

Step 3: Activate the plugin

Click the " Enable »Once the installation is complete to activate the plugin Code Snippets.

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

1. Open the menu Excerpts from your dashboard
2. Click on the button New to add a new code snippet

Step 5: Create a snippet and activate it

1. Give your code snippet a name.
2. Inside the tag, write your code. This code is available below for copying.
3. Click the " Save Changes To save the code snippet.
4. After saving the CSS, click on " Enable To activate the CSS code.

Copy the code

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Method 3: Use the Elementor Theme Customizer

Please note: Be careful before using this method because if you change the theme you will lose this custom CSS.

Step 1: Open the theme customizer

Go to your website and click on the customize option on the top navigation bar. This will open a theme customization window.

Step 2: Click on the additional CSS tab

This will open the CSS entry page.

Step 3: Add your CSS code

Good ! Now you know how to easily add custom CSS to an Elementor page or website. This will make the design of unique web pages in Elementor Free more flexible.

Get Elementor Pro Now!

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. FileBird

Have you ever struggled to manage thousands of image, video or document files you uploaded to your WordPress FTP? yes or no, it doesn't matter, the important thing is to know that the WordPress Plugin FileBird will help you manage your media files with ease and bring more power to your library.

Its seamless user interface and context menu allow users to drag and drop files into folders or have the necessary rights to quickly create, rename or delete folders in the same way as you do on your computer.

With this plugin in hand, your media files will be systematically organized and you can easily select an image to insert into a page or publish it. In addition, this plugin is fully compatible with the most popular plugins, especially with WooCommerce, and also supports a large number of languages.

To learn more, visit How to manage WordPress files and folders

So if you want to give a boost to the managing your media library, WordPress Plugin FileBird could be your secret weapon.

Download | Demo | Web hosting

2. Ultimate WooCommerce Expandable Categories

Ce WordPress Plugin allows you to easily modify the long lists of boring WooCommerce categories, and replace them with different levels of sub-items in an accordion menu.

Its main functionalities are: the possibility of activating it and finally that it works automatically (no parameters required!), The support for multiple levels of categories (categories, subcategories, etc ...), the highlighting of active category, opening of all parent categories if the current category is inside, compatibility with any WooCommerce theme, responsive to wish, free updates and a very active customer support.

Download | Demo | Web hosting

3. WavePlayer

As you might guess from the name, WavePlayer is an audio player plugin that takes the waveform of the played audio file. With this plugin, you will be able to host tracks or simply integrate it with other services.cloud hosting, such as SoundCloud.

It can also be used for podcasting purposes and it offers other features such as: HTML5 support, responsive layout, WooCommerce integration, etc ...

You will also be able to visually create a playlist before publishing it. Another essential feature is its speed and efficiency.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

• How to compress and resize images on WordPress
• How to get an email address with your WordPress hosting
• How to rename images on a WordPress blog
• How to find the link to the WordPress login page

Conclusion

Here ! That's it for this tutorial, we hope it helps you add custom CSS to Elementor for free. Do not hesitate to share with your friends on your favorite social networks. 

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...