fbpx
How to Set Maintenance Mode using Elementor in WordPress

How to Set Maintenance Mode using Elementor in WordPress

Introduction

Maintaining a seamless user experience during website updates is crucial, and enabling WordPress maintenance mode is an effective way to ensure your visitors see a professional message while you work behind the scenes. By using maintenance mode, you can effectively communicate updates, preserve your site’s functionality, and maintain a polished, professional appearance during crucial changes, upgrades, or maintenance tasks.

Importance of Maintaining a Website

    1. Enhanced Security:
      WordPress is a popular platform, making it a frequent target for hackers. Regular maintenance ensures your website’s core, plugins, and themes are updated with the latest security patches and improvements. This minimizes vulnerabilities and helps protect your data and that of your users from potential breaches or cyberattacks.
    2. Improved Performance:
      Over time, outdated plugins, unused media files, or poorly optimized databases can slow down your website’s performance significantly. Regular maintenance includes cleaning up unnecessary files, optimizing databases, and ensuring everything runs smoothly and efficiently. A faster, better-performing website enhances user experience and can improve your search engine rankings and visibility.
    3. Reliable Functionality:
      Maintenance helps identify and fix bugs or compatibility issues that may arise from updates or changes in your website. Ensuring that all features, plugins, and themes work as intended provides a seamless experience for your visitors and keeps your website running efficiently and without interruptions.

Steps to Set Up WordPress Maintenance Mode using Elementor

Step 1: Import an Elementor Template

By uploading a pre-designed maintenance mode template that saves time and ensures a solid foundation for your maintenance page design. If you do not have a pre-designed template, do create a template by referring to Elementor documentation.

Import Template

For importing template:

  1. Go to Templates > Import Templates.
  2. Click the “Import Templates” button.
  3. Choose a template file from your device.
  4. Click the “Import Now” button.

 
Step 2: Set Up Maintenance Mode

For activating WordPress maintenance mode and displaying your custom maintenance page to visitors while you work on the site.

WordPress Maintenance Mode
  1. Go to Elementor > Tools > Maintenance Mode (Tab).
WordPress Maintenance Mode
  1. Choose “Maintenance” in the “Choose Mode” selection.
  2. Select the imported template in the “Choose Template” dropdown.
  3. Click “Save Changes.”

Prerequisite: You need to have Astra Pro for continuing Step 3 onwards.

Step 3: Enable Blog Pro

To unlock advanced customization options that refine your site’s appearance and layout.

Enable Blog Pro
  1. Go to LI Theme > Dashboard.
  2. Enable Blog Pro by toggling on.

Step 4: Disable Navigation
To prevent visitors from navigating to other parts of the site, keeping them focused on the WordPress maintenance page.
Customize Blog
  1. Click “Customize” under Blog Pro.
Select Single Post
  1. Select “Single Post” from the menu.
Toggle on Disable Navigation and Publish
  1. In the “General” tab, locate “Post Navigation”, then toggle the “Disable Navigation” option to on and click “Publish” to save your changes.

Step 5: Remove Author Name on Header and Fix Layout Gaps
To ensure the WordPress maintenance page looks clean, professional, and free of unnecessary gaps or elements.
Additional CSS
  1. Go to “Customize” and scroll down.
  2. Select “Additional CSS.”
Publish CSS
  1. Add the following CSS code:
    /* Remove entry header */
    .ast-page-builder-template .entry-header {
        display: none;
    }
    /* Remove gap between page and footer */
    .single.ast-page-builder-template .entry-header + .entry-content {
        margin-bottom: 0;
    }
  2. Click “Publish” to apply the changes.

Step 6: Test Your Maintenance Page
To verify that the WordPress maintenance mode is set up and displayed correctly and all the navigations with the design adjustments are working as intended. Open your site in an incognito browser or log out of WordPress to check it out.
WordPress Maintenance Mode

Conclusion

By following these steps, you’ll create a polished and professional WordPress maintenance mode page using Elementor. Your visitors will see an attractive notice while you perform updates, maintaining their trust and ensuring a seamless user experience. This approach not only keeps your site looking professional but also provides clear communication to your audience about ongoing improvements, reinforcing your website’s reliability, credibility, and commitment to delivering quality results.
Scroll to Top