Why your Elementor page looks different to visitors than in the editor

Captions available · press CC · Also on YouTube

In the Elementor editor your page looks right. Then you open it the way a customer does, and something is different: an old colour, a page that has lost its styles, or empty frames where your photos should be.

Your page is usually fine. What a visitor gets simply isn't the same thing as what the editor shows you. Everything below, and in the film above, was done on a real WordPress site with Elementor 4.4.0 and a free caching plugin from WordPress.org: we made each of these three causes happen on our own site, and put each one right.

Why the editor and your visitors can see different pages

The editor shows you the page you're working on. A visitor gets a page put together from several stored pieces: a stored copy of the whole page, the file that holds the page's styles, and addresses built from the site's saved address. Each of those can be out of step with what the editor shows. On our site we found three ways that happens.

Cause 1: A stored copy of the whole page

A cache, often your caching plugin's, keeps a ready-made copy of each page and gives it to visitors. When you're logged in, you aren't given that copy, so you see your change and they don't. Elementor's own help page puts it plainly: when a change shows while you're logged in but not for logged-out visitors, "the site is almost certainly serving cached content". It lists more places a copy can be kept: your caching plugin, your host, a service in front of your site (a CDN), and your browser.

1. What we did. In Site Settings › Typography › Link › Color we changed the link colour (the shop's name and the menu) from pink to teal, and saved.
2. What we saw. Logged in, the live page was teal straight away. In a private window, as a visitor, it was still pink.
3. What put it right. Emptying the caching plugin's cache (ours: Delete Cache, in the bar at the top of the dashboard). After that, the private window showed teal too.

The step-by-step fix for this one has its own post: Elementor changes not showing on your live site? Here's the fix.

Cause 2: The file that holds the page's styles

Elementor has a setting called CSS Print Method, in Elementor › Editor › Settings › Performance. Its two options are Internal Embedding, which keeps the styles inside each page, and External File, which keeps them in a file of their own; the screen marks External File "(recommended)". For cause 1, our site was set to Internal Embedding. For this one we set it to External File and made the same change.

1. What we saw. In the editor, the page looked right. A visitor got the home page without its styles: everything in one plain column.
2. Why. Saving Site Settings had cleared Elementor's style files, but the stored copy of the page (cause 1) still asked for the old ones, which were gone.
3. Clear Files & Data, in Elementor › Editor › Tools. Its screen says it clears "outdated CSS files and cached data" and that the files are made again "the next time someone visits any page on your website". On our site, clicking it did not bring the page back on its own: the visitor still got the page without its styles.
4. What put it right. Emptying the caching plugin's cache. The next visit got a freshly made page, with its styles, in the new colour.

Cause 3: The site's address, saved as http while the site runs on https

Our site runs on https, but in WordPress, under Settings › General, its two addresses (WordPress Address and Site Address) were still saved as http. Parts of the page were then still asked for at the http address, and on a secure page the browser refuses to load them. On our site that was the photos (on the stored copies of pages first visited over http) and two of Elementor's style files. Elementor's help page on fonts names this cause: when those addresses "still use http://", it "creates mixed content errors once the site is accessed via HTTPS". On our site the fonts were fine; the photos were what went missing.

We put it right with the steps on Elementor's fonts page that applied to our site:

1. Settings › General: make both the WordPress Address and the Site Address start with https, and click Save Changes. WordPress asked us to log in again.
2. Elementor › Editor › Tools › Replace URL: the old address (http) in the first box, the new one (https) in the second, then Replace URL. Ours said "4 database rows affected."
3. Clear Files & Data, on the General tab of the same Tools screen.
4. Empty your cache: your caching plugin's, and your host's or a CDN's if you have them.

Elementor's page also suggests asking your hosting provider to send every http visit to https, so the whole site stays on https.

What you can do

• Look at your site the way visitors do, in a private window, not only logged in.
• After a Site Settings change, empty your cache. A change there reaches every page.
• If you use Clear Files & Data, empty your cache straight after.
• When your site moves to https, change both addresses in Settings › General, then use Replace URL and Clear Files & Data.

Or, there is another way

In all three cases, what we saw in the editor and what our visitors got were not the same. If your site is a few pages, a contact form and some photos, there is also a different way to keep it.

Ullbek is an AI website builder. You hand it your site's words and your own photos, and it builds a new, custom website with a new look. When we tried it with the Ottermoor Flowers site from this post, every page was kept at the same address, all of the wording was kept word for word, and only the florist's own photos were used. It asked one question, about the colours, and took about a quarter of an hour. The preview is the published site: what you see is what goes live. When something needs to change, you say what should be different.

1. Put your words and photos together. One text file with each page's wording and its address, and the photos that are yours.
2. Say what you want. Ours: "Build a new website for my flower shop, Ottermoor Flowers, with a new look. The words for every page are in the file I've attached, my-website-words.txt, and the photos are my own. Keep every page and all my wording, put each page at the address written in the file, and use only my photos." It asks what it needs to know, and builds.
3. Look it over, publish, then move your domain. The move guide walks through every step, including what to collect from your old host first.