How to Add Custom CSS in JupiterX Theme

Customizing the look and feel of your website elements, pages, or the entire site often requires a bit of CSS magic. Luckily, with JupiterX, you have the flexibility to inject custom CSS exactly where you need it.

Add Custom CSS to an Element

To personalize an individual element's style:

1. Click on the specific element you want to style to select it, or find it in the Navigator.
2. Look to the Elementor panel on the left, then click the Advanced tab.
3. Scroll down and locate the Custom CSS section. Click to expand it.
4. In the provided text box, type or paste your CSS code.

Add Custom CSS to a Page

For page-specific CSS rules:

1. While editing the page with Elementor, click the gear icon at the top-center to open the Page Settings panel.
2. Click on the Advanced tab within the panel.
3. Find the Custom CSS field and enter your CSS code there.

Add Custom CSS to Your Site Globally

To apply global CSS rules to your website, follow these steps:

1. In the Elementor editing area, click on 'Site Settings', located at the top left corner.
2. From the settings panel list, locate 'Custom CSS'.
3. A text box will appear where you can input your global CSS rules.

Remember, while Custom CSS is powerful, use it responsibly. Overuse might slow down your site or impact future updates. Always backup your site before making significant changes.