We are on vacation till 12 July. Support replies might be slower than before. Thank you for being patient and considerate.

wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin

How to add Custom CSS in Elementor: 4 Easy Methods

Dipa ShahaDipa Shaha Updated on: August 6, 2022 Elementor 5 Min Read
how to add custom css in elementor

Looking for ways to add Custom CSS in Elementor?

Extending the already amazing Elementor designs by adding custom CSS can give you an unbeatable edge over your competitors.

So, why not use some Elementor custom CSS and stand out in the crowd of this highly competitive digital world, right?

There is no reason why you shouldn’t.

But how to add custom CSS to the drag and drop Elementor page builder?

Well, you can add custom CSS in Elementor in many ways. To know more details on how to add custom CSS in Elementor keep on reading…

Contents hide
What is CSS?
Why should you add custom CSS in Elementor site?
How to add custom CSS in Elementor: 3 Different Methods
How to fix Elementor custom CSS not working Issue
Frequently Asked Questions
Wrapping up with Elementor custom CSS

What is CSS?

what is css how to add custom css in Elementor

CSS (Cascading Style Sheets) is a rule-based style sheet language that one uses to change the layout and look of web pages built with a markup language such as HTML or XML. Using CSS is an efficient way of web design because it keeps both content and style on a separate file giving you the most flexibility and ease of use.

Why should you add custom CSS in Elementor site?

Well, it’s not mandatory because Elementor itself provides all the customization options you need to create beautiful websites. However, if you are someone who knows how to code and want to use your creativity to enhance the look of the site, then you can add Custom CSS in Elementor.

  • Using custom CSS in Elementor you can override the theme’s style to implement a new style. Suppose, you love the whole look of a page that your theme provides but you want to change the layout a tiny bit in one section, then you can take the help of Elementor custom CSS to do that.
  • Similarly, you can also override Elementor premade template’s design using the custom CSS code snippets.
  • You can also custom design your website to look different on different devices by adding custom CSS code snippets to Elementor.

👉👉 Check how to use the Elementor flexbox container to create device friendly websites.

How to add custom CSS in Elementor: 3 Different Methods

Adding custom CSS is not at all a hard job. In fact, you can add custom CSS in Elementor using various methods. Here I am sharing with you the safest 4 ways to add Elementor custom CSS.

1️⃣ Add CSS using Elementor’s Custom CSS Code Snippets

Elementor provides you an advanced option to add custom CSS to your sections, columns as well as widgets. However, this option is only available with Elementor Pro.

To add custom CSS to any section/inner section of your Elementor website, click on the Six Dots to go to edit mode, then move to the Advanced tab ⇒ Custom CSS. Now expand the Custom CSS tab and add your custom code.

add custom css in Elementor inner section

Similarly, you can add custom CSS in Elementor widgets as well. For that, click on the widget to go to edit mode, then move to the Advanced tab ⇒ Custom CSS. Now expand the Custom CSS tab and add your custom code.

add custom css in Elementor widgets

🤷 Ever faced Server Error 400 Bad Request in Elementor? 

Check out different ways to solve this server error
👉👉 How to Fix Server Error 400 Bad Request in Elementor

2️⃣ Use HTML widget to add Elementor custom CSS

The second option that you can use to add Elementor custom CSS to your WordPress website is by using the HTML widget. For this option, just simply drag and drop the HTML widget and then add your CSS code within a Style tag. 

Elementor Custom css add elementor custom css using html block

Note: You can add both inline and standalone CSS using the HTML tag. And don’t worry, only the styles will be reflected on the site, the raw code won’t be visible.

3️⃣ Add custom CSS in Elementor site settings

You can also add custom CSS in Elementor using the site settings option. Click on the hamburger menu on the top left corner then under settings, click on the Site settings option to get access to the global site setting options.

go to site settings how to add custom CSS in Elementor

Now scroll down to the Custom CSS option, open the tab and add your custom styles here.

add Elementor custom css in site settings

4️⃣ Add custom CSS in Elementor from WordPress customization settings

You don’t have to necessarily use the options given by Elementor to add custom CSS. You can also use the WordPress customization options to add custom CSS.

For this, go to WordPress Dashboard ⇒ Appearance ⇒ Customize. 

go to WordPress customization options Elementor Custom css

Now you will find many settings that you can use to customize your WordPress site. Scroll down and open the Additional CSS tab to add custom CSS to your site.

Add CSS from WordPress customizer

How to fix Elementor custom CSS not working Issue

Sometimes adding custom CSS in Elementor may not reflect on the site immediately due to some technical issues. Here are the steps you can adopt to solve this issue:

✅Regenerate CSS

Regenerating CSS can solve this issue. To regenerate CSS, navigate to Elementor ⇒ Tools and click on Regenerate CSS & Data and then click on Save changes.

regenerate Elementor custom css Elementor Custom css

✅ Clear Website Cache & Browser Cache

Clear the website’s cache with any WordPress cache plugins. You can also clear any server-level cache if you have one. After clearing the website cache, clear your browser cache and refresh the site to check if the CSS is working or not.

✅ Theme Incompatibility

Sometimes Elementor theme incompatibility can be the reason for custom CSS not showing up on the front end. You can try to switch to any default theme to check if the CSS is working, if the css shows up on the front end with a default theme then talk to your theme developer about the compatibility issue.

✅ Using another page builder along with Elementor

Using multiple page builders at the same time can cause your custom CSS to not work. The simple reason is that CSS from different page builders can conflict with each other and the other page builder can override the Elementor custom CSS. In such cases, you should use only the Elementor page builder.

🔔🔔 Note: If you want to extend the Elementor page builder’s functionality without using another page builder, then you can opt for Elementor addons. 

🔥 Try ElementsKit– the ultimate addon for Elementor that comes with 85+ widgets and 500+ ready sections so you can build modern looking Elementor website.

✨More than 700k+ people are currently using this lovely addon to create amazing websites along with advanced headers and footers. 

And now you can get the Pro version of ElementsKit at a 20% discount using the community20 code. To purchase ElementsKit pro click here.

Frequently Asked Questions

Have a look at some of the most popular questions related to Elementor custom CSS with answers:

How do I use custom CSS in Elementor?

You can add custom CSS in Elementor in 4 ways. Those ways are using HTML block, Elementor Custom CSS snippet, WordPress customize options, and Elementor Site building settings.

How can I add custom CSS to Elementor for free?

From the WordPress customization options, you can add custom CSS in Elementor website for free.

🤷 Want to add advanced forms to your Elementor website? Check out our form-building resources:

👉 How To Add Multi-Step Form In WordPress
👉 How to Build Elementor Conditional Logic Form
👉 How to Create WordPress Survey Form in Elementor 

Wrapping up with Elementor custom CSS

Now you know 4 ways you can use to add custom CSS in Elementor. While you can use all of them, you should keep in the mind the CSS hierarchy of priority. For example, an inline style will always get more priority over CSS written on a page level or a website level.

So, I would recommend only using custom CSS when you know CSS very well. Otherwise, you can do more harm than good and end up spoiling your website’s look and layout.

Having said that, if you’re a CSS pro, then you have nothing to worry about, feel free to use the ways described in this blog to add your custom CSS to successfully change the look of your website.

  • Share :

How to Export and Import Elementor Templates with a Few Clicks

Previous post

30 Best Unique Small Business Ideas You Should Try in 2022

Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
Metform
Wp Fundraising
WP Social
Wp Ultimate Review
About us
Contact us
Refund Policy
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT