Maintenance Mode Page Layout for Weebly Site
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. But 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 setup a Weebly maintenance mode page layout which can be used for the following purposes:
- Display an under construction page.
- Display a maintenance mode page.
- Display a product launch time.
- Display an event launch time.
The widget page can be enabled or disabled whenever you need for any of these purposes. Check out our separate article in case if you are looking for a countdown timer widget.
Checkout the under construction page demo in a Weebly site.
Check DemoFiles 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
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | *{ -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:
Target Date for Countdown Timer
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.
Weebly Maintenance Mode Page
Publish your site and see the maintenance mode layout in action.
Checkout the under construction page demo in a Weebly site.
Check DemoHandling 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.
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.