Previewing and saving your website changes

Before changes go live, it is important to check how they look. Previewing lets you see updates without showing them to visitors. This helps catch layout issues, broken links, or mistakes before saving.

This guide explains how to preview pages and posts in WordPress, how saving works, and when changes become visible on the website. It also covers restoring previous versions if something goes wrong.

If you ever save a change by mistake, you can roll back to an earlier version. Knowing this makes editing safer and less stressful.

How to Preview and Save Changes

Preview your page as visitors will see it

In this part you will learn how to preview your changes before publishing and how to save the updated page correctly. You will also learn what to do if the page does not save, how to avoid losing your edits and how to make sure everything looks right on the live website.

How to Preview and Save

Step 1
After editing text, images or buttons, look in the top-right corner of the editor.

Step 2
Click Preview if you want to see how the page will look before publishing the changes. It will open in a new tab.

Step 3
Return to the editor and check the top-right corner again.

Step 4
Click Update to save your changes.

Step 5
Wait until the Update button turns grey and shows “Updated”. Do not close the page before this happens.

Step 6
Open the live page in a new tab and refresh it to confirm that all changes are now visible.

Repeat these steps each time you make edits.

Your browser may be showing an older cached version of the page. Refresh the live page or open it in a private/incognito window. If the update still does not appear, your site may be using a caching plugin or server-level cache. Ask your designer to clear it.

If the button is grey and cannot be clicked, it usually means there are no new changes to save. Sometimes it also happens if the editor is still loading or a block has not finished updating. Wait a few seconds or refresh the editor.

Most of the time you do not lose your work. WordPress autosaves your changes. If an error appears, copy any important text, refresh the editor and check for an Autosave notice at the top. You can recover the latest version from there.

Yes. The editor gives a simplified preview of spacing and styling. The live page uses the full theme design. Always check the final look using the Preview button or by opening the live page in a new tab.

If the page was not saved and autosave did not trigger, the changes may be lost. Open the page again and look for an Autosave notification at the top. If one exists, you can restore it. To avoid loss, always click Update before leaving the editor.

Viewing Your Updated Page

Make sure your updates look correct

In this part you will learn how to check your updates on the live website once you have saved your changes. You will see how to open the live page, refresh it correctly and confirm that all text, images and buttons appear exactly the way you want.

How to Check the Live Page

Step 1
After clicking Update in the editor, open your page in a new browser tab.
You can do this by clicking View Page in the top bar.

Step 2
Refresh the page using your browser refresh button.

Step 3
Scroll through the page and check all updated areas: text, titles, buttons and images.

Step 4
Confirm that everything loads correctly on desktop.
If your website is responsive, also check it on mobile.

Step 5
If something looks wrong, return to the editor, make the correction, save again and refresh the live page.

Most of the time, this is a caching issue. Your browser may be showing an older version of the page. Refresh the page a few times or open it in a private/incognito window. If you still cannot see the update, your website might be using a cache plugin or server cache. Ask your designer to clear it.

The editor shows a simplified version of your layout. The live page uses full theme styling, spacing and responsive settings. Titles, paragraph spacing and button alignment may look slightly different. This is normal. If something looks broken rather than different, update the page again or contact your designer.

This is also usually due to caching. Browsers often store old images. Try a hard refresh:
Windows: Ctrl + F5
Mac: Cmd + Shift + R
If it still does not update, clear WordPress cache (if used) or ask your designer to flush server cache.

A block may have been moved accidentally or a layout element edited by mistake. Go back to the editor and press Undo until the layout returns to normal. If you already saved the page, open Revisions and restore an earlier version.

Check that the link you entered is correct and includes the full address. For internal links, make sure you selected the correct page. Test the button again after refreshing the live page. If the button works in the editor but not live, it is likely cached – refresh the page or try a private window.

Restoring Previous Versions

Simple steps to undo editing errors

In this part you will learn how to undo recent changes and how to use WordPress revisions to restore older versions of your page. This helps you fix mistakes, recover lost text and return your layout to a stable version without rebuilding anything from scratch.

How to Use Undo and Revisions

Step 1
If you make a small mistake, press Undo at the top-left of the editor.
This reverses your last action.

Step 2
Continue pressing Undo to step back through multiple changes.

Step 3
If the mistake happened earlier or you already saved the page, look for Revisions on the right side or below the Update button.

Step 4
Click Revisions to see all saved versions of the page.

Step 5
Choose a previous version, compare it with the current one, and click Restore This Revision to bring it back.

Step 6
Review the restored page, make any extra changes and click Update to save.

Yes. If the page was saved, normal Undo will not work, but Revisions will. Open Revisions and choose an earlier version. This feature stores many previous versions, so you can recover text, images or layouts that were saved incorrectly.

The Undo button is located in the top-left of the editor, next to the Redo button. If you do not see it, your browser window might be too small. Expand your window or zoom out slightly until the toolbar appears again.

Yes. Revisions do not remove your newer versions. After restoring an older one, you can open Revisions again and choose a different version. You can move back and forward until you find the version you want.

No. Revisions do not delete your media files. They only restore the page content to a previous saved state. Your uploaded images stay in the Media Library, so you can still use them again later.

There are three possible reasons:

The sidebar is collapsed. Click the settings icon (top-right) to reopen it.

You have not saved the page before, so no revisions exist yet.

Your user role does not allow revision access. Ask your designer for Editor or Administrator access.

Back to index

You might like these too

These sit in the same category as the one you are reading. They follow the same thread and offer a bit more depth. Have a look if you want to go further.