How to Include Custom CSS in Ellementor (5 Methods)

CSS provides you with an incredible level of control over each element of your site. Adding it to WordPress is easy if you're familiar with the CSS language. Elementor also offers several options for customizing CSS.

What is CSS?

Think about CSS as a standard language that describes how elements should appear on a browser. It is used by all browsers and is among the internet's core languages.

For example, this is the CSS code you'd employ to add a background color any body part of an HTML document:

body color: red background;

It is possible to use CSS for applying styles on specific elements, classes, and IDs in HTML. For instance, the following snippet would apply a specific text color and align to all H2s on a page:

h2 
 
 color: black;
 
 text-align: left;
 
 

When you open an HTML page it also loads an additional stylesheet which contains every CSS code. It is possible to reuse stylesheets across multiple pages.

Here's an example of inline CSS for a specific H2 header.

This is where the text of the heading is located.

Custom CSS Options in Elementor

If you're familiar with Elementor You're aware that it uses columns, sections, as well as widgets, to assist you put together pages. Sections contain one or multiple columns. A column could have multiple components:

One of the most appealing aspects of the use of Elementor is the ability to create separate CSS codes at the column, section, and widget level. When hovering over a section, you can choose the dot icon that is six dots to open an edit sectionmenu located on the left of the screen.

When you click the Advancedtab inside the Edit Sectionmenu You'll find the option to create a custom CSSsection. Within, there's an area that lets users to include code in that specific section:

When editing columns and widgets, you'll notice that you're able to access the three tabs that are identical to their respective settings menus. Sections, columns and widgets are all equipped with the layout, style and advanced settings.

To add the custom CSS to a column, move your mouse over the column, and then click the two-column icon in the upper right-hand corner on the right side of the item. Then, navigate to the Advancedoption and select Custom CSS section: Custom CSSsection:

You can follow the identical procedure to apply customized CSS to the Elementor widget. Just select the widget you wish to modify then go directly to Advanced > Custom CSStab:

Adding customized CSS to certain elements of the Elementor page builder is very easy. Be aware that the styling applies only to those elements. If you'd like to apply custom CSS that affects your entire site, you'll need to use a different approach.

How To Add Custom CSS Using Elementor (5 Methods)

In this part we'll look at other methods to include Elementor customized CSS. We'll cover methods that use CSS throughout your entire website or to specific pages as well as to Elementor widgets.

Method 1: Utilize Method 1: Use the Elementor HTML Widget

The HTMLwidget can be used to support both standalone and inline CSS. The code you insert using the widget will be limited to that particular element.

Method 2: Select Elementor Site Settings Menu Elementor Site Settings Menu

Elementor offers a variety of global settings which resemble the options you can find in WordPress Customizer. WordPress Customizer. To open the Elementor Site Settingsmenu, open the editor and then select the hamburger menu on the top-left corner of the screen.

Do you want to know what we did to increase our traffic over 1000 percent?

Join over 20,000 others to receive our newsletter every week with insider WordPress tips!

Then choose the Website Settingsoption:

In the menu, you'll discover a range of options that allow you to modify your website's design. Any changes that you make within this menu will apply to all pages on your site regardless of whether you're just editing one page.

You can read about the best ways to make use of your Site Settingsmenu to modify your site's appearance at the official Elementor site. For now, the one section we're most concerned on is called that of the custom CSStab. When you open it, you'll find an option that appears similar to the customized CSS options for sections, widgets and columns:

Custom CSS that you include on this page can affect the web page in general. If you only intend to alter specific elements of your website, we recommend that you opt for a more focused strategy (such such as adding CSS directly to a widget).

Method 3: Use the WordPress Customizer

The WordPress Customizer allows users to apply custom CSS on a sitewide basis. For this you need to go to Appearance > Customizeand choose an Extra CSSoption on the left menu:

But, it's worthwhile to mention that the Elementor code fields are easier to use than those that are available through the Customizer. If you already use Elementor to build your site, there's no reason to create custom CSS using the Customizer.

Method 4: Enqueue Custom CSS Files

To access this functions.phpfile, connect to your site via FTP and access your WordPress rootfolder. Browse to the folder, look for functions.php, then open it. functions.phpfile, and edit the file.

Here's an example of code that you want to add to the file:

add_action( 'elementor/frontend/before_enqueue_scripts', function() 
 
 wp_enqueue_script(
 
 'custom-stylesheet',
 
 get_stylesheet_uri()
 
 );
 
  );

That code uses the before_enqueue_scriptshook to load a stylesheet called custom-stylesheet. We also use the get_stylesheet_urifunction to point toward the stylesheet's location in the server.

Ideally, you'll add the customized stylesheet in the directory for your child theme, or in The Themesfolder within the Themesfolder itself. The stylesheet can comprise any Elementor CSS codes you'd like. The code you have added into functions.phpensures that the code is only loaded at times when Elementor is running on your website.

Method 5: Utilize an CSS plugin

By using the Simple Custom CSS feature and JS it is possible to have the possibility of adding codes directly to the theme's header and footer elements. To start, go to Custom CSS and the JS menu > > Add Custom CSSand select Add CSS Code.

After you've finished editing your CSS code, click the Publishbutton. You may need to switch to a front-end view for a better view of the code the process.

Best Practices for Creating Custom CSS Using Elementor

If you're working with custom CSS or the addition of any kind of code to your website it is important to bear these best techniques at hand. We'll start by creating an unrelated theme.

Utilize the WordPress Child Theme

In this way, if there are any modifications to the original theme, they don't affect the changes you apply to your child. In addition, when you update your theme, it'll retain these changes.

Use the Code Preprocessor to make writing easier

You might want to consider using a staging website

Whenever you're planning on making any big changes to WordPress it is recommended that you utilize a staging site. These websites allow you to try out changes to the style or functionality without the risk of breaking any of the features in your live website.

Summary

The process of adding custom CSS to Elementor is much easier than you imagine. The page builder offers several options for adding codes to columns, sections, widgets, and for your entire website.

For a quick recap, here are five methods to include your own CSS style for Elementor (or your website generally):

1. Make use of Elementor HTML Widget. Elementor HTML Widget.
2. Utilize the Elementor site settings menu.
3. Utilize the WordPress Customizer.
4. Enqueue custom CSS file.
5. Use the CSS plugin.

Cut down on time, expenses and maximize site performance with:

• Instant help 24/7 support from WordPress Hosting experts 24/7.
• Cloudflare Enterprise integration.
• Reaching a global audience with 34 data centers worldwide.
• Optimization through the integrated Application for Performance Monitoring.