How to Preview Your WordPress Website Before Going Live

How to Preview Your WordPress Website Before Going Live


Shares

468

Share

Tweet

Share

Facebook Messenger
WhatsAppEmail

Over the years, we’ve written and updated thousands of blog posts and created different landing pages in WordPress. One of the most important steps in our editorial process is to preview any content before publishing it.

Previewing your website before publishing it allows you to catch any errors, design issues, missing items, and spelling or grammar mistakes.

In this article, we will show you how to easily preview your website before going live without hurting the user experience.

Preview your WordPress website including theme, posts, pages, and morePreview your WordPress website including theme, posts, pages, and more

Here is a quick overview of the topics we will cover in this guide. Feel free to use the links below to jump to specific sections:

  • Preview WordPress Site Before Launch with Coming Soon Mode
  • Allow Clients to Preview the WordPress Site Before Going Live
  • Create a WordPress Staging Website to Preview Changes
  • Preview WordPress Posts and Pages Before Publishing
  • Preview a WordPress Theme Before Switching
  • Preview WordPress Theme Customizations
  • Preview Your Custom WordPress Theme
  • Preview WordPress Landing Pages Before Launch

Ready? Let’s get started.

Preview WordPress Site Before Launch with Coming Soon Mode

If you are creating a new WordPress website, then it’s always recommended to enable coming soon mode while you work on your site.

This allows you to display a proper coming soon page to website visitors. You’ll still be able to log in to the WordPress admin area and work on your website, but your visitors won’t be able to see it.

The best part is that you’ll be able to preview your website and do all the necessary testing before making it live.

To do this, you’ll need SeedProd. It is the best WordPress website builder on the market and allows you to easily show a beautiful coming soon page.

To learn more, see our detailed SeedProd review.

Note: In this tutorial, we will be using the pro version of SeedProd, so we can use all the templates and advanced features, but there’s also a free version that you can use to easily create simple coming soon pages.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the SeedProd » Settings page to enter your license key. You can find this information in your account on the SeedProd website.

SeedProd license keySeedProd license key

Next, head to the SeedProd » Landing Pages screen from the WordPress dashboard.

From here, simply click on the ‘Set up a Coming Soon page’ button.

Set up coming soon pageSet up coming soon page

After that, the plugin will ask you to choose a template for your coming soon page.

SeedProd comes with several beautiful coming-soon templates that are professionally designed to increase conversions.

Choose templateChoose template

Upon choosing a template, SeedProd’s page builder interface will open up on the screen.

The page builder is an intuitive design tool. You can simply point and click to edit any item or drag and drop new items to your layout from the left column.

Page builder interfacePage builder interface

You can also add an email signup form and social media buttons to your coming soon page so your users can follow your brand even before launch.

Once you have finished with the page design, switch to the connect tab at the top. From here, you can integrate your email marketing service to grow your list and notify people when your site goes live.

For more detailed instructions, you may want to see our tutorial on how to create coming soon pages in WordPress with SeedProd.

Connect email marketing serviceConnect email marketing service

Once you are finished, click on the ‘Save’ button to store your changes.

Then, select Publish to make your coming soon page ready to use. Don’t worry, it’s not active on your website yet. We will do that in the next step.

Publish your coming soon pagePublish your coming soon page

You can now close the page builder interface, which will take you back to the SeedProd » Landing Pages screen.

Here, click on the toggle under the coming soon page box to ‘Active.’ This will ensure that all your website visitors see your new coming soon page instead of your actual website.

Turn on coming soon modeTurn on coming soon mode

You can now log out of the WordPress admin area or visit your website in Incognito mode.

You will see your coming soon page live on your website.

Coming soon modeComing soon mode

You can still log in to your WordPress admin area and continue working on your website.

You’ll also be able to preview your live website when logged in.

Preview your websitePreview your website

Once you are finished working on your site, you can simply go to the SeedProd » Landing Pages screen to turn off your coming soon page.

Here, click the ‘Active’ slider to set it back to inactive.

Turn off coming soon pageTurn off coming soon page

SeedProd also allows you to easily put your website in maintenance mode while working on your website with live preview.

Allow Clients to Preview the WordPress Site Before Going Live

If you are working on client websites, then there are several ways to easily allow clients to preview changes on a WordPress website before going live.

However, the easiest way is by using a Coming Soon Page created with SeedProd, as we just showed above.

Once you have turned on Coming Soon Mode to active, you need to click the ‘Edit Page’ button.

Edit coming soon pageEdit coming soon page

This will launch the page builder on your screen, where you have to switch to the Page Settings tab.

Then, click on the ‘Access Control’ section.

Allowing clients to preview a websiteAllowing clients to preview a website

From here, you can create a Bypass URL and choose the URL expiration duration. Don’t forget to save your changes.

Your clients can now use the secret URL to bypass the coming soon page and preview the website.

If your website is already live, and you want to share changes with your clients before going live, then we will cover that in the next step.

Create a WordPress Staging Website to Preview Changes

It is standard best practice among web professionals to create a staging website so you can test and preview any changes before applying them to a live site.

A staging website is a private clone of your website. It is hidden from the main public, giving you the advantage of testing and previewing your changes on your live server.

Many of the top WordPress hosting companies offer a 1-click staging website. You can simply click a button to create a staging website and easily sync any changes you make with your live site.

For the sake of this article, we will show you how to create a staging website on Bluehost.

Bluehost is one of the largest hosting companies in the world and an officially recommended WordPress hosting provider. They offer a 1-click staging site feature to all their WordPress customers.

First, you must ensure the Bluehost plugin is installed and activated on your website. If it is already activated, you’ll see a Bluehost menu item at the top of the WordPress admin menu.

Bluehost plugin installedBluehost plugin installed

If you cannot see the Bluehost menu, then you can log in to your Bluehost hosting account control panel and click on the ‘Websites’ button.

After that, click ‘Settings’ on your website.

Bluehost site settingsBluehost site settings

Under the site management area, switch to the ‘Plugins’ tab.

Then, activate the Bluehost plugin.

Activating the Bluehost plugin from the Bluehost dashboardActivating the Bluehost plugin from the Bluehost dashboard

Once you’ve made sure that the Bluehost plugin is installed, you are ready to create your staging site.

From the WordPress admin area, click on the Bluehost plugin page and switch to the ‘Staging’ tab.

Navigating to the Staging tab in the Bluehost plugin page inside WordPressNavigating to the Staging tab in the Bluehost plugin page inside WordPress

After that, click ‘Create staging site.’

The plugin will then generate your staging website.

Creating a staging site in BluehostCreating a staging site in Bluehost

Once finished, you can click ‘Not currently editing’ to switch to the staging site and start working on it.

You can now work on your staging website and see your changes on a live preview.

Switching to the Bluehost staging siteSwitching to the Bluehost staging site

Once switched, you’ll see a red ‘Staging Environment’ notice in the WordPress admin bar.

This is to help you tell the difference from your live site.

The Staging Environment label in the WordPress admin area when editing a Bluehost staging siteThe Staging Environment label in the WordPress admin area when editing a Bluehost staging site

Once you have finished previewing your changes on the staging website, you can go to the Bluehost plugin page again and navigate to the ‘Staging’ tab.

From here, select ‘Deploy All Changes’ and click the refresh button to make the changes live.

Deploying all the changes from the Bluehost staging site to the live siteDeploying all the changes from the Bluehost staging site to the live site

For more details and instructions for other hosting environments, see our detailed guide on how to create a staging site for WordPress.

Preview WordPress Posts and Pages Before Publishing

WordPress uses an intuitive block editor that automatically uses your theme’s styling to show a live preview of your posts and pages.

However, it may not give you a clear idea of how a post or page may look on your website with your headers, sidebars, and everything else on the page.

Block editor previewBlock editor preview

Luckily, the block editor also allows you to preview a post or page without publishing it.

Simply click on the ‘Preview’ button in the top-right corner.

Preview options for post and pagesPreview options for post and pages

You can choose between Desktop, Tablet, and Mobile preview options, but these will only show you the preview inside the content editor.

After choosing a device type, click the ‘Preview in the new tab’ option to view the full preview on your website.

WordPress will then show you a preview of your post or page before going live.

If you want to allow someone else exclusive access to preview one of your unpublished posts, then see our guide on how to allow public post preview in WordPress.

Preview a WordPress Theme Before Switching

Normally, if you activate a WordPress theme, then it immediately goes live on your website.

If you are not using a staging website, then your users will see the new theme without any customizations.

Wouldn’t it be nice if you could preview a WordPress theme before activating it on your website?

Luckily, WordPress allows you to preview a theme before activating it.

Simply install the WordPress theme that you want to preview. For more details, see our guide on how to install a WordPress theme.

After installing the theme, click on the ‘Live Preview’ link.

Live preview option after installing a themeLive preview option after installing a theme

Alternatively, you can also visit the Appearance » Themes page and take your mouse over an installed theme.

You’ll see a button to launch the ‘Live Preview.’

Live preview themeLive preview theme

WordPress will then launch Theme Customizer.

Here, you’ll see a live preview of the theme with your current content.

Live preview WordPress themeLive preview WordPress theme

The theme customizer will use your existing content and navigation menu. You can try out different theme settings from the left panel.

You can exit the theme customizer without activating the theme. However, this will not save your customizations.

If you are satisfied with how the theme looks, then you can go ahead and activate it by clicking on the ‘Activate & Publish’ button at the top of the menu.

Need help switching themes? See our tutorial on how to properly switch your WordPress theme.

Preview WordPress Theme Customizations

Want to make changes to your WordPress theme but not sure how they would look on your live site?

WordPress comes with different ways to preview your WordPress theme before applying those changes.

For most WordPress themes, you can preview your changes by using the theme customizer. Simply go to the Appearance » Customize page to launch it.

Customize theme previewCustomize theme preview

From here, you can try different theme options, change menus, customize widgets, add custom CSS, and more.

This allows you to preview theme changes without actually applying them to your website.

Once you are satisfied with the changes you made, you can click on the ‘Publish’ button to apply those changes. Optionally, you can also click the gear icon to save your changes as a draft, schedule your changes, and share a preview link with clients.

Save and publish your changesSave and publish your changes

Now, this method may not be available for the WordPress block themes using the Full Site Editor.

In that case, you can launch the editor by visiting the Appearance » Editor menu.

Full site editor previewFull site editor preview

The full site editor allows you to edit your WordPress theme using blocks. You can edit individual template files with a live preview of your website.

For more details, you can see our complete guide to WordPress full site editing.

However, unlike the Theme Customizer, you will not be able to save your changes as a draft. These changes will go live when you save your changes or be lost if you exit without saving.

Preview Your Custom WordPress Theme

Do you want to create a completely custom WordPress theme with a live preview?

SeedProd is the best WordPress theme builder that allows you to create a custom WordPress theme using a drag-and-drop interface with live preview.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the SeedProd » Settings page to enter your license key. You can find this information in your account on the SeedProd website.

SeedProd license keySeedProd license key

Next, you need to visit the SeedProd » Theme Builder page.

From here, click on the ‘Themes’ button.

Theme builderTheme builder

This will bring up a popup where you can choose a theme to use as a starting point.

SeedProd comes with a bunch of beautiful themes and templates that you can customize.

Choose a starter themeChoose a starter theme

Simply click to select a theme, and SeedProd will generate all the theme template files for you.

You can now click on any of these theme files to edit them in the theme builder.

Theme templatesTheme templates

SeedProd comes with an intuitive drag-and-drop builder that uses blocks and sections to create beautiful layouts.

You can add blocks to your design from the left column. To your right, you will see a live editable preview of your theme template.

Build your theme with live previewBuild your theme with live preview

SeedProd also comes with full support for WooCommerce.

That means you can design and preview your online store, including product pages, checkout pages, and more.

WooCommerce store previewWooCommerce store preview

Want to preview your theme for mobile devices?

Simply click on the mobile icon at the bottom bar, and SeedProd will show the mobile preview of your theme.

Mobile preview of your themeMobile preview of your theme

Once you are finished editing your theme, you can click on the ‘Save’ button at the top-right and exit the builder. You can then edit other templates if necessary.

When you are ready to deploy your custom theme, simply turn on the ‘Enable SeedProd Theme’ toggle on the theme builder page.

Enable custom themeEnable custom theme

Your custom theme will now go live. That means it will replace your existing WordPress theme.

To learn more about the SeedProd custom theme builder, see our tutorial on how to create a custom WordPress theme without writing any code.

Preview WordPress Landing Pages Before Launch

Landing pages are specialized pages used in marketing campaigns. These pages are highly optimized for conversions and sales.

Some WordPress themes come with landing page templates that you can customize using the block editor.

However, if you need more design options, then you’ll need SeedProd. It is the best WordPress landing page builder and allows you to easily create beautiful landing pages for your website.

SeedProd comes with dozens of professionally designed landing page templates to get you started. Plus, your landing pages will look equally great on all screen sizes.

First, you need to install and activate the SeedProd plugin. Upon activation, you need to visit the SeedProd » Settings page to enter your license key.

You can find this information in your account on the SeedProd website.

SeedProd license keySeedProd license key

Next, head over to the SeedProd » Landing Pages screen from the WordPress admin sidebar.

To get started on designing your page, click the ‘Add New Landing Page’ button.

Add new landing pageAdd new landing page

Next, you need to choose a template.

There are several highly optimized templates that you can use as a starting point, or you can start with a blank template.

Choose landing page templateChoose landing page template

This will bring up a popup where you need to enter a name for your landing page and choose a URL slug.

Then click on the ‘Save and Start Editing the Page’ button to continue.

Landing page nameLanding page name

This will launch the page builder interface.

It is a drag-and-drop design tool where you can design your page with a live preview.

Landing page previewLanding page preview

Once you are done editing your landing page, you can click on the ‘Save’ button and select ‘Publish’ to make it live on your website.

To learn more, see our tutorial on how to create landing pages in WordPress.

We hope this article helped you learn how to preview your WordPress website before going live. You may also want to see our guide on how to create a WordPress disaster recovery plan and comparison between coming soon vs maintenance mode.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.


Shares

468

Share

Tweet

Share

Facebook Messenger
WhatsAppEmail
Lượt xem: 13

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *