In a recent tutorial, I showed you how to create a coming soon page in WordPress. The primary purpose of a coming soon page is to let people know that you plan to launch a product or service soon. In this tutorial, you'll learn how to create an under construction page in WordPress.
You might be thinking that a coming soon page and an under construction page are not very different. Well, you would be right. They both indicate that something will be ready for you to use soon. However, there is a subtle difference and that's why we will approach this problem a bit differently here.
A coming soon page can be about a product, event, company or a whole website. However, it doesn't make as much sense to create an under construction page for an event or a company. An under construction page can be about your whole website being under construction or it can just refer to some section of a website that you are actively working on or maintaining.
In this tutorial I'll teach you how to create a WordPress under construction or maintenance page that lets users access other parts of the website. You will, of course, be able to show the under construction notice for the whole website as well.
Here is a preview of the final result of our Under Construction page that lets users know that we are currently creating a Menu Generator for them so affected parts of the website will be inaccessible for some time.
Finding the Right Plugin and Initial Planning
The first step would be to find the right plugin. We are looking for something that will let us have complete control over the textual content of the page. It should also give us reasonable flexibility regarding the visual appearance like setting a background color, font family or logo. Two more features that I would like in the plugin include the ability to restrict or allow access to a specific set of pages and to be able to use CSS to modify the page in more powerful and unique ways. The plugin that met all these requirements for me was the Maintenance plugin.
I would highly recommend that you take a similar approach when searching for plugins. Make a list of features that you want and then actively filter out plugins which don't meet your criteria. This will save you a lot of time instead of using the first plugin you find right away and then discovering that it doesn't do exactly what you want.
Keeping Users Informed
We will be adding a section to our under construction page to let users know what we are planning to do. This could include things like interesting features or a possible release date. You can also provide them links to some other posts on the website where they could read more about it.
Provide Easy Ways to Connect
Now that people visiting the under construction page know what you are doing, it makes sense to let them know that they can be part of the process. We will be including links to some social media accounts on the page to allow everyone to contact us.
Create a WordPress Under Construction Page
We will begin creating our under construction page by installing the free maintenance plugin. Once you have installed and activated the plugin it will show up in the navigation menu on the admin dashboard. You can see the current status of the plugin from the admin toolbar.
Once the maintenance mode is turned on with this plugin, try visiting any page on your website either in a private window or after logging out from the current session. It should show you a generic maintenance page similar to the image below.
We will now start modifying this page so that the text says something like under construction etc. among other things.
Changing the Text
Lets begin by changing the text that we show to users. Click on the Maintenance is On link in the admin toolbar to directly open the plugin settings page. You can also select Maintenance from the navigation menu in the admin dashboard to go to the settings page.
Change the page title to "Menu Generator" is Under Construction and the headline to Creating the Best "Menu Generator" Tool for You. Now put the following HTML in the Description field.
<section class="main-content">
<p>We know that creating navigation menus for your website can be tricky. So, we are creating an awesome menu generator for you.</p>
<p>Here are some articles for you to read while we are building the Menu Generator.</p>
<ul>
<li><a href="/navigation-menu-types/">Different types of navigation menus.</a></li>
<li><a href="/navigation-and-accessibility/">Navigation menus and accessibility.</a></li>
<li><a href="/mega-menu-tips/">Tips for building a mega menu.</a></li>
</ul>
</section>
Your plugin settings page should now look like the following image. Please note that the HTML for the Description field goes under the Text tab. This allows us to write the content for the page in HTML so that we can target specific elements later using CSS rules.
Click on the Save Changes button and hit Preview to see the updated version of our under construction page. It should look similar to the image below.
Updating Images and UI Colors
Now it is time to make some changes to the visual appearance of our under construction page. We will begin with the images. If you scroll down a little bit on the plugin settings page, you will find an option to upload a logo as well as a background image.
First, click on the Upload Logo button and choose your website logo from the media library. After that, click on the Upload Background button and pick an image that you like the best. I have used this User Experience illustration from Reshot.
Did you notice a lock icon in the previous preview images of our construction page? Clicking on the lock icon open a login form that you can use to log in to the website and see all the restricted pages hidden by the plugin.
You can set a new background color for the login form on the plugin settings. There is also an option to change the color of the font. We will leave them all at their default values but change the Font Family from Open Sans to Yanone Kaffeesatz.
Click the Save Changes button and the construction page should now look similar to the following image.
Adding Custom CSS
Our under construction page is now starting to take shape but there are a few things that I would like to change. There isn't enough contrast between the logo and the background so we will add a white background along with some borders using CSS.
The font size seems too small for the main content as well. So, we will be increasing the font size and make some other changes like adding a translucent black background. We will also change the alignment of the text to left. All this can be done with the help of following CSS rules.
div.logo-box img {
background: white;
border-bottom: 10px solid black;
border-top: 10px solid red;
padding: 10px 0;
border-radius: 30% 70% 70% 30% / 30% 70% 40% 70%;
}
section.main-content {
font-size: 1.8rem;
width: 800px;
margin: 0 auto;
background: #00000024;
padding: 50px;
text-align: left;
box-shadow: 0 0 4px #000000a6;
}
section.main-content ul {
list-style: none;
line-height: 1.5;
}
body.maintenance section.main-content p {
font-size: 1.8rem;
margin-bottom: 2rem;
}
.site-content h2.heading {
font-size: 3.8rem;
margin-bottom: 3rem;
}
footer {
font-size: 1.8rem;
}
You need to paste all these CSS rules in the Custom CSS section on the plugin settings page. Now, click on the Save Changes button and the under construction page should start looking like the image below.
Allowing Access to Certain Pages
The under construction page of our Menu Generator links to three different posts on our website. It wouldn't make much sense if clicking on those links redirects the users back to the under construction page.
We can solve this problem by excluding some pages from being under maintenance mode in the plugin settings. This will make these pages accessible to all our visitors. Scroll to the bottom of the settings page and enter the name of published posts that you want the public to access under Posts.
Final Thoughts
In this tutorial, you learned how to create an under construction page for a website using a free plugin. We began by updating the text in order to provide users all the necessary information about our under construction page. Then we added a relevant background image as well as the website logo so that nothing looks out of place. Finally, we used custom CSS rules to make changes to the visual appearance of the logo as well as other text on the page.
You might have noticed that the page currently contains no contact information for visitors. This has been left out as an exercise for you. Try to follow the steps listed in the tutorial and add a link to the Contact Us page inside the main content.
No comments:
Post a Comment