We shared a detailed article about how to use jQuery Countdown script long ago. Today i will show you how to make a Under Construction Page design uses jQuery Countdown. We will also use fullscreen background feature in this page. We will use jQuery, CSS3 and HTML5 programming languages in this design. email subscription module will be a gift to you as an addition we prepared for you. You will be able to integrate MailChimp and similar email subscription systems by using this module. I will tell you step by step how we build our Under Construction page. First, download Supersized plugin from its official website. P.S: If you don't want to spend time on install, download this page directly from download link and edit it as you wish then start use.
Under Construction Page Tutorial Details
- Software: HTML5 - CSS3
- Difficulty: Professional
- Estimated Completion Time: 15 minutes
Step #1 - Add CSS Files
Add css files to the head tag on our page from .zip file which we prepared for you. Pay attention on extensions of files you have to upload. If folders exist in your theme folder, copy files into those folders.
Step #2 - Add JS Files
Step #3 - Add JS Plugins
img/bg1.jpg, img/bg2.jpg, img/bg3.jpg, img/bg4.jpg image extensions will be describing background pictures of your website which is in JS plugin we adding at this step. You can find this files in .zip file's img folder which you downloaded. You can also edit or change them way you like it.
Step #4 - Call Countdown Script
We shared a detailed article before about how to integrate jQuery Countdown. We highly recommend you to read it. Add code below to your page where you want to show your counter.
Step #5 - Integration Subscription Form
This email subscription form is a form prepared for MailChimp website. We recommend MailChimp for its 100% free. At this step, add form url that you get from MailChimp website into the action="#" area then integrate it into page where you want to show it.
We created an amazing Under Construction page in 5 steps. I did not wanted to give too much details about design. You will get already CSS files in .zip file which you going to need. You can edit CSS files as you wish after download. I hope this article will be useful for you. Please don't forget to share this article with your friends on your social media profiles and bookmark us.
We made a detailed article before about How To Create An Amazing WordPress Author Page Template. we highly recommend you to read it.