Create an Under Construction Page That’ll Entertain Visitors While You Work [Tutorial]

When you design a new website, or do maintenance on an existing one, it’s a good idea to put up an under construction page. This tutorial will show you how to create one with a unique animation that visitors won’t soon forget.

The sooner you can get a website online — whether it’s being built from-scratch or having maintenance done on it — the better it’ll be for the brand. Every day that a business has to spend offline is going to cost it in terms of brand visibility, lead generation, and SEO.

By hiding the site behind an Under Construction or Coming Soon page, you can help your clients minimize these losses.

Many WordPress themes and plugins offer solutions for this, but the results often leave something to be desired. Allowing a company to keep a presence online while their site gets worked on is important, but what you show the world in place of it matters, too.

In this tutorial, we’re going to show you how to quickly customize our Under Construction template so you can impress visitors even while the site is in maintenance mode.

Table of Contents:

How to customize the Under Construction template

Under Construction pages are often designed with illustrations depicting people wearing hard hats and wielding sledgehammers, wrenches, and other tools. While that’s the visual we might associate with something being under construction in the physical world, it’s not realistic for web design.

This Under Construction template takes a more literal approach to websites undergoing construction or restructuring:

What’s nice about this design is it can be adapted for anyone’s website because it’s a relevant depiction of what’s going on behind the scenes. In the tutorial below, we’ll show you how to keep the basic moving parts of the template in place while giving it a branded touch:

Need a Slider Revolution refresher before getting started? Review these guides first:

Step 1: Customize your module background

Since the only changes we’re making to this template are branding ones, it’s important to add a personal touch to all the main design components within it. Let’s start with the background.

To replace the existing light blue gradient background, go to “Module General Options”, “Layout”, and scroll down to “Module Background”:

From here, you can replace the “BG Color” with a different color or gradient. Or you can toggle on the “Use Image” setting and upload a background image as we’re going to do:

Keep in mind that the central animation is going to attract a lot of attention. If you do upload an image, make sure it’s subdued and doesn’t steal too much attention away or lead to sensory overload.

Since we’re building this Under Construction page for a mattress company, we’ve uploaded a blue background with rows of semi-transparent bed icons on it. The icons add subtle texturing more than anything and shouldn’t be too much of a distraction from the text and graphics.

Learn more:

Step 2: Update shape layers with brand-compatible colors

The web design animation you see in the center of the template isn’t created by uploading a GIF. It’s actually a complex set of shapes, animations, and AddOn effects that make it happen:

It doesn’t look like much from the Slider Revolution editor, but there are 23 different layers — all perfectly shaped, placed, and timed — that come together to create the unique effect.

We wouldn’t recommend messing with this formula too much. Instead, just update the color blocks so they’re more in line with your branding.

There’s no need to upload or create new shapes to do this. Instead, locate the blocks in the timeline editor at the bottom. Then, update their color (or gradient) under “Layer Options” and “Style” on the right:

Repeat this process until you’ve updated all of the shape layers:

  • Shape: Full-screen block
  • Shape 2: Wide block at the top
  • Shape 3: Tall block on the left
  • Small Shape 1: Small block in the bottom-left
  • Small Shape 2: Small block in the bottom-right

You may also want to update the shape outline layers, arrows, dots, as well as the button shape. In addition, Shape 3 has a box shadow effect (which you can find under “Adv Style”). If you change the color of the main layer, you’ll want to update this as well.

Edit the colors for as many shapes as you’d like using the process above. Then save your changes and move onto the next step.

Learn more:

Step 3: Edit the text layers that appear on the computer screen

There are three text layers that appear towards the end of the web design animation:

  • H1 tag is the header text
  • P tag is the paragraph text
  • Button is the button text

You can leave these as is with placeholder and Lorem Ipsum text or you can write your own custom message to visitors. While the animation does go somewhat quickly, you might find it worthwhile to put something here.

To update the text, select each of the layers from the timeline at the bottom. Then go to “Layer Options” and “Content”. Replace the existing copy in the text editor with your own:

Pro tip: To make it so that visitors have enough time to read what’s on the screen, only include about 10 words in your paragraph text. Then, increase the text size so it’s large enough for everyone to read. We’ve added a funny quote that reads:

“You miss 100% of the naps you don’t take.”

You can do more than just rewrite the text and change its size and position. If you’d like to customize the fonts or color of the text, you can do so from “Layer Options” as well. Go to

  • “Content” to edit the text
  • “Style” to change the font, size, and color
  • “Size & Pos” to reposition the text block

In addition, the H1 tag and P tag layers have the Typewriter AddOn enabled. If you want to change how this effect works, click on the corresponding layer and go to “Layer Options” and “Typewriter”:

We’re not going to change any of the settings here as the typewriting effect and timing of it works fine with our new text. However, if you end up adding a lot of text to this section and want to speed the typewriter up, feel free to play around with “Typing Behavior”.

Learn more:

Step 4: Edit the “Under Construction” header

At this stage, everything on this slide has been customized. To edit the remainder of the Under Construction page template, go to the top toolbar where it says “Slides” and open up the “Global Layers”:

Under here, you’ll find all the elements which stay put while the web design animation unfolds:

There’s nothing you’ll need to do with the MacBook image in the center, unless you’d prefer to swap it out with a different kind of laptop or desktop monitor.

Pro tip: If you do that, be sure to replace the existing image with one that’s the same size. You’ll find the dimensions of the MacBook under “Media Library”. If the new graphic is the same size, you won’t have to worry about repositioning or resizing the text layers you worked on previously.

In this step, let’s focus on editing the header text at the top. We can edit the remaining countdown components in the next step.

The words “Under Construction” have been created using two separate text layers. This is what allows us to give them distinct fonts, colors, sizes, and layering.

To create a similar effect with your page header, keep the layers where they are and edit the text under “Layer Options”:

Note: Even though we’ve been referring to this as an Under Construction page, you don’t have to call it that. You can make the header say anything you want so long as it communicates to visitors that you’re working on things behind the scenes.

For instance, it could say “Coming Soon”, “Our website is undergoing some maintenance”, or “We’ll be right back!”. Or you could give it a brand-specific twist like we did. Ours says:

More Restful Nights

COMING SOON

When you’re done editing what the text says, apply your style changes and save them before moving on.

Learn more:

Step 5: Style your countdown text

If you look in the timeline editor, you’ll see a group of elements called “Counter Group”:

This group holds all of the elements within the countdown timer together. So if you decide to move the counter, resize it, or make any other changes to it as a whole, click on Counter Group and then change its settings under “Layer Options”. You can also change the style of the outer border of the timer block from here.

This will come in handy if you decide to add extra info to the page — like a paragraph announcing the new company — and want to move the timer down to make room for it. For our purposes, we’re going to leave the timer’s shape and design as is.

All we’re going to do now is update the font so that the numbers and tags better align with the rest of the fonts on the page:

Don’t worry about what the numbers are. If you go to “Content”, you’ll see that these fields contain metadata like {{t_seconds}}. All this means is that Slider Revolution will pull the relevant information for these fields from another source. We’ll deal with that next.

Learn more:

Step 6: Set up your timer

To set up your timer, go to “Module Options” and “Addons”:

Scroll down or search for the AddOn called “Coming & Maint.”. Click on it to open the AddOn’s settings.

Note: You can configure this AddOn from the main Slider Revolution page or from within the newly installed template. If you do it outside of the template, you’ll need to use the “Configuration” setting to connect it to the new slider you’ve created. It’s much easier to just configure the AddOn from within the module itself.

From here, you can edit the end date for the page’s timer:

Under “Timer Settings”, add the “End Date” that the timer will count down to. Then add the “Hour” and “Min.”.

To terminate the timer after 12 p.m., make sure you enter the hour using the 24-hour time system. So, in the example above, 16:00 means the timer will stop at 4:00 p.m.

If you want the timer to disappear completely after the timer is up, toggle on the “Auto Disable” setting.

Pro tip: The “Page Title” field is a good opportunity to start working on your site’s SEO (or preserve the existing SEO) while it’s under construction. What you put in this field will become the page’s <title> tag and can help Google index the page and display it in relevant search results. Make it descriptive, but keep it within 50 to 60 characters.

Click “Save Configuration” and both the page and your timer will go live on the site.

Learn more:

Impress website visitors even when a website undergoes maintenance

Web designers tend to be under a lot of pressure to get done with what they’re working on. Clients are eager to see their businesses online, so it makes sense why they stress over every day that passes without a live site.

With Slider Revolution, you’ll be able to quickly build an attractive and memorable Under Construction page and put your clients’ minds at ease while you meticulously work on their site behind the scenes.

Create an Under Construction Page That’ll Entertain Visitors While You Work [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.