How To Add HTML Code To Elementor Wordpress 2026 Easily

Log into wp-admin and click Elementor in the left sidebar to reach its home screen, where you'll see a Create a Page button next to prompts for building with AI or starting from a template. Nothing on this screen is where code gets pasted; it's just the entry point.

Elementor keeps this dashboard separate from the classic WordPress Pages list, with its own home for templates, settings and add-ons. If you're editing a page that already exists instead of starting a new one, skip this screen and go straight to Pages.

Go to Pages in the WordPress sidebar, hover over the page you want to edit, and click Edit with Elementor instead of the standard Edit link. The default WordPress editor won't give you access to Elementor's widgets at all.

This trips up a lot of people: they land in the block editor wondering where the HTML widget went, when they simply opened the wrong editor. Once you click through, Elementor loads the page in its drag-and-drop canvas with the widget panel docked on the left.

In the widget panel, search "HTML" and the HTML widget appears. It ships with Elementor's free widget set, so no Pro upgrade is needed just to place it.

Drag it onto the section or container where the code should render, the same way you'd place a heading or image widget. It behaves like any other element: it can sit inside a column, stack above or below other widgets, and be resized or repositioned afterward without touching the code inside it.

With the widget placed, its settings panel opens on the left with a Content tab showing an HTML Code field: a plain text area where you type or paste markup directly. This is where an embed snippet from a third-party service, a custom form, or hand-written HTML goes.

Elementor renders it live in the canvas as you type, so you get a rough preview before saving. There's no formatting toolbar here by design. It's a raw code field, which is what lets it hold scripts and embeds that a normal text widget would strip out.

JavaScript goes straight into the HTML widget's own code field, wrapped in <script> tags, on Free or Pro at no extra cost. Styling is where the plans diverge.

The per-widget Custom CSS field on the Advanced tab and the site-wide Custom Code panel are both Elementor Pro features; Elementor's own documentation lists Custom Code as a Pro capability and notes it does not accept PHP. On Free, the practical workaround is to wrap your styles in <style> tags inside the same HTML widget, or add them through WordPress's own Customizer under Additional CSS.

Click Update (or Publish on a new page), then use Elementor's preview icon to check the live page instead of trusting the editor canvas by itself; some scripts and embeds only run correctly outside the builder's iframe. Check both the desktop view and the mobile preview toggle at the top of the editor, since an embed that fits a wide screen can overflow or get clipped on mobile. A broken result is almost always a missing closing tag or a script that needs to fire after the page loads rather than during it.