One of the greatest selling points of employing page builders such as Elementor is that you receive access to pre-built page elements, or “widgets.” Elementor widgets come with a plethora of customization and style choices. Yet, Cascading Style Sheets (CSS) are sometimes the only technique to apply a certain style.
CSS provides you with incredible control over every aspect of your website. If you’re familiar with the language, adding it to WordPress is a breeze. Elementor also provides numerous methods for incorporating custom CSS.
This post will explain what CSS is and how to add custom styling to Elementor. Finally, we’ll go over some Elementor custom CSS best practices in WordPress.
What Is CSS?
CSS (Cascading Style Sheets) is a rule-based style sheet language used to modify the layout and appearance of web pages created using a markup language such as HTML or XML.
CSS is an effective method of web design because it separates content and style into distinct files, providing you with the greatest flexibility and simplicity of use.
Why Should You Add Elementor Custom CSS?
It’s not required because Elementor has all the customization features you need to create amazing websites. However, if you know how to write and want to use your creativity to improve the site’s aesthetic, you should use Elementor Custom CSS.
- To add a new style, use custom CSS in Elementor to override the theme’s style. If you like the overall design of a page provided by your theme but want to tweak the layout slightly in one part, you can use Elementor custom CSS to accomplish it.
- Similarly, you can change the design of an Elementor preset template using custom CSS code snippets.
Elementor Custom CSS Options
If you’re familiar with Elementor, you’ll know the builder uses sections, columns, and widgets to help you put together pages. Sections contain one or multiple columns, and each column can have several modules.
One of the finest features of Elementor is the ability to apply CSS code at the section, column, and widget levels. When you hover over a section, you can enter the Edit Section menu on the left side of the screen by selecting the six-dot icon.
You’ll find a custom CSS area if you go to the Advanced tab in the Edit Section menu. Within, you’ll see a place where you can enter a code for that specific section.
It is relatively simple to add custom CSS to particular components within the Elementor page builder. Keep in mind, though, that the style will only apply to those items. You’ll need to use a different technique if you want to apply custom CSS that impacts your entire site.
How to Add Elementor Custom CSS Entire Site
These are five simple methods for adding Elementor custom CSS to your WordPress site.
Method 1: Using Elementor HTML widget
You can apply custom CSS to any of Elementor’s widgets. But, in other circumstances, you may wish to manually add items using HTML and CSS. In certain circumstances, you must employ the HTML widget.
HTML, CSS, and JavaScript can all be parsed by the HTML widget. You can enter any code you like into the HTML Code box, and Elementor will show it as a widget if it’s valid.
Method 2: Using WordPress customizer
WordPress Customizer also allows you to add custom CSS to the entire site. To do so, navigate to Appearance > Customize and choose Addional CSS option.
Yet, it’s worth mentioning that the Elementor code fields are more user-friendly than the Customizer ones. If you’re currently using Elementor to design your site, there’s no need to add custom CSS using the Customizer.
Method 3: Using Elementor site settings
Elementor contains a set of global settings that are similar to those found in the WordPress Customizer. Open the editor and click on the hamburger menu in the top-left corner of the screen to access the Elementor Site Settings menu.
Click on the Site Settings option. Within, you’ll find a number of options for customizing the look of your site. Any changes you make in this menu will affect your whole site, even if you’re simply altering a single page.
For the time being, the only section that we are interested in is the Custom CSS tab. When you open it, you’ll find a field similar to the custom CSS choices for sections, widgets, and columns.
Any Elementor custom CSS you apply here will have an impact on your entire website. If you simply want to change a few things, we recommend taking a more concentrated approach (such as adding CSS directly to a widget).
Method 4: Enqueue custom CSS files
You can enqueue a CSS stylesheet to load with Elementor if you’re comfortable editing WordPress files and accessing your website using a File Transfer Protocol (FTP) client. This method necessitates the addition of code to the WordPress functions.php file.
Connect to your website through FTP and navigate to the WordPress root folder to see the functions.php file. Open the folder and modify the functions.php file.
We do not recommend that you use this method because it is rather complex.
Method 5: Using CSS plugins
You can apply custom CSS to your website without using the Customizer or page builders by utilizing one of numerous plugins.
Best Practices for Creating Elementor Custom CSS
While working with custom CSS or adding code to your website, it’s a good idea to keep the following recommended practices in mind.
Using WordPress child theme
If you want to change any part of your theme’s style with CSS, we recommend creating a child theme.
A child theme is a sub-theme that inherits all of the functionality and styling of the parent theme.
Child themes are a safe way to modify a WordPress theme without modifying it directly. Changes made to the child theme will be maintained and applied to the updated version when the parent theme is updated.
Using staging website
We recommend using a staging website if you want to make major changes to WordPress. Staging sites allow you to test changes in appearance and functionality without affecting your live site.
How to Fix Elementor Custom CSS not working
Due to technical problems, implementing Elementor custom CSS may not always have an instant effect on the site. Here are some methods you can use to resolve this problem:
Regenerate CSS
This problem can be resolved by regenerating CSS. To regenerate CSS, go to Elementor > Tools and select Regenerate CSS & Data, followed by Save changes.
Clear website cache and browser cache
Clear the cache on the website using any WordPress cache plugins. If you have a server-level cache, you can also clear it. Clear your browser cache and refresh the site after clearing the website cache to see whether the CSS is still working.
Theme incompatibility
Incompatibility with Elementor themes is sometimes the cause of custom CSS not appearing on the front end. You may test the CSS by switching to a default theme; if the CSS appears on the front end with a default theme, contact your theme developer about the compatibility issue.
Frequently Asked Questions
Have a look at some of the most frequently asked questions about Elementor custom CSS and their answers:
How do I use custom CSS in Elementor?
There are five methods for adding Elementor custom CSS: HTML blocks, WordPress customization options, Elementor site settings, FTP, and custom CSS plugins.
Can you add custom CSS with free Elementor?
You can add custom CSS in Elementor website for free by using external plugins or WordPress customize.
Why custom CSS is not working in Elementor?
Occasionally Elementor custom CSS may not work as expected. You can simply repair this by going to Elementor > Tools and selecting Regenerate CSS & Data, then Save changes.
Wrapping Up with Elementor Custom CSS
That concludes the five methods for incorporating Elmentor custom CSS into your WordPress site. We hope you can use Elementor custom CSS like a pro after this article.
