How to Use Custom CSS with Elementor in JupiterX

What is CSS?

CSS (Cascading Style Sheets) is the language used to add style to your WordPress website. It controls the visual elements like colors, fonts, spacing, and positioning. Even if you're not familiar with CSS, Elementor makes it easy to apply these styles without touching a single line of code. But for fine-tuning, Custom CSS gives you additional control over the design of your site.

Where to Add Custom CSS in Elementor

In Elementor, you can inject Custom CSS at different scopes:

• Site Level: Custom CSS applied here will carry across your entire website.
• Page Level: Custom CSS here targets only the particular page you're editing.
• Element Level: Apply Custom CSS to individual elements for pinpoint styling.

Moreover, for advanced customization, JupiterX offers Custom Snippets:

• Custom Snippets: Accessible by navigating to JupiterX > Custom Snippets in the WordPress admin area, this feature allows you to manage and implement advanced code snippets across your site.

Custom CSS Examples

To help you understand how Custom CSS works in Elementor, here are some examples:

1. Site-Level CSS: Go to the Site Settings panel and apply this code:

body {
  background-color: red;
}

This will set a red background color for all pages on your site.

2. Page-Level CSS: Using the Page Settings panel, input:

body {
  background-color: blue;
}

This will change the background color of a specific page to blue.

3. Element-Level CSS: In the Advanced tab of an element, enter:

#my-element {
  background-color: green;
}

Replace #my-element  with the CSS ID of the element you want to style. This particular element will have a green background.

How to Add Custom CSS in Elementor

To apply your Custom CSS:

At the Site Level

1. Navigate to Elementor > Settings in Elementor editing panel.
2. Click on the 'Custom CSS' tab.
3. Input your global CSS code here.

At the Page Level

1. Open the page you want to edit with Elementor.
2. Click on the gear icon located at the top center of the Elementor panel. This will open the 'Page Settings'.
3. Navigate to the 'Advanced' tab.
4. Look for the 'Custom CSS' section and add your CSS rules that are specific to this page.

At the Element Level

1. Click on the element you want to customize.
2. In the Elementor panel, go to the Advanced tab.
3. Scroll to the 'Custom CSS' section and write your CSS code right there.

By employing Custom CSS responsibly, you can drastically alter your website's look and feel, creating a custom experience that stands out from the crowd. With Elementor and JupiterX, you're fully equipped to bring your design visions to life!