Using HTML widget to add javascript event handlers.

This was created on a blank page with a default button element, gave the section a class of “contact” and was able to target the click event just fine.

(function($){

$('.contact .elementor-button-link').on('click',function(e){
$(e.target).closest('a').hide();
console.log(e.target + ' was clicked!');
});

})(jQuery);

Hi,

Ok, giving the element a specific class name & use the js class selector work well. This was a simple method. Should have seen it myself, but “not seeing the forest for trees” is sometimes – arrgghhh…. Thank you sir.

Oddvard

Just a note for those of us who, like me, aren’t familiar with javascript: The html widget containing the javascript must be below the button on the page (so that it loads after?). Couldn’t get it to work until something jogged my memory about this.

Thanks for pointing that out @paulrudy. I also use the HTML widget to add style tags with custom CSS at the very top to minimize a sudden flash of unstyled content.

I use this for all style changes to non Elementor areas such as sidebars, header, footer, comments etc.

I also use Elementor Pro for custom CSS that remains contained within each element and let Elementor minify and browserify the code.

When I’m finished with my design for production, I export it out to my child theme and use wp_enqueue actions to load it so it can also be compressed and cached with Cloudflare’s DNS. Otherwise it stays and I can pack it up all nice and neat using the template import/export feature. Use it on other sites or just have a portable backup.

This has improved my workflow greatly so I thought I would share.

• This reply was modified 7 years, 9 months ago by pingram.

Philip, thanks for sharing. In exporting your design for production, are you specifically talking about CSS and having it loaded in wp_enqueue? I’m new to Elementor. Can you explain, or link to an article that discusses this? My workflow is basically to build on a staging, site, and duplicate the whole thing over to my live site.

Hi @paulrudy Yes, I use the child theme’s functions.php and load static css and js files from sub-folders. Here is a video series that cover wp_enqueue method https://www.youtube.com/watch?v=4xbvhXj72kU

Since I have Elementor Pro I take advantage of the built in custom css that EPro provides which also uses the wp_enqueue method but for any other theme styling such as header/footer/sidebar/woocommerce areas I simply use an html element/widget to temporarily provide css/js as needed that can also be exported/imported via Elementor Library. Then when I am finished with development and ready to go live I take only the css/js that I placed in the html widgets and move that into the child theme file system and use wp_enqueue to load the static files (deleting the unnecessary html widgets in my Elementor designs that are only used for development).

However the beauty is I still have the exported json files so my designs w/ custom css/js are still very portable for future use elsewhere.

• This reply was modified 7 years, 9 months ago by pingram. Reason: spelling
• This reply was modified 7 years, 9 months ago by pingram.

Ah, ok, thank you for the in-depth explanation Philip!

Since I’m only developing for my own business site, I don’t really need to worry about portability until/unless I stop using my theme or Elementor. For this reason, I also don’t use a child theme.

Is there any advantage in my case to doing things the way you are? Speed, for instance?

I always use a child theme because I almost always have a reason to override or provide further customization and I don’t have to worry about rebuilding that same work I already completed in the parent theme if I later find out I do need a child theme to do something the parent does not.

Also, yes it is much quicker for me to fine tune css, live and inside the Elementor editor than to use style.css or a wp_enqueued stylesheet because I don’t have to deal with browser or WordPress caching or going back and forth between windows/tabs in my browser for each change.

In my situation I am not working on a single website where the chosen theme may already cover all my needs. Every site I build is unique in some sort of fashion and often doesn’t look anything like the parent theme when it is all finished. For me all I need in a theme is a lean and mean set of tools for the functionality needed for a particular customer. When it comes to design, I prefer it to not be identical to a plethora of other websites around the world so I look for general look/feel when shopping themes but more important to me is what’s under the hood and how lean I can make it when it’s showtime.