How to Add Code in Elementor

There are a few common scenarios where adding code directly to an Elementor page is the right approach rather than installing a plugin:

• Third-party embed codes. Booking widgets, chat tools, calculator embeds, and similar services provide a code snippet that needs to be placed in a specific location on a page. The HTML widget places it exactly where you want it in the Elementor layout.
• Custom tracking pixels. Some advertising pixels (like Facebook’s pixel for specific page events or Google Analytics goals) need to fire on a particular page element or action. These go into the HTML widget rather than the site-wide header.
• Inline CSS overrides. When a style change is too specific for Elementor’s built-in controls, a small inline CSS block in the HTML widget handles it without modifying your theme files or adding a separate stylesheet.
• Script-dependent features. If a feature requires JavaScript to work (like a custom countdown timer, a dynamic text switcher, or an animation trigger), the HTML widget accepts JavaScript wrapped in script tags.

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.

Elementor’s HTML widget is available in the Free version of Elementor. To add it to a page:

1. Open the page in the Elementor editor (go to the page in WordPress admin, hover over it, and click Edit with Elementor).
2. In the left-hand widget panel, search for HTML in the search box.
3. Drag the HTML widget and drop it onto the section of the page where you want the code to appear.
4. In the left panel, you’ll see an HTML Code text area. Paste your HTML, CSS (wrapped in <style> tags), or JavaScript (wrapped in <script> tags) into this box.
5. The page preview will update to reflect what your code produces. Adjust the placement by dragging the widget within the section as needed.
6. Click Update or Publish to save.

Note: Some advanced JavaScript may not preview correctly inside the Elementor editor but will work correctly on the published page. If you’re testing a script, publish the page and check the live version rather than relying on the editor preview.