How to Add Javascript to Your Elementor Website

If you’re creating your site using Elementor, you might encounter a situation where you need to add some Javascript code to your website. Whether it’s for tracking purposes, animations, pop-ups or anything else, it requires a bit of know-how to get it working properly. Fear not, because in this blog post, we’ll be sharing a step-by-step guide on how to add Javascript to your Elementor website.

Step 1: Open the Page Builder

Begin by opening the page builder and selecting the page you want to add Javascript to. Once you’re on the editing interface, click on the ‘Edit with Elementor’ button on the top bar. This will open up the Elementor interface where you’ll see the various elements/widgets available to you. Find the section on your page you want to add the Javascript to and click on it to select it.

Step 2: Add a Custom HTML Element

To add your Javascript code, you’ll need to add a Custom HTML Element widget to the section. Find the ‘Basic’ section in the Elementor widget menu on the left and scroll down to find the Custom HTML element widget. Simply drag and drop it onto the section on your page that you selected earlier.

Step 3: Add Your Javascript Code

With your Custom HTML widget in place, you can start adding your Javascript code. Click on the widget to open the editing interface, and paste your code into the ‘Edit Custom HTML’ text box. Afterwards, click ‘Update’ to save it.

Step 4: Preview Your Changes

Once you’ve added the code, preview your changes to make sure everything is displaying correctly. If there are any issues with the code, you’ll notice them here and can go back to the previous steps to make the necessary changes.

Step 5: Test Your Javascript Code

Testing your code will ensure that everything is working correctly. To test, simply navigate your website and check if the Javascript functions as expected. If you are using any external libraries like Google Analytics or a plugin like Contact Form 7, they often have documentation on their respective sites about how to add their Javascript code.

Conclusion

Adding Javascript to your Elementor website might seem like a daunting task, but with this guide, it’s easy to do. Whether you’re adding custom tracking codes or pop-ups, Elementor allows you to do so with ease. With a little bit of practice, you’ll be a pro in no time. So don’t hesitate to add any custom Javascript code to your Elementor website and explore the possibilities that come with it.