Owning a website becoming expensive?

No more! In our library, you will find the best premium WordPress plugins and themes for a fraction of the cost of the original prices. Browse Our Library

How to Add JavaScript to Elementor (2 Methods)

How to Add JavaScript to Elementor (2 Methods)

Elementor is a powerful page builder plugin for WordPress. Having the option to combine it with custom scripts will make it even stronger. In this article, we will teach you how to add JavaScript to Elementor in two different ways.

The first way is by using the default HTML widget of Elementor and the second way is by installing an extension called Essential Addons.

Why Adding Scripts to Elementor?

When using WordPress, oftentimes you’ll find the need to use custom JavaScripts or jQuery. One example can be a Google Analytics tracking code.

Although there are WordPress plugins for any task, many website owners prefer to use small scripts instead of installing a plugin.

It’s possible to use the site kit plugin to inject the GA code, but we can also use the script itself if we know where to paste it.

Knowing how to use scripts with Elementor is important knowledge to gain because you will need to use it at some point or another.

Add JavaScript to Elementor

Whether you would like to add JavaScript or jQuery, the process is identical and we can approach it in two different ways.

  • With the HTML widget.
  • With a plugin.

In this article, we will explore both ways, let’s start with the first one by using the HTML widget.

Use JavaScript with the HTML Widget

Using the HTML widget is my preferred method to add scripts because it’s a default feature of Elementor. You are not required to install any additional plugin.

Navigate into the page that you would like to edit and click on Edit with Elementor.

Inside the Elementor screen, drag the HTML widget to your desired section.

Paste the JavaScript or jQuery script inside the widget editor and click update.

Elementor widget libraries

Enter custom JS in the HTML widget

Notice that when using the HTML widget, you’ll need to wrap the function inside <script> tags similar to when using the Gutenberg text editor.

Once updated, revisit the page and verify that the script is executing as expected.

The function was executed good

Alternatively, if you’re using the Essential Addons plugin, you can use their built-in feature to inject scripts to any page.

Add Scripts with a Plugin

The Essential Addons for Elementor is a very popular plugin and used by many.

Although there are many benefits to use this plugin for its large widgets library, I don’t recommend you to install it only for the scripts option. If you already have it installed on your WordPress website, you can use its benefit to paste scripts on every page.

From inside the WordPress dashboard, navigate to the Essential Addons for Elementor tab and into Extensions. By default, the Custom JS option should be turned on, but if it isn’t, activate it.

Custom JS with the Essential Addons plugin

Once activated, edit your desired page with Elementor and click on the cogwheel icon at the bottom left corner to open the page settings.

Elementor page settings

Then, click on the Advanced tab and add the scripts into the new Custom JS window.

Enter JavaScript and update the page

Unlike when using the default HTML widget, this time it is not necessary to wrap the code with <script> tags.

Update the changes and revisit the website to verify that the codes are working as expected.

The JavaScript is working with EA

Conclusion

In this tutorial, you learned how to use scripts with Elementor. Knowing and implementing it into your website will transform Elementor from a good plugin to a powerhouse.

Leave us a comment below and let us know which one of the methods you used. There are many more Elementor plugin libraries that you can use with your site to get more out of it.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply