Custom CSS & JS

  1. Home
  2. Docs
  3. Features
  4. Custom CSS & JS

Custom CSS & JS

Visual Composer makes it easy to add your custom CSS & JavaScript. You can add custom code to a specific element, page (local) or site-wide (global). In addition, you can control JavaScript placement in the header or footer of the page.

You can add custom CSS & JavaScript from:

You can access CSS & JS editor by opening Visual Composer Page Options and switching to CSS or JavaScript tabs.

Custom css from page options

When to use local or global CSS & JavaScript?

If you want your code to execute on a single page or several pages out of many, it is highly recommended to use local CSS & JS. If you want to add custom code site-wide, you will need to use global CSS & JS. 

Custom CSS & JavaScript

Local CSS & JS allows you to keep your site clean and improve your Core Web Vitals score since Google penalizes sites with unused CSS & JS.

Element-specific CSS:

An element-specific custom CSS can also be added using a custom CSS field which is located under the advanced tab:

Element ID & Extra class name

All elements of Visual Composer have 2 default parameters:

  • Element ID
  • Extra class name

Refer to specific element by using unique element id or extra class name

You can use those parameters to refer to specific elements or groups of elements from your custom CSS & JavaScript. To apply custom CSS & JS to specific elements:

  1. Add unique Element ID or Extra class name
  2. Open custom CSS or JavaScript tab in the Settings
  3. Add your custom code

Important: It is not recommended to use the same Element ID for multiple elements.

Was this article helpful to you? No 2 Yes 2

How can we help?