Guide

How to Turn an Elementor Page Into Plain HTML and CSS

Elementor already sends the browser plain HTML and CSS; the job is to save that output, cut the CSS down to what the page uses, and replace the few parts that need WordPress.

Updated · By

Try it: Extract Used CSS From a Chrome Coverage Export Unused CSS Remover

A page built with Elementor is assembled by WordPress and PHP on every visit, but what arrives in the browser is ordinary HTML, CSS and JavaScript. That is why a static copy is possible at all: you keep the output and drop the machinery that produced it. People do it to host a finished landing page anywhere, to stop maintaining a WordPress install for a site that never changes, or to make a heavy page load faster.

Elementor has no button for this. Its own export produces a template file in JSON, meant for importing back into Elementor, not HTML you can host. So the work happens in three steps: save the rendered page, reduce the CSS to what it actually uses, and replace the parts that depended on WordPress.

What survives the move, and what does not

Part of the pageIn a static copy
Layout, text, images, colours, fontsWorks: it is HTML and CSS
Hover effects and responsive layoutsWorks: pure CSS
Sliders, carousels, tabs, accordions, popupsOnly if you keep Elementor's JavaScript files, or rebuild them
Entrance animationsNeed Elementor's JavaScript; without it the widgets stay hidden (see below)
Elementor forms, comments, searchStop working: they send data to WordPress
Lists of posts or products that changeFrozen at the moment you saved the page

If the page is mostly the first two rows, a static copy is an easy win. If it lives on forms, shop listings or a blog feed, keep it in WordPress and speed it up there instead.

Step 1: save the rendered page

Log out of WordPress first, or open the page in a private window. A logged-in visit adds the admin bar and its styles to the HTML, and you do not want either in the copy.

One page: save it from the browser

  1. Open the page in Chrome, logged out.
  2. Press Ctrl+S (Cmd+S on a Mac) and choose Webpage, Complete.
  3. You get an HTML file and a folder next to it with the images, stylesheets and scripts the page loaded.

A whole site: use a static export plugin

For more than a handful of pages, a static site plugin such as Simply Static crawls the WordPress site and writes every page with its assets into a folder or a ZIP file. It also rewrites the internal links, which is tedious by hand. Check the output page by page all the same: plugins can miss files that only JavaScript asks for.

Step 2: cut the CSS down to what the page uses

A typical Elementor page loads the theme stylesheet, Elementor's frontend CSS, a CSS file per widget type, a generated file for the page itself and often a font file or two. Most of those rules style widgets that are not on the page. The most reliable way to find the ones that are used is to let Chrome record them.

  1. Open the live page, logged out, and open DevTools.
  2. Open the menu with the three dots, then More tools, then Coverage, and press its reload button.
  3. Use the page: open the mobile menu, click through tabs and accordions, and resize the window to your phone and tablet widths.
  4. Press Export in the Coverage panel and save the JSON file.
  5. Drop that file on the coverage JSON to CSS page and press Extract used CSS.
  6. Save the result as one stylesheet, replace the page's <link rel="stylesheet"> tags with a single link to it, and keep the font files it refers to.

The Unused CSS Remover writes each rule back inside its own @media block, which matters here: Elementor keeps its tablet and mobile rules in media queries, and a tool that loses them makes the mobile layout apply on desktop too. It also keeps @font-face and @keyframes whole.

If you would rather work from the saved files, the HTML + CSS tab of the same tool takes the HTML and the stylesheets instead. Elementor and its add-ons add some classes with JavaScript after the page loads, so put their prefixes in Always keep, for example /^elementor-/ and /^e-/, and compare the result with the original page before you trust it.

Step 3: deal with what needed WordPress

Entrance animations and hidden widgets

A widget with an entrance animation carries the class elementor-invisible, and Elementor's JavaScript removes it when the widget scrolls into view. In a copy without that script, the class never goes away and the widget stays invisible. Either keep Elementor's frontend scripts, or remove elementor-invisible from the HTML and let the widgets appear without the animation.

Forms

An Elementor form sends its data to WordPress, which is no longer there. Replace it with a form service that accepts a plain HTML form, or with a simple link that opens an email.

Links and leftovers

  • Check every internal link: WordPress addresses such as /about/ need a matching folder with an index.html, or a rewrite on the new host.
  • Remove the WordPress scripts the page no longer needs, such as the emoji script, and the ?ver= numbers on file names if you rename files.
  • Keep the srcset images the HTML points to, or phones will load the full-size picture.

Check before you switch

  1. Open the static copy and the original side by side at desktop, tablet and phone widths.
  2. Open every menu, tab and accordion, and scroll the whole page to catch hidden widgets.
  3. Run both through a speed test and compare the amount of CSS loaded.
  4. Keep the WordPress site and the full CSS files until the static copy has been live for a while.

Frequently Asked Questions

Can Elementor export a page as HTML?

Not directly. Its export saves a template as a JSON file for importing into another Elementor site. To get HTML, save the rendered page from the browser or use a static export plugin, then reduce the CSS.

Why are some sections invisible in my static copy?

They have an entrance animation. Those widgets carry the class elementor-invisible until Elementor's JavaScript removes it. Keep that script, or remove the class from the HTML.

Will the contact form still work?

No. Elementor forms send their data to WordPress. Replace the form with a form service that accepts a plain HTML form, or with an email link.

Is the unused CSS removed safely?

It keeps what Chrome recorded as used, so use the page thoroughly while recording, including menus and mobile widths. Rules are written back inside their media queries, and fonts and animations are kept. Compare the result with the original before replacing anything.
Try it: Extract Used CSS From a Chrome Coverage Export Unused CSS Remover

More guides

How to Merge PDF Files Without Uploading Them Most online PDF mergers upload your documents to their servers. For contracts, bank statements and ID scans there are better options. Open Graph Tags: How to Control Link Previews When a link is shared on Facebook, LinkedIn, WhatsApp, Slack or X, a few lines in the page's head decide which title, text and picture people see. How to Scan a QR Code on a Laptop or PC A QR code on your own screen cannot be scanned with the phone in your hand if the phone is the screen, and a laptop has no camera app for it. Here are the ways that work. How to Type an API Response in TypeScript fetch gives you data typed as any, which switches TypeScript off exactly where bugs come from. Here is how to give API data a real type, quickly and safely. Base64 vs Base64URL: What Changes and When to Use Each Base64URL is standard Base64 with two characters replaced, - for + and _ for /, and usually without the = padding. Convert an Image to JPG: WebP, PNG and iPhone Photos JPG is the most widely accepted image format; here is when and how to turn any image into a real JPG without installing software and without uploading anything.