Elementor's Maintenance Mode makes it easier than ever to build a maintenance mode site. This feature allows you to create a maintenance mode site that tells visitors you’re making updates and provides a timeline for the completion of the maintenance. It’s a friendly notice informing visitors to come back to your site later, and avoids interruption in the visitor experience.

The WordPress page builder Elementor offers this feature for free to its customers. Learn how to create one and see a couple of examples in action below.

Grow Your Business With HubSpot's Tools for WordPress Websites

For example, some major website changes may include fixing a bug, changing the site design, or switching servers. 

Maintaining your WordPress website in these ways means visitors can continue to read your blog, download your resources, purchase your products, or otherwise engage with your business online. 

But some of these maintenance tasks require downtime. To pose as little interruption to the visitor experience as possible, you’ll need a maintenance mode site like the one below when making those changes.

Elementor Maintenance Mode template with newsletter optin-form

Image Source

Why Create a Maintenance Mode Site

Most site maintenance doesn’t require any downtime. You can publish content, update your themes, and make minor site changes without disturbing the visitor experience. 

However, some site maintenance may take several hours. You might have to manually make substantial changes to your theme or launch a redesign of your site, which will affect the front-end of your site. That's why it’s too risky to conduct the maintenance while visitors are browsing your content or making a purchase. 

The solution is to set up a staging website, so you can make changes to your website in a test environment. Then, when the new changes perform well, you can push them to your live website with confidence. 

You'll also need to set up a maintenance mode site to tell visitors about what’s happening, provide an estimated timeline for when maintenance will be done, and offer other links to visit. 

How to Automate Maintenance Mode Elementor

There are two options for putting your WordPress website in maintenance mode. You can do so manually by adding code to your functions.php file. Or you can automate some of the process by using a maintenance mode plugin like Elementor.

The manual option is less ideal: it requires you to add code to the functions.php file and publishes a rather austere maintenance mode page.

WordPress maintenance mode default page

Using Elementor, on the other hand, allows you to create a custom maintenance mode site without any coding. 

Now that we understand the benefits, let's walk through how to create a maintenance mode site with Elementor.

How to Create a Maintenance Mode Site With Elementor

Elementor comes with a free built-in maintenance mode feature. Learn how to create your maintenance mode site by following the steps below.

1. In your WordPress dashboard, go to Templates > Add New.

How to Create a Maintenance Mode Site With Elementor step 1: Click Templates and Add New

2. Select Page as the template type and name it “Maintenance Mode.” Click Add template

How to Create a Maintenance Mode Site With Elementor step 2: Choose template type and name it maintenance mode

3. Click the gear icon in the bottom left corner.

How to Create a Maintenance Mode Site With Elementor step 3: Click gear icon

4. Under Page Layout, select Elementor Canvas from the dropdown menu.

How to Create a Maintenance Mode Site With Elementor step 4: Select elementor canvas as page layout

5. Then, click the folder icon to add a new template to the page. You can select a pre-built maintenance mode template and customize it, or create your own from scratch. 

How to Create a Maintenance Mode Site With Elementor step 5: Click the folder icon

Note: As of January 2022, Elementor has deprecated its pre-built maintenance mode templates as it's renewing its Template Library. You can expect new and improved templates to be uploaded shortly. In the meantime, try creating your own maintenance mode template. Here's a super simple example I whipped up in seconds.

Maintenance mode template example

6. Click Save as Template

How to Create a Maintenance Mode Site With Elementor step 6: Save as template

7. Go to Elementor > Tools. Click the Maintenance Mode tab.

How to Create a Maintenance Mode Site With Elementor step 7: Click Elementor and Tools and Maintenance Mode

8. Under Choose Mode, select Maintenance from the drop-down menu.

9. Under Who Can Access, select Logged In to allow anyone who logs into your site to not see the maintenance mode template or choose Custom to select all the user roles who can bypass maintenance mode, like administrators, editors, and authors.

How to Create a Maintenance Mode Site With Elementor step 9: Set Mode and Who can access drop-down menus

10. Under Choose Template, select Maintenance Mode (the template you just created).

How to Create a Maintenance Mode Site With Elementor step 10: choose maintenance mode template

11. Click Save Changes.

The maintenance mode is now activated. You should see a red button on the top WordPress bar with the text: Maintenance Mode ON.

How to Take Your Site out of Maintenance Mode With Elementor

After you’ve finished making changes, you can relaunch your website easily.

1. Go back to Elementor > Tools.

2. Click the Maintenance Mode tab.

3. Under Choose mode, select Disabled from the drop-down menu.

How to Take Your Site out of Maintenance Mode With Elementor: set maintenance mode to disabled

4.Click Save Changes.

How to Take Your Site out of Maintenance Mode With Elementor: click save changes

Maintenance Mode Page Templates

Elementor offers a variety of page templates you can customize to fit your brand message. Previously, it offered six pre-built maintenance mode templates. But as mentioned earlier, Elementor is renewing its Template Library and has deprecated these six templates. However, if you've already downloaded one of these templates and have it in use, you can keep doing so. 

Let's take a look at some of the templates from its archive. While you may not be able to use them, they can serve as inspiration when designing your own.

1. Maintenance Mode Template with Countdown Timer

under-construction-example-create-maintenance-mode-site-elementor

Image Source

The maintenance mode template design above is perfect for pre-planned site updates. If you know the completion time of the maintenance, you can add a countdown clock to the page to entice visitors to come back.

2. Maintenance Mode Template with Contact Info

under-construction-tractor-example-create-maintenance-mode-site-elementor

Image Source

For unexpected website fixes, you can use the template design above to provide your visitors with a quick notice about the site maintenance. You also can include your contact details on the page if customers need support in the meantime.

3. Maintenance Mode Template with Social Icons

Maintenance-Mode-3 (1)

Image Source

This template design is ideal for sites that have repeated maintenance periods, like an annual conference site. Once the event is over, you can use the template design above to provide your visitors with a quick note that you're revamping the site for next year's event. You also can include social media icons to drive website visitors to your active social channels so they stay engaged.

4. Maintenance Mode Template with Contact Form

Maintenance-Mode-5Image Source

The maintenance mode template design above is perfect for converting visitors, even during maintenance. Instead of bouncing from your site possibly to never return again,  visitors can fill out the contact form to get in touch with you. 

Elementor offers several other templates for you to customize into a maintenance mode site. Check out the template library here.

Maintaining Your WordPress Website With Elementor

Website maintenance is necessary to ensure your site works properly. With a maintenance mode site, you can inform visitors about routine and unexpected site maintenance. Also, Elementor makes it easy to build a maintenance mode site with its premade templates. Take the time to maintain your website while still providing a positive visitor experience. 

Editor's note: This post was originally published in November 2019 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Feb 24, 2022 7:00:00 AM, updated February 24 2022

Topics:

WordPress Plugins