While Elementor comes with various options to customize the layout of your pages. You will often not find all the complex customization options. Thankfully, Elementor comes with an option to add custom CSS to the pages.
There are various benefits of being able to add custom CSS such as making almost any kind of changes to your pages, using lightweight code instead of the heavy Elementor code and having full control over the design.
In this article, we are going to show how you can add custom CSS in Elementor.
Steps to add custom CSS in Elementor if you have the PRO version
- Select the element you want to add custom CSS to. On selecting you will see an Advanced tab in the panel on the left hand side, click it.
- Scroll down to the Custom CSS option and expand it.
- You can add all your custom CSS code in this box.
- That’s it. You can now easily add your custom CSS codes in Elementor.
If you are not subscribed to the PRO version of the Elementor plugin then you can still add custom CSS to your elements. Follow the below steps for it.
- From your admin dashboard navigate to Appearance -> Customize.
- Scroll down to the Additional CSS option on the left panel and click it.
- Add your custom CSS code in the box and Publish the changes.
Conclusion
Being able to add custom CSS gives you complete control over the design of your pages. With the help of the above tutorial you can easily add custom CSS in Elementor. If you do not have the PRO version of Elementor then you can use the built-in WordPress Theme customizer to add custom CSS.
