How to run Javascript on your Elementor popup

Run javascript inside an elementor popup 1 jQuery jQuery(window).load(function() { jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => { if ( document.getModal ) { // It’s a popup document document.getModal().on( ‘show’, () => { console.log( ‘Run your script here’ ); } ); } }); }); Credit/Source – By formulaclick View on GitHub

Toggle between light/dark mode in Elementor using GSAP

Dark Example One GSAP Code – Use this to make the entire site into dark mode automatically Example two GSAP code – Use this to have more control over witch elements change into dark mode Toggle Switch Logic const toggleCheckbox = document.querySelector(“#darkmode-checkbox”); toggleCheckbox.addEventListener(“click”, () => { if (!toggleCheckbox.checked) { // Play Timeline; } else […]

Create a Custom Mobile Menu Drop Down In Elementor Pro

custom mobile menu dropdown

CSS /*Tablet breakpoint*/ @media(max-width:1024px){ /*Mobile nav column */ #nav-container{ display:none; overflow:hidden; } /*Switch nav widget to verticle on mobile */ .elementor-nav-menu–layout-horizontal .elementor-nav-menu { flex-direction: column !important; } /*Make nav widget 100%*/ .nav-menu { width: 100% !important; } /*Make button widget 100%*/ .nav-btn{ width: 100% !important; } } /*Hide bar icon on desktop*/ @media(min-width:1025px){ .nav-icon{ display:none; […]

Elementor Hover Box Animation Effect In WordPress

Hover box fill effect Elementor CSS Code selector .elementor-widget-wrap::before { content:””; position: absolute; bottom:0px; left: 0px; background-color: #F54335; width: 100%; height: 0%; transition: height 0.15s ease-in; border-radius: 10px; } selector .elementor-widget-wrap:hover::before{ height: 100% !important; } selector .box-title h2{ transition: all 0.1s ease-in; } selector:hover .box-title h2{ color: white !important; } selector .box-des p{ transition: all 0.1s ease-in; } selector:hover […]

Elementor Entrance Animation on Scroll Using GSAP

entrance animation on scroll Step 1 Add the class name text_reveal to the headline element Make sure the headline element HTML Tag is set to H2 Step 2 Add this to your headline element CSS tab. selector{ overflow:hidden; } Step 3 Add the class name start-reveal to the section you would like your scroll animation to begin. Make […]