Adding Custom CSS to an Element

Updated on May 16, 2019

Is there anyway to add custom css to an element

Elementor has various options for customize the widgets. However, you may need to add additional custom css to your element.

In order to add a custom css to your website you have four options:

Adding custom CSS from Jupiter Customizer

You can add your custom CSS from Jupiter Customizerby following the steps below:

1. From the WordPress left dashboard menu, click on Appearance > Customizer.

2. Select the Additional CSS, so that you can add your custom CSS into it.

3. Update the settings.

Adding custom CSS from Elementor

 Custom CSS is part of Elementor Pro. Make sure you’ve activated it before you add any custom CSS to Elementor.

1. Select the element you want to add a custom CSS to, so that a new dashboard on the left will emerge with the element’s settings.

2. In Advanced tab go to Custom CSS and write your custom css,

Adding Custom CSS from Jupiter child theme

If you plan to add your code directly into the theme files, you can also add your custom css into jupiterx-child/assets/less/style.less file in Jupiter Child Theme.

Adding Custom CSS via Page Settings in Elementor

1. Open a page to which you want to add custom css code (it will be applied only to that page).

2. Click on Edit with Elementor button.

3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.

4. Open Custom CSS/JS section and add your code into Custom CSS box.

Did this answer your question?