Custom Scripts (CSS/JS)

How to use Custom Scripts (CSS/JS) features of Sky Addons for Elementor

The Custom Scripts (CSS/JS) extensions of Sky Addons empowers Elementor users to inject custom CSS and JavaScript directly into their pages without editing theme files. This powerful feature enables advanced customization, allowing you to add tracking codes, custom animations, special styling, and interactive elements to individual pages with complete control over where the code loads—either in the header or footer.

This feature is especially valuable for implementing page-specific functionality that goes beyond Elementor’s built-in options – whether you need to add custom animations, third-party integrations, tracking codes, or advanced styling adjustments. By providing dedicated fields for both header and footer placement, the module gives you precise control over code execution timing, helping optimize performance and ensure proper functionality.

Key Features

1. Header & Footer Injection – Add custom code to either the header or footer of your page
2. Full Code Editor Support – Write CSS and JavaScript with syntax highlighting
3. Page-Specific Customization – Apply unique scripts only to specific pages
4. Clean Implementation – No need to modify theme files or use additional plugins
5. Edit Mode Protection – Scripts run only on the front-end, not in the Elementor editor
6. Performance Optimization – Choose the ideal loading position for your code
7. Framework Integration – Easily implement external libraries and frameworks
8. No Additional Plugin Required – Built directly into Sky Addons Pro

How to Use Custom Scripts Module

1. Open Elementor Editor. Navigate to any page where you want to add custom scripts.
2. Click on the Page Settings handle to select the section you want to modify.
3. Navigate to the Advanced tab in the Elementor panel.
4. Scroll down to find the Custom Scripts (CSS/JS) option and click to expand it.

Custom Scripts Options

• Header CSS/Script – Place code here to load in the page header
  • Perfect for CSS styles that need to load early to prevent flickering
  • Ideal for tracking codes that need to execute before page content loads
  • Supports both <style> and <script> tags
• Footer CSS/Script – Place code here to load in the page footer
  • Best for JavaScript that should execute after the page has loaded
  • Useful for animations and interactive elements
  • Helps improve page load performance by deferring script execution
  • Supports both <style> and <script> tags

Code Writing Guidelines

Write your code directly in the appropriate editor fields. The module understands both CSS and JavaScript:

• For CSS, wrap your code in <style> tags:

• For JavaScript, wrap your code in <script> tags:

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Scripts Not Working – Ensure you’re viewing the published page and not in Elementor’s editor or preview mode, as scripts only run on the actual frontend.
2. Code Errors – Check your browser’s developer console (F12 or right-click > Inspect > Console) for potential JavaScript errors.
3. CSS Not Applying – Verify your CSS selectors are specific enough to override existing styles. You may need to use !important for some properties.
4. Scripts Loading Too Early/Late – If your code depends on DOM elements or other scripts, make sure to place it in the appropriate location (header or footer).

Conclusion

The Custom Scripts feature of Sky Addons provides a streamlined way to add custom code to your Elementor pages without the need for additional plugins or theme modifications. This powerful feature gives you complete control over your site’s appearance and functionality on a page-by-page basis, making it invaluable for developers and site builders who need to implement custom solutions.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at http://wowdevslive.bdkoder/support/ where our expert team is ready to provide prompt and helpful assistance.