How to Add Code in Elementor

There are numerous reasons why you would want to add code to any Elementor website. For one, not all functions on WordPress or Elementor are included. You might need to have some additional code for your website to make a function work.

For example, if you have a product on your WordPress website that has special requirements and you need to have the customer enquire rather than add it to the cart, you can use a coding element to add that to the website function.

Many scenarios like this might need coding skills.

One of the factors that many people like about WordPress is that it can be extended using plugins. There are plugins for all kinds of functions like appointments, social media, SEO, pop-ups, and more. However, that doesn’t mean that there is a plugin for everything (although there is a common joke about there being that way).

And some plugins/themes don’t work together.

Another problem is that using a plugin for a simple problem, as mentioned above, is a misuse of resources. Plugins cost time to load and for every second that it takes to load a website, you will lose 7% of your revenue.

Some plugins have been found to increase loading times by up to 31%, namely SEO, eCommerce, and security plugins. However, most have caused some increase in loading times. By removing multiple plugins and installing only the code required for the function, website owners can improve loading times and keep websites loading within the recommended 2 seconds.

Luckily there is a widget within Elementor that allows you to add code directly into a page or blog post while you’re editing and see the results. You can also add in custom JS.

To add the HTML codes to the Elementor, you need to follow these instructions:

1. Enter the page you want to add code to.
2. Click on the ‘Edit with Elementor’ button
3. On the left-hand widget menu, find the HTML widget.
4. Drag and drop the widget onto the page where you would like to add it.
5. The new dashboard on the left will open, you can then insert the HTML code or custom JavaScript code directly into the HTML Code box.
6. Click on the ‘Update’ on the page.