How to Add HTML Code in WordPress Elementor

Contents

Insert HTML in Elementor
Edit Existing HTML Code
Add Custom CSS in Free Version
Regenerate Elementor CSS
Advanced Styling with HTML & CSS
Useful Links
Conclusion

Elementor makes web design intuitive, but sometimes you need to go beyond the drag-and-drop interface. This guide shows how to add HTML and custom CSS in Elementor, even using the free version. These techniques help bring more flexibility, third-party features, and advanced design elements to your WordPress website.

How to Add HTML Code in Elementor

You can insert raw HTML code in Elementor using the built-in HTML widget. This is ideal for embedding scripts, custom layout tweaks, or integrating third-party features. HTML widgets are fully compatible with other content blocks and can be positioned anywhere in your layout, allowing greater creative freedom.

Steps to embed custom code in Elementor

Open your WordPress dashboard and go to the page you want to edit.
Click "Edit with Elementor."
Search for the HTML widget in the Elementor panel.
Drag and drop it into your page where you need it.
Paste your custom HTML code in the widget's content area.
Optionally, preview your changes using the live editor to ensure proper display.

✅ You can use this for contact forms, maps, widgets, or even your own custom-built elements. HTML widgets support any standard HTML5 code, giving you full control over structure and behavior.

How to Edit HTML in Elementor

To make manual HTML edits later, just reopen the page with Elementor and click on the HTML widget you've added. You can then change or update your code directly in the editor. Elementor instantly reflects any changes made to your HTML, so you can preview results live without refreshing the page.

To better manage your HTML blocks:

Label each HTML widget: Use the Navigator panel to rename them for easy reference.
Group with Section widgets: Place HTML inside logical sections to maintain layout consistency.

💡 For more advanced users, combining HTML with inline CSS or JS is possible in the same widget. Just be cautious to avoid code conflicts or loading issues.

How to Add Custom CSS in Elementor Free

Although Elementor Pro has built-in CSS options, free users can still apply custom styles in a few ways. These workarounds allow for flexible design control without needing the premium version.

Workarounds for custom CSS in Elementor free version

Use the WordPress Customizer: Navigate to Appearance > Customize > Additional CSS and add your styles there. This method is global and works well for site-wide tweaks.
Target specific widgets: Assign a custom CSS class in the Elementor widget settings (under Advanced > CSS Classes). Then style these classes in the Additional CSS panel.
Use a child theme: Add CSS to the child theme's style.css file for better control. Ideal for developers or users making frequent code changes.
Use a custom CSS plugin: Plugins like Simple Custom CSS or WP Add Custom CSS allow you to apply styles from the admin panel.

⚡ Elementor Free does not allow per-widget CSS styling inside the editor interface, so you must apply styles externally or through global CSS plugins.

How to Regenerate CSS in Elementor

Sometimes changes don't reflect due to cached files. Regenerating CSS clears outdated styles and ensures your latest updates are visible on the front end. It's especially helpful after migrating pages or making theme changes.

Steps to regenerate Elementor CSS files

Go to Elementor > Tools in your WordPress dashboard.
Click the Regenerate Files & Data button.
Clear your browser and plugin caches.
Reload your page and confirm if the styling appears correctly.

✅ Regenerating CSS is safe and can resolve layout or styling display issues. It can also help fix broken pages after plugin updates.

Styling Elements in Elementor with HTML & CSS

Using both HTML and CSS together gives you more control over design. These methods unlock advanced layout possibilities, custom animations, and unique content structures that go beyond Elementor's visual tools.

HTML customization: Embed HTML blocks and structure content freely. Add responsive elements like tables, custom forms, or embeds.
CSS enhancements: Tweak spacing, colors, hover effects, and more. Adjust styles for mobile, tablet, and desktop views.
Element targeting: Use unique classes or IDs to apply CSS selectively. Combine selectors for greater precision.
Debug with browser tools: Use Chrome DevTools or Firefox Inspector to test and adjust CSS live before applying changes permanently.

💡 Experiment with layout adjustments using flexbox or grid to fine-tune your page appearance. These properties offer precise alignment control not available through default Elementor controls.

Useful Links

HTML Widget – Learn how to use Elementor's HTML widget to embed custom HTML, CSS, or JavaScript code into your pages.

Edit HTML in Elementor – This guide explains how to edit existing HTML code within Elementor using the HTML widget.

How to Add Custom CSS – Discover methods to add custom CSS in Elementor, including site-wide, page-level, and element-specific styles.

Regenerate CSS & Data – Instructions on regenerating CSS files in Elementor to ensure your latest styling changes are applied correctly.

CSS Selectors in Elementor – Understand how to use CSS selectors within Elementor to target and style specific elements effectively.

Enhance Your Elementor with Powerful Widgets!

Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!

No Results

See all Widgets

Conclusion

Whether you're using the free or pro version, Elementor gives flexibility for code-savvy users. By learning how to add HTML code, apply custom CSS, and regenerate styling files, you unlock advanced design tweaks and greater control of your WordPress website. These techniques are essential for integrating third-party scripts, achieving pixel-perfect layouts, and enhancing performance with clean, optimized code.