How To Use the New Elementor Coming Soon and Maintenance Modes
What do you do when you’re launching a new site or working on an existing landing page on WordPress? Did you install a third-party plugin to let you create coming soon or maintenance pages? Or do you just…not put up anything at all because it’s too much trouble to go through setting up dedicated maintenance and coming soon pages?
If either of those sound like you, then you should give this post a read. Because Elementor, in the spirit of releasing new features that set it apart from the competition, has just made it stupid simple for you to create beautiful maintenance and coming soon pages.
And the best part? The new coming soon and maintenance mode functionality is 100% available in the free version of Elementor Page Builder. You don’t need to pay a dime.
What’s The Difference Between Maintenance and Coming Soon?
Maintenance and coming soon pages are both enabled from the same dropdown menu. When you enable either mode, you can choose:
- Which template to use for the page
- Who can still access your site (either all logged in users, or just selected user roles)
So what’s the difference between the two? It’s all in the header response codes!
When you set your site to maintenance mode, it returns an HTTP 503 code. This basically tells Google and other search engines (as well as your visitors’ browsers) that your website is temporarily unavailable and that they should come back soon.
On the other hand, with coming soon mode, your site will return a 200 OK code. This is the code that normal, functioning websites return. What’s the implication of 200 OK? Search engines will still go ahead and index your page.
How Does It Work?
Ok, here’s how simple it is to create a WordPress coming soon or maintenance page using Elementor.
Step 1: Create the Design for Your Page (or Use a Template)
Before you can select a template to use for your coming soon or maintenance page, you need to actually…create that template. Pretty self-explanatory, right? To do that, you can just create a new page and start designing it using Elementor.
For these types of pages, it’s a good idea to use Elementor’s blank canvas template. You can enable the full-width template by clicking on the Hamburger icon, then going to Page Settings and selecting Elementor Canvas. This gives you a completely blank page to start from – which makes sense because you don’t really want your WordPress navigation menu to display on your maintenance or coming soon page:
Then, you have a choice. You can either:
- Start from one of the 9 included coming soon/maintenance page templates
- Build your page from scratch using the normal Elementor builder interface
For this example, I’m going to use one of the templates and then just tweak a few things to make it fit.
To add the template, just click Add Template, scroll to the bottom of the template list, and choose one of the many predesigned Coming Soon templates (note – about half of the templates do require the Pro version – but there are still multiple free options):
Once you’ve chosen your template, you can edit it like you would any other Elementor page.
I’ll just make a few tweaks to the text and….
Ready to go!
Now, you just need to save it as a template by clicking the button at the bottom left corner:
…and giving your coming soon page a name:
And now you’re ready to actually turn on your coming soon page.
Step 2: Turn on Coming Soon/Maintenance Page and Set Access
Now that you’ve got your template, you need to actually tell Elementor to display it to your visitors. To do that, head to Elementor → Tools and scroll down to the Maintenance Mode section.
First off – choose your mode. Remember:
- Coming Soon – 200 OK response
- Maintenance – 503 temporarily unavailable response
Then, once you’ve selected your mode, choose your access levels. People with access will still be able to access your normal WordPress site – they will not limited to your coming soon or maintenance pages.
You have two options for granting access:
- Allow all logged in users
- Use Custom access to only allow specific roles
If you have something like a membership site, you’ll probably want to use the Custom option so that your regular members still see the maintenance page. Otherwise, you should be ok to just use the all logged in option.
If you choose Custom, you can configure it like this:
And finally, the last thing you need to do is select your saved template from the dropdown:
And that’s it! Once you click Save Changes, your coming soon or maintenance page will be live.
Step 3: Work in Maintenance Mode
Because you can still see the normal version of your site, you’re now free to keep working as usual. Elementor adds this handy Maintenance Mode ON indicator to your admin bar to always remind you that you have maintenance turned on (and therefore non-logged in users can’t access your site):
And speaking of non-logged in users – everyone who doesn’t have access will see this when they try to visit your site (or your applicable design):
Whenever you’re finished working on your site, all you need to do is go back and Disable maintenance mode to have your site display like normal again.
Wrapping Things Up
While this isn’t a feature that you’ll use every day, it’s still an awesome tool to have in your arsenal. Previously, you would’ve needed a third-party plugin to create an under construction page for WordPress.
Now, it’s all baked into Elementor, which means:
- There’s one less plugin you need to install
- You can create better-designed pages because you have full access to the normal Elementor page builder interface
If you think this feature sounds cool, you can get started with it for free. As I mentioned, there are zero restrictions on the functionality of this feature in the free version. The only thing you’re missing out on is a few of the premium coming soon templates which add countdown timers and other neat functionality.
Ready to go?