The Custom CSS/JS section provides two in-browser code editors — one for CSS and one for JavaScript — where you can add custom code applied globally across your entire site.

CSS Code Editor

Use this editor to write custom CSS that overrides or extends the theme’s built-in styles. Your CSS is loaded after all theme stylesheets, so your rules take precedence.

Common use cases:

• Adjusting colours, spacing, or font sizes on specific elements
• Hiding elements with display:none
• Adding custom hover effects or transitions
• Tweaking plugin default styles to match the theme

JavaScript Code Editor

Use this editor to add custom JavaScript that runs after the page has fully loaded. The code is wrapped in a jQuery document-ready function by default:

jQuery(document).ready(function(){ ... });

Common use cases:

• Triggering custom animations or interactions
• Integrating third-party widgets or APIs
• Adding click handlers or form enhancements

Note: Custom CSS applies to every page. For page-specific styles, use the page builder’s inline CSS option or a plugin like Simple Custom CSS.

Note: For larger code additions, it is better practice to enqueue a custom stylesheet or script via a child theme’s functions.php.