Elementor Pro Tutorial

How to Create a Coming Soon and Maintenance Page using Elementor in 2021

Do you know creating a coming soon or maintenance page is more than designing a webpage? It not only requires designing a webpage but also needs to add some functionality for SEO purposes.

If you don’t use any CMS on your website, it may be tough for you to create a coming soon or maintenance mode page properly. Because you have to do all the stuff writing a lot of codes, which is very time-consuming. 

On the other hand, if you are running your website with WordPress, you can easily make a coming soon or maintenance page easily using the Elementor page builder. Elementor has some super functionalities to make this kind of web page within a few minutes.

This tutorial will show you how you can make a coming soon and maintenance page with Elementor. 

Let’s get started.

Difference Between Under Construction and Maintenance Mode

There is a big difference between under construction and maintenance mode. Almost every beginner becomes confused about when they should use these modes.

A coming soon or under construction mode is usually used to a new domain that hasn’t launched yet. When Google bot comes to visit your web page, this mode tells that your website hasn’t launched yet, but it will indeed launch within a few days. Google bot will start indexing your website. By doing this, you can easily add some SEO value to your website before launching it, which will help you later to rank your website on Google.

On the other hand, maintenance mode is used when an existing website goes down due to a lack of proper maintenance. Maintenance sends the search engine an HTTP 503 special header code so that it can realize that your website is under maintenance. In this way, you don’t lose your website’s SEO values. And, you users also can know when they should come back to your website if you set a countdown timer.

Create a Coming Soon Page (Step by Step Guide with Images)

Before you get started, firstly, install the Elementor page builder plugin to your WordPress website. 

Now, go to your WordPress Dashboard. From here, go to “Templates”. After that, click on the “Add New” button. 

After clicking the Add New button, a popup will prompt where you have to set some information. You can see a box that will tell you to select the type of the template you want to create. As it is a coming soon page, we will select “Page” from the first box. 

In the next box, give your template “Coming Soon” name. However, you can choose any name that you want. 

Next, click on the “Create Template” button.

Click the “Create Template” button will open up the Elementor Dashboard. In the Elementor dashboard:

  1. Click on the Settings icon to go to the page settings. 
  2. After that, head over to the Page Layout section. From here select “Elementor Canvas”. After selecting this, you will be able to see the dashboard similarly to the image below.
  3. Now, click on the Folder icon to open the Elementor template library. 

Elementor library is a collection of pre-made templates. If you like any template of the library for your web page or web section, you can insert it to your website with a few clicks. It won’t be needed to design your web page or section from scratch.

After opening the Elementor template library, head over to the “Page” section and write “Coming Soon” in the search box. On the other hand, if you want to build a maintenance page write “Maintenance” in the search box.

Then, it will only show you the coming soon template. If you want to preview a template, simply head over to a template. When you put your mouse cursor on a template, you will see a “+” icon to preview the template. 

After previewing, you can also add the template to your website by clicking on the “Insert” button.

Among the various types of templates, choose a template that mostly meets your requirements and insert it.

Here, we have chosen a template for the sake of this tutorial. You can change every element of this template by selecting them one by one. You can easily change the heading, paragraph, and add your social links to the social buttons. Don’t forget to give your contact address.

You can also style it and redesign the template again.

On the other hand, you may also need to insert a maintenance mode template. It is essential to add a countdown timer to the maintenance mode template. As an existing site owner, you have already lots of visitors and SEO values. If you set a timer to your website, your visitors will easily realize when they should come back to your website. 

Moreover, it also sends search engines a HTTP 503 code so that the Google bot can realize that your website is under maintenance. In this way, you will not lose your SEO value of your website.

After finishing all of this, hit the “Publish” button. 

Configure the Web Page Template

Now go back to your WordPress dashboard. Go to Elementor > Tools > Maintenance Mode.

Firstly, choose the mode. As we have created a coming soon page, choose “Coming Soon” for returning HTTP 200 code. However, if you have built a maintenance page select “Maintenance” to return HTTP 503 code. 

Next, come to the “Who Can Access” tab. Select “Logged in” from here. That means only the web master who has the login information can access the site. 

When you keep yourself logged in you can see your site’s real design. On the other hand, your visitors will see only the “Coming Soon” or “Maintenance” mode template that we have made.

You can see that Coming Soon page template when you log out yourself from the site.

In the next tab, select the page name that we have made. 

Lastly, hit the “Save Changes” button.

After hitting the “Save Changes” button, it will enable the “Maintenance Mode” on your website. You can see it on the top bar of your WordPress dashboard that contains “Maintenance Mode On” text with red color. 

Remember that this mode will show both for the coming soon and maintenance mode. 

When maintenance mode is on, you can easily design your website and solve all of your site’s problems that need to be fixed. 

On the other side, your visitors will see the maintenance mode page template. This delivers a better user experience to your potential visitors and keeps them more engaging on your site.

Conclusion

Congratulations, you have successfully created a maintenance mode page. I hope our tutorial has helped you a lot. If you liked our tutorial, please share it on social media with your friends. 

And keep connected with us to get more this type of definitiv and helpful tutorial. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top