As a placeholder for a domain name, an under construction page is a simple landing sheet that holds the most important information about your site. Unless you’re completely new to the Internet, you must have seen one before. Web developers like to create under construction pages for their new projects because it gives a professional feel to the site even while they’re still working on it.
Although you don’t need a diploma nor a rocket scientist to build the page for you, creating a maintenance page (that’s just another name for the same thing) can take time. You will have to know at least basic HTML and CSS as well. And even in that case, it will take the time to build a custom plugin that will serve you as a under construction page plugin. And after all the time you invested, how good will the page really be?
As you’re using WordPress, you already know that there’s a plugin for everything. It’s no surprise there are dozens of great maintenance mode plugins. Instead of showing you all of them, let’s see how to use an Under Construction Plugin.
Under Construction Page plugin for WordPress
Instead of coding and creating templates, all you need to do to prepare your website for maintenance mode is the installation of a free plugin. Navigate to Plugins -> Add New, and search for “Under Construction Page” by Web Factory. Install and activate the plugin, and you’ll be ready for the customisation.
Choose your theme
Many computer users like to think they’re good designers. Unfortunately, that’s the reason why you will see websites that just hurt your eyes. There will be mismatched colours, tacky graphics, and broken elements. Don’t be one of those wannabe web designers; especially when you can have a professional design for free. Well, at least that’s true when we talk about under construction mode.
Now forget about designing a page, and go to Settings -> UnderConstruction -> Design. This tab is the place where you will find professionally designed themes that you just need to select. There’s no need for drag&drop, no uploading or wasting time on the design. Once you choose a theme that you like the best (and there will be a ton of those as the developer publishes new themes every fourteen days), you’re done with the design. Isn’t that amazing?
Customise the theme
If you know your way around CSS, you can customise the page in more detail. On the bottom of the Design tab, you will find a simple CSS box that allows you to input the code. Find selectors which you want to modify, write them down and change their values. After saving changes, the plugin will take your code into the picture, and it will modify the output.
Let’s do a quick example and change the colour of the background for the Rocket theme.
After selecting the theme and saving changes, we previewed our under construction page in Chrome. Then we right clicked on the theme, chose “Inspect” option which opened the console. On further inspection, we found that the background image is tagged with the #hero-image selector.
Now we went back to the Design tab and edited the Custom CSS with the following:
#hero-image {
background: white;
}
This code has changed the image background, but as you can see from the screenshot, there’s still that red bar on top that’s getting in the way. We inspected elements again to find out that it’s just the background colour of HTML element. So, let’s go back to the Custom CSS and modify the colour. To do this, we needed to add more code:
html {
background: white;
}
That’s it. For the purpose of this example, this will do it. What we wanted to show you here is that you can modify each and every element with a simple change in the code.
Personalise the page
If you were worrying that by choosing a complete theme it wouldn’t let you customise your under construction page, you were completely wrong. Now that you’ve moved to the content tab, you can see the details about your content. Take your time here and let your visitors know what’s going on.
Write a title and add a description. We suggest that you write a few sentences that will let your users know that your site is under construction. Let them know when you expect to publish your site or the time it will be back online. Add images and videos, but please don’t make a mess. Those professional themes are minimalistic, so keep your content box the same. Or don’t; it’s your maintenance page; who are we to tell you what it should look like!
Connect with your audience
Don’t go anywhere; we’re still on the same content tab. If you scroll down, you will see Social & Contact Icons. Again, you won’t have to design a thing. Your only task here is to fill in the information about your social media. Don’t forget to add your email address and phone number as well. The plugin will do the rest – it will place all the necessary icons on the bottom of your new under construction page.
We love how the icons look, but we’re still waiting for a fully functional contact form. As we’re told by the developer, this feature is in the works and we can expect it within the following weeks!
Let logged in users access the normal site
If you’re using the plugin for the maintenance mode, and you have your site already developed, you can let logged in users access the main site. Just go to the Access tab where you can whitelist both specific users and user roles in general. This is such a basic feature, yet you can’t work without it.
Publish the page
Once you go through all the tabs, you’re ready to publish your new under construction page. To do so, go back to the first tab which holds a simple button. If you want an even simpler solution, just look up on the admin bar and click the Under construction mode icon.
From the moment you click the button, your visitors will see the new maintenance page. And if you reflect back on the steps you went through, you will realise that it took you just a few clicks to complete the entire thing! That’s the power of WordPress plugins.