Did you recently ran a search online for How to create a custom coming soon page for your website? Are you planning to kick-start a digital project? Maybe a website or a digital promotion that requires you to have a coming soon page? Or you are looking at upgrading your website and you would like to have a simple page that says Site Upgrade In Progress to your website visitors with a count down on it so they can anticipate and have an idea of the estimated launch/completion date.
In this article we shall cover how to create a custom coming-soon page for your website plus all the templates and resources you might need available for free. Just download them to your computer and you are good to go.
Before we get started, please confirm you already have your domain name, hosting set up and access to your c-panel or website manager back end. If you don’t you can quickly get that sorted first however that might cost you a couple dollars. So get your credit cards nearby.
Usually, I buy my domains from Whogohost based here in Nigeria and they also have some affordable hosting plans too so you might want to equally check them out. But most times my hosting are either from SiteGround or In-motion hosting. Currently I use In-motion Hosting and they come highly recommended. You might really want to check out their very affordable plans here. If you have other hosting providers maybe GoDaddy, HostGator et.c you might want to look for similar locations & features as described in this tutorial or reach out to the hosting support team for guidance on how to locate some of the steps and actions we shall be covering herein
Another factor worthy of consideration is to ensure you have SSL installed on your website. You can read more here on why SSL is necessary and also how to quickly set up one for yourself for free.
Once you have all the above concerns and pre-requisites put in place, let’s go straight to the step by step guy on how to set up your coming soon page. For this case study we shall be working with “Site Upgrade In Progress” message as you can see in the example image below:
How To Create A Custom Coming Soon Page For Your Website?
Task Difficulty – Easy | Estimated Duration – 20mins | Level – Beginner
First things first, you need to confirm you have login access to your cpanel and can access the website control panel environment as shown in the image below;
Our objective here is establish and get access to the file manager so please click on the File Manager and you should see a screen as below or similar showing you all the files and folders on your server:
From the file manager page as shown in the screen above, make sure you click on Public_html to open the folder. However, if your hosting or cpanel environment is different from the images on the screen, be sure to locate the similar environment on your server – they often have the same names or you can just ask the company support how to get access to your Public_html folder. It is important you have access to this folder.
Next inside your public_html folder, at the top right, locate the upload feature as shown in the image below.
The upload page should open to something like the image button as below if you are equally working through the same Cpanel as illustrated in this herein:
Once you are here, click the upload button to upload the zip file for the coming soon/upgrade in progress template. You can download a copy of it for free here. I encourage you to take sometime to complete the value-check procedure as the purpose is to help us identify how to serve you better and know the right and more valuable contents/contributions we can assist you with. So please click here to download your copy for the resources you’d need for free!
The zip file downloaded from the above link is what you shall be uploading so make sure to locate the right place it was downloaded to on your computer. Once uploaded to your server, it should be inside the public_html folder as illustrated in the image below:
If your website already has contents or maybe you have an e-commerce or WordPress or any property on it currently, the worry, none of your files and folders will be affected – all folders in this file were named differently so they shouldn’t affect your site in anyway but if you still have doubts, then you can first extract it on your computer and then open the index.html on your browser to see what it looks like. To edit further on your computer you might need to download a code editor. Personally, I use Notepad++, you can get a free copy here to download.
If you would like to proceed with directly working on your server, then right click on the zip file just uploaded so you can extract its contents to your public_html folder. Upon right click, you should see something like the image below. Make sure to click on extract:
Once the extract function is done, you should see something like this:
if you check your home-page, you should already see the Site-Upgrade In Progress on your site. Now let’s move on to how to customize this page to meet up with your brand requirements. which is basically changing the logo, background and adjusting the date on the count-down.
How To Change The Logo & Background Image:
To change the logo and back-ground image, it is first important to know where they are located and then upload your preferred images to replace them. Take note that when replacing these images you might want to consider using the same sizes, the same name and extension to avoid any possible errors. The logo image is located inside the images2 folder and has a .png extension (logo.png) with the dimensions 220 x 77 px. While the background image is located inside a sub-folder named “background” under/inside the same “images2” folder. Here you find the background image named 1-1920×1200.jpg with the dimensions 1920 x 1200 px. Once these two images are replaced with yours, you should see the changes take effect immediately once you refresh your website.
Next, we need to adjust the count-down clock and maybe if you would like to make changes to the write up on the site, Here’s how to go about it:
To achieve this, we go back to the public_html folder and locate the index.html file. You are to right click on this file and then open it with the Code Editor. Inside the code editor of the index.html file, please see line 22 to Line 26 – there you can change your titles and other header contents. On Line 132 and Line 135 you can change the message from “Site Upgrade In Progress” to any message you’d like to have there.
In-case you noticed there was a live chat feature on the page right? The codes for that are available from Line 224 to Line 232 so you might want to remove them completely and maybe place your own live chat code. To get a Free Live Chat, please sign up for one here.
Finally how to configure the count-down timer. To do this, we go back to the public_html folder and open the js2 folder. Here you’d see a file named Malooka.js, open the file with your code editor and locate the lines 78, 79 and 80 – Here you’d find the Day, Month & Year respectively. Enter your estimated launch dates accordingly and save. Then go back to your website to refresh your page. The count-down should have taken effect and start counting. If it hasn’t, you might want to wait for sometime for it to take effect or you could also consider using an incognito browser mode or try another device or use this private surf available here.
By following all the guide and details as contained herein, you should have your own coming soon/site upgrade in progress up and running now and you can take time to continue working on your project or focusing on other core areas.
If you would like further assistance – maybe you want to have a coming soon page and your website project accessible at the same time such that your visitors can see the coming soon notice message while you are working on your website on the back end, we can assist you further with that regardless of the framework you plan to work with – WordPress, Magento or any CMS. To reach out to us to share more details about your project and to download your free resources and scripts please click here.
In the event where further clarifications are needed, you can share them with us while completing the value-check procedure as you get started with downloading your free resources or via the comment section below.
Sincerely do hope you found this content valuable and hope it was not so difficult to pull off too. Please share with your friends and across your social networks, we never can tell someone might equally find it quite useful too. And if you have any topics or tutorials you would like us to publish please click here to make a content request.
We wish you all the best and look forward to bringing more valuable contents your way. See you around!