In this tutorial we will learn how to set up a Coming Soon page, (for websites under construction) as well as a Maintenance Mode page (for live websites), how to activate them, and finally, how to preview these pages as a visitor.
The tutorial will cover:
✔︎ Building a Coming Soon page with Elementor
✔︎ Setting your website to Maintenance Mode
✔︎ Maintenance mode settings
✔︎ The difference between Maintenance Mode and Coming Soon
✔︎ And more!
See Also:
Maintenance Mode Article
Coming Soon Article
Maintenance Mode Post
Hey there, its Ash from Elementor.
Today we’re going to learn how to set up a Coming Soon page or Maintenance Mode using Elementor.
If you’re building a new website, or applying changes to an existing one, it’s likely you do not want your visitors to view your site until it’s ready to launch.
In today’s example, I’m building a fashion store website.
As I’m still working on developing this website, I’d like to show this coming soon page to let my visitors know that things aren’t quite ready yet.
In this tutorial, we’ll learn how to create a template for a coming soon or maintenance page, enable it, and finally review it as a visitor.
Let’s get started with creating our template. In the WordPress dashboard, head to Templates > Add new, ensure you have this set as a page template, then give it a name. We’ll call ours ‘‘Coming Soon Page”.
By default we can see the theme’s header, page title, and footer. Since we would like to prevent visitors from navigating on the website, we can choose to hide these elements.
Select the settings icon and switch the page layout to Elementor Canvas. The canvas page layout allows us to design with complete freedom and automatically removes the page header, page title and footer which are set by our theme.
If you click the library icon, and search for “Coming soon” or “Maintenance” you’ll find some great designs to start with.
You can choose one of these, or you can create your own customized design. I’m going go ahead and insert a template I created earlier.
Whenever we import a template, we’ll be asked if we would like to also import the document settings of the template. For ours ours, we’ll select no.
Ok, great.
Once you have finished building your template, and making sure your design is responsive, click Publish.
All we have to do now is return to the WordPress’ dashboard and activate the Coming Soon mode.
On the dashboard, go to Elementor > Tools > Maintenance mode, and change the mode to Coming Soon.
If your website has different levels of access, you can decide here who will be able to view it. For example, only administrators or editors or you can set it to everyone who is logged in.
Next, Choose the template we’ve just created and then click the Save Changes button.
We’ll now see a red notice saying “Maintenance mode ON” at the top of our dashboard.
The website will be available for you, as an administrator, but not for your visitors.
To see this in action, you can log-out, or simply enter incognito mode in your browser.
And paste your website’s URL. The same thing applies when you’re working on a live website, and you wish to disable it for a short period. This is good practice so your visitors don’t experience any broken pages.
In this instance, you should enable “Maintenance Mode.”
The difference with maintenance mode is that your website temporarily deters search engines and tells them to come back later. This is achieved with a 503 response which informs search engines you’re simply performing maintenance and won’t affect your ranking.
It’s important to ensure your website is accessible as often as possible, so be sure to not have maintenance mode activated for too long.
Just like with the coming soon mode, your visitors will see this instead of an unfinished website.
And we have it, you now know how to set up a Coming Soon page or Maintenance Mode using Elementor.
Be sure to comment below with any questions and don’t forget to like and subscribe for more great tutorials.
