Elementor Custom CSS/JS Extension Documentation

Key Features of the Elementor Custom CSS/JS Extension

• Direct Integration: Add CSS and JS code directly within the Elementor interface.
• Header and Footer JS: Separate fields for header and footer JS, offering flexibility and precise control.
• CSS Styling: Seamlessly style your Elementor designs with custom CSS.
• Dynamic Possibilities: Enhance functionality by incorporating custom scripts and styles.
• Global or Page-Specific: Apply code globally through templates or limit it to specific pages.

What’s Needed?

To use the Custom CSS/JS Extension, ensure you have:

• Elementor Free Version
• Vertex Addons Free Version

Activate the Custom CSS/JS Extension

Before configuring the extension, confirm it is activated:

1. Refer to the Extension Activation Guide for a detailed setup walkthrough.
2. Verify that the Custom CSS/JS Extension is enabled in the Vertex settings.

How to Configure the Custom CSS/JS Extension in Elementor

Once activated, the Custom CSS/JS Extension integrates into the Advanced Tab of your Elementor page or template settings. Follow these steps to configure it:

Step 1: Access the Elementor Editor

Open the page or template you wish to customize in the Elementor editor.

Step 2: Navigate to the Advanced Tab of Settings

In the Elementor Editor, Click on the ⚙ icon to open the page/template settings. go to the Advanced Tab. Here, you’ll find the Custom CSS/JS accordion added by Vertex Addons.

Step 3: Add CSS or JS Code

The Custom CSS/JS section provides a tab switcher with two main tabs: CSS and JS.

CSS Tab

1. Select the CSS Tab to input custom styles.
2. Write your CSS code directly into the provided field. For example:
   .custom-button { background-color: #3498db; border-radius: 10px; color: #fff; }
3. Save and preview your changes to see the applied styles in real-time.

JS Tab

Switch to the JS Tab for JavaScript customization. It is divided into two fields: Header JS and Footer JS.

• Header JS: Add scripts that need to load before the content, such as third-party libraries or analytics code. Example:
  codeconsole.log("Header JS Loaded!");
• Footer JS: Add scripts that should load after the page content, ideal for enhancing user interaction. Example:
  codedocument.addEventListener("DOMContentLoaded", function() {
alert("Footer JS Executed!");
});

Tip: Ensure your JS code is error-free and uses valid syntax to avoid breaking the page functionality.

Best Practices for Using Custom CSS/JS

1. Backup Before Customizing: Always save a backup of your site before adding custom code.
2. Minimize Code: Write efficient CSS and JS to avoid slowing down your site.
3. Test Changes: Preview your page in different browsers to ensure compatibility.
4. Use Dynamic Selectors: Leverage Elementor’s built-in selectors to target specific widgets or sections dynamically.

Final Outcome

By using the Custom CSS/JS Extension, you can achieve:

• Unique Styling: Apply custom colors, fonts, animations, and more.
• Enhanced Interactivity: Integrate features like scrolling effects or third-party APIs.
• Optimized Design: Create designs tailored to your brand or functionality.

A sample implementation could include custom hover effects, a sticky menu, or interactive widgets powered by JavaScript.

Why Use the Custom CSS/JS Extension?

The Custom CSS/JS Extension is an essential tool for web designers and developers seeking to push the boundaries of Elementor’s default capabilities. By enabling direct code injection, it empowers users to:

• Extend Elementor’s functionality without additional plugins.
• Implement advanced design tweaks and interactivity.
• Maintain a streamlined workflow by avoiding external stylesheets or script uploads.

Elevate Your Elementor Projects with Custom CSS/JS

Take control of your designs with the Custom CSS/JS Extension from Vertex Addons. Whether you’re styling an advanced landing page or adding dynamic functionality, this extension provides the flexibility and power you need.