Maintenance mode page is generally displayed in occasions when your site is under construction or taken down for regular maintenance. This is an easy task for those using content management systems like WordPress. However, this will be a difficult task for Weebly users since Weebly does not provide a default maintenance mode page layout. In this article we will explain how to create maintenance mode page in Weebly.
Use of Maintenance Mode Page in Weebly
You can use the maintenance page layout for on the following purposes:
- Display when your site is under construction before publishing live content.
- When you are doing some changes and want to showcase a maintenance mode page.
- Showcase a product launch with scheduled in neat future.
- Display for an event launch.
The widget page can be enabled or disabled whenever you need for any of these purposes. Checkout the under construction page demo in a live Weebly site. Check out our separate article in case if you are looking for a countdown timer widget.
Files Required for Maintenance Mode Layout
Below are the files required for creating a custom maintenance mode page layout in Weebly. Click on the download button to get the zip file. We use a demo image “bg.jpg” for the background which you can change it with your own image (ensure to use the same “bg.jpg” as file name).
- countdown.js
- init.js
- bootstrap-responsive.css
- bootstrap.css
- Maintenance.html
- bg.jpg
You can download files here. Create a folder named “Maintenance” under “Theme > Edit HTML / CSS > Assets”. Unzip the downloaded file and upload all the individual files under the “Maintenance” folder except “Maintenance.html” file.
Custom CSS
Add the below CSS under “main_style.css” file or “main.less”.
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
html{background:url('/files/theme/Maintenance/bg.jpg') no-repeat fixed center center; min-height:100%; background-size:cover;}
body{font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";color:#646663;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;min-height:100%; background:none;}
.wrapper{
background:#fff;
padding:20px 0;
margin-top:10%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}
.title{text-align:center;}
/* ---------- TIMER ---------- */
ul#countdown{text-align:center;}
ul#countdown li {
color:#fff;
display: inline-block;
margin-right:18px;
width: 80px;
height:80px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgb(127, 186, 10);
background: -moz-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -webkit-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -o-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -ms-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: linear-gradient(180deg, #7FBA0A 50%, #7CB30B 50%);
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
}
ul#countdown li span {
font-size: 42px;
font-weight: bold;
color: #fff;
position: relative;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}
ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}
.bottom-row{margin-top:30px;}
.sub-block{
padding:20px;
min-height:180px;
background:#ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
ul#countdown li {
width: 55px;
height: 70px;
margin-bottom: 10px;
}
ul#countdown li span {
font-size: 26px;
}
}
Creating a Header Type
Upload the “Maintenance.html” file under “Header Type“, this will be the page layout name showing under “Pages” tab.
Setting Up the Timer
Let us assume you want to launch the site on 31 December 2016. Set this date under “init.js” file as shown below:
Now everything is set…save your changes and go to Weebly site editor.
Creating Maintenance Mode Page
Create a new page, name it as “Maintenance” and choose the header type layout as “Maintenance” from the dropdown. You can see the some text data as shown in the picture below under which you can drag & drop you own content.
Publish your site and see the maintenance mode layout in action.
Handling Already Published Site
The above way of setting up maintenance mode is easy for a new site. If you have an existing Weebly site, at least you should have two sites with premium features to enable this setup.
- Un-publish your existing site.
- Setup the maintenance mode layout on a new site.
- Publish the new site with the original URL.
If you only have few pages on the existing site, it is a good idea to make the “Maintenance” page as your home page and setup 301 redirects for all other pages to point to the maintenance page.
Note: Since search engines like Google are very fast in crawling the existing sites, we do not recommend using maintenance mode for existing Weebly site in order not to disturb your search engine ranking.
