How to create Maintenance Mode Page in WordPress using Beaver Builder

How to Create a Maintenance Mode Page in WordPress (In 4 Steps)

If you’re going to be performing extensive updates on your WordPress website, you might be wondering how to create a maintenance mode page in WordPress. This can be an effective way to keep your audience informed. Additionally, it can generate buzz about upcoming content.

In this post, we’ll explain what maintenance mode pages are and why you might want to use them on your WordPress website. Then, we’ll show you how to set one up using Beaver Builder. Let’s get started!

An Introduction to Maintenance Mode in WordPress

When making major changes to your website, it’s a good idea to enable maintenance mode. This notice tells your visitors that your site (or certain pages) are currently offline.

Generally, maintenance mode pages give information about why your content is unavailable. Although your audience can’t view a specific page, you can tell them when it will be back up:

Maintenance mode page

Editing themes and plugins on a live site display error pages to users. When this happens, visitors won’t be able to immediately find the content they’re looking for. Ultimately, error pages can hurt your credibility and increase bounce rates.

Although accidental error pages can be harmful, you could create a custom 404 error page to re-engage visitors. However, maintenance mode pages are often better options.

With a maintenance mode page, you can inform your audience when they can return to your website and access information. Additionally, these pages can contain lead capture forms, enabling you to contact users even after leaving.

Why You Might Want to Design a Maintenance Mode Page for Your WordPress Website 

Websites often need routine maintenance, such as deleting spam comments or performing backups. For these smaller tasks, your site won’t experience any downtime. However, it’s important to know how to create a maintenance mode page when fixing larger functional issues.

You should consider making a maintenance mode page when:

These changes can cause serious problems such as 404 error pages or the White Screen of Death on a live website. After encountering these functional issues, visitors could potentially become frustrated and leave your site.

This is when a maintenance mode page can be useful. It can make your website look more professional. Furthermore, this page can tell your audience that you’re actively updating your site to create a better experience for them.

Even though users won’t find the content they came for, maintenance mode pages can tell them when it will become available. This information can be more encouraging for first-time visitors than a 404 error page. Plus, many maintenance mode pages contain an email sign-up form where users can subscribe for more updates.

You might also use a maintenance mode page to promote new product launches or a website redesign. By creating a coming soon landing page, you can generate a buzz before your launch date.

How to Create a Maintenance Mode Page in WordPress (4 Steps)

We recommend using our Beaver Builder plugin to create your first maintenance mode page. You can easily create a custom design with our drag and drop page builder. If you prefer to dedicate less time to design, you can access a pre-designed maintenance mode page layout.

If you need more advanced customization, you can also download the PowerPack Beaver Builder Addon. It comes with a professionally designed Template Library, including maintenance mode and coming soon pages.

Step 1: Add a New Page

For the first part of this tutorial, we’ll be using the free Beaver Builder plugin. Later on, we’ll show you how our premium tool can take your maintenance mode page even further. If you already have a premium version of Beaver Builder installed then you are all set.

First, go to the Plugins page in your WordPress dashboard. Click on Add New and search for “Beaver Builder Lite”. Then, install and activate it:

Install Beaver Builder Lite

To create a maintenance mode page, select Pages > Add New. Now give your page a title. Next, click on Launch Beaver Builder:

Launch Beaver Builder

This will open the Beaver Builder editor, where you can start customizing your maintenance mode page.

Step 2: Choose the Maintenance Template

Even using Beaver Builder Lite, you’ll be able to access pre-made page templates. These include a simple maintenance mode page that you can customize to fit your website.

On your new page, click on the + icon in the upper right-hand corner. Here, you can drag and drop specific modules to create a custom page.

Alternatively, you can save time by navigating to the Templates tab:

Beaver Builder templates

In the Group dropdown menu, select Landing Pages. Then, you’ll see an option labeled Maintenance:

Maintenance template

Click on and drag this template to add it to your page.

Step 3: Customize the Images and Text

After inserting the Maintenance template, you’ll need to customize it and add relevant information to your website. If you’d like to change the background image, hover over it and click on the wrench icon to open up the Row Settings:

Update background image

In the Style tab, scroll down to Background Photo and click on Remove. Then, you can insert an image from the Media Library or upload a new file:

Upload background photo

Once you’ve found the right image, click on Select Photo. If you like the way it looks in the background of your maintenance page, save your changes.

You also might want to customize the default text. Start by hovering over the heading and clicking on its settings:

Heading settings

To edit the text, go to the General tab. Under the Heading section, add your own text:

Edit heading text

You can also change the font, color, and heading size in the Style tab. Once you’ve made your edits, click on Save:

Edit heading font

You can go through the same editing process for the main body of the text. Add custom text in the General tab, then adjust the font as needed:

Edit main text

The last feature in this default template is the Call to Action (CTA) button. You can click on its settings to edit the text and add a custom icon:

Customize action button

At the bottom of the General tab, paste a link where you want the button to lead. This could be another website page with similar information or a landing page to capture email addresses:

Add action button link

Then, go to the Style tab to edit the button color and its hover color. Here, you can also change the text color and font:

Edit action button color

Once you like the way the page looks, click on Save and then Publish. If there are any links that might become broken during your website maintenance, consider redirecting them to this page.

Step 4: Add Extra Features

Beaver Builder Lite gives you everything you need to complete the above steps. This tool can be effective for building a simple maintenance page. However, you’ll need our premium plugin to access more advanced features such as a countdown timer or lead capture form.

Using Beaver Builder Pro, you can add a new maintenance page and edit it using the same process as the Lite plugin. However, you can now add extra modules to make your maintenance page more interactive.

For example, in Modules, you can drag and drop a countdown timer onto the page. It can inform visitors when your site will be live again:

Countdown module

With this module, you can add your launch date in the General tab. Be sure to specify the time zone as well:

Edit countdown date

Under Style, you can edit the color and size of the numbers. Then, add a background color if needed:

Countdown background color

You might also want to capture leads using your maintenance mode page. This way, users can sign up for your newsletter and learn about planned updates.

To start capturing leads, drag and drop a subscribe form module anywhere you’d like. Then, connect the email marketing service that you’ll use to monitor responses:

Subscribe form module

You can add a custom message at the bottom of the General tab. This is what users will see after they sign up:

Custom subscribe message

You can also edit the subscribe button in the Button tab. Here, you can add custom text and an icon. At the bottom of the section, you can also choose a background color:

Edit subscribe button

If needed, you can even insert a Google reCAPTCHA checkbox. This feature can block spam and ensure that you only receive valid leads:

Enable Captcha

Once you like how your maintenance page looks, save your draft or hit Publish. Now you can use a plugin such as PowerPack to automatically redirect visitors to your new maintenance mode page.

Conclusion

To keep your website updated and functioning properly, you might need to customize your theme or configure new plugins. Although website maintenance is important, it can often cause error pages that negatively impact user experience. By creating a maintenance mode page, you can inform visitors about unavailable pages and when they’ll go back online.

When using our Beaver Builder tool, there are four simple steps to create a maintenance mode page:

  1. Add a new page.
  2. Choose the maintenance template.
  3. Customize the images and text.
  4. Add extra features with Beaver Builder Pro.

Do you have any questions about creating a custom maintenance mode page for your website? Let us know in the comments section below!

About Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

7 Comments

  1. Ed Bernd Jr. on May 2, 2022 at 5:13 pm

    Ummm… interesting… but… If my site is offline for maintenance, wouldn’t my new Maintenance Mode page also be offline? Seems like there should be some mechanism for causing it to appear even when the rest of the pages don’t appear.

    What am I missing?

    Ed



    • Jennifer Franklin on May 6, 2022 at 6:26 am

      Hi Ed – You can use a plugin such as PowerPack for Beaver Builder or Restricted Site Access plugin to automatically redirect visitors to your new maintenance mode page. Here’s how: https://www.youtube.com/watch?v=sEzBnYT96RI&t=298s



  2. Abul Hasnat Himel on May 3, 2022 at 12:21 am

    This is an excellent article! I learn a lot from it. I’ll give it a shot on my website. Thanks!



  3. Andrei Cunamic on May 5, 2022 at 1:56 am

    This tutorial was very helpful!



  4. Michael on May 10, 2022 at 11:14 am

    Having a maintenance mode template in Themer would be great.



  5. Kleftiko Milos on May 10, 2022 at 2:36 pm

    Thank you for the tutorial !



  6. Rohith on May 30, 2022 at 4:31 am

    Thank you for the tutorial!



Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy.
We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

Websites Built With Beaver Builder

When it comes to designing a website, exploring websites built with Beaver Builder can provide valuable inspiration for your own…

Read More...

Assistant’s New Code App: Easily Manage Code Snippets in WordPress

In the world of WordPress development, having the right tools can make all the difference. That’s why we’re excited to…

Read More...
Beaver Builder North Commerce module

North Commerce Module for Beaver Builder

With all the excitement surrounding Beaver Builder 2.8 and our new Box Module, you might have missed the announcement of…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.

Since 2014

Build Your Website in Minutes, Not Months

Join Over 1 Million+ Websites Powered By Beaver Builder.