• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Create an Under Construction Website Image Using Elementor in 2022

May 23, 2020 by Editor Team Leave a Comment

How to Create an Under Construction Website Image Using Elementor in 2023

Having an under construction website image means you no longer have to worry about losing potential customers as you build your website.

You can gather leads before your website is fully completed by sharing details on the channels your visitors can use to get to you.

Adding an email address or contact form encourages engagement from your users, and you can build an email list early enough.

You can gain insight into what your target audience expects from your brand. It enables you to meet your audience’s needs from the get-go, building loyalty.

We will show you how to build an under construction image using Elementor. We will also offer some tips on creating an Under Maintenance page.

Elementor comes with lots of design functionalities and uses a drag-and-drop builder that makes it beginner-friendly.

You can edit the under construction image to capture the visitors’ interests and make them eager for the launch of your website.

Here’s a quick index to help you navigate this article:

  • Differences Between Under Construction and Maintenance Mode
  • Create an Under Construction Website Image
  • Conclusion

So let’s dive in.


Differences Between Under Construction and Maintenance Mode (Don’t Make This Mistake)

Almost every beginner becomes confused about one thing: they can’t see the difference between ‘under construction’ mode and ‘maintenance’ mode.

On the contrary, there is a big difference between these two modes. It can be very risky if someone makes this mistake on their business website and doesn’t choose the right one because it will impact your site’s SEO.

A coming soon or under construction mode is usually used for a new domain and at the time of designing a new website. This sends a signal to Google that your website will launch in a few days, so it will begin indexing your website.

In fact, the Google Webmaster Team also says that adding a coming soon page is a good idea because it’s better for the site’s SEO. In this mode, you can also collect email addresses from your interested visitors.

On the other hand, maintenance mode is usually used for an existing website. When an old site goes down due to a lack of proper maintenance, it will need to go offline to visitors to allow problems to be fixed.

In this situation, maintenance mode should be used for your visitors as well as for Google bot.

Maintenance mode sends an HTTP 503 special header code to the search engine so that it knows your site is under maintenance and your site reputation won’t be negatively affected.

You need to add a countdown timer so that Google bot will know when it should return to your website again.

Google has also said that maintenance mode is helpful to your users, preventing them from becoming frustrated with the automatic server reply.

If you make a mistake and don’t choose the right one, it will impact your site’s ranking. Be careful about making this selection.


Create an Under Construction Website Image (Coming Soon Page)

Now we will show you how you can build an under construction or coming soon web page for your website.

The coming soon mode is only used for a brand new website; we will teach you how to design a coming soon page using the Elementor page builder.

Elementor is free to use. You can easily make an under construction or maintenance webpage with their free subscription in real-time.

Hence, if you upgrade your subscription to Elementor Pro, they will give you access to all pro templates, which are beautiful, awesome, and lightweight.

Elementor provides limited templates with their free subscription, while they provide numerous templates with their pro subscription.

Let’s learn how to create an under construction website image for you.

Before you get started, make sure that you have installed the Elementor page builder plugin on your website.

First, we need to create a template for our coming soon page. Head over to your WordPress Dashboard. Now go to Templates > Saved Templates > Add New.

add new template from wordpress dashboard

After clicking ‘Add New’, a popup will appear for you to configure some settings.

We will create a page template, so choose the template type: Page.

Give a name to your template. We gave it “Coming Soon”.

After that, click on the ‘Create Template’ button.

choose a new template from elementor

Now you will see the Elementor dashboard. We will not use the designs that are currently on the page. Our coming soon page won’t contain any menu or footer. Let’s remove them and insert a new template.

elementor page settings

Click on the ‘Page Settings’ icon. Go to Settings Tab > General Settings. Select ‘Elementor Canvas’ from the page layout.

This will remove all the designs from our page and you will see a blank page.

click on template icon

We will insert a template. Click on the ‘template icon’.

After clicking the template icon, you will see the Elementor template library. You will find all kinds of templates here.

Type ‘Coming Soon’ in the search box. Now you will only see the coming soon page templates.

There are a total of ten coming soon page templates for you to choose from.

elementor template library

Or you can also type ‘Maintenance’ in the search box. After that, you will see the maintenance templates that Elementor has made for you to use.

Here you will find 5+ maintenance mode templates.

elementor pages library

Select the type of template that you want to create. After that, choose a template that best meets your requirements.

When you move your mouse cursor over any template, you will see a ‘+’ icon to preview the template. After previewing, click the ‘Insert’ button to insert a template.

edit elementor social icons

We have chosen a ‘Coming Soon’ template in the image above.

In the template, you can edit the social icons and link them to your social web pages. In this way, your visitors can find you on social media, as they can’t find anything on your website.

It is really helpful to keep your visitors more engaged, and you will not lose your potential customers.

If you don’t like the template’s default style, you can also change the background image and edit the heading and text as well.

Also, don’t forget to leave your email address or a contact form on the template so that your users can contact you.

You can do all kinds of amazing stuff using the Elementor page builder. Simply drag any widget from the left side that you like and then drop it into the desired area, and you can edit them as you wish.

It is very easy and simple to edit anything with the Elementor page builder.

On the other hand, if you want to make a maintenance page, insert a maintenance template in the same way we inserted a template before.

edit countdown of under construction page

It is essential for a maintenance mode’s template to include a ‘Countdown timer’. It will help you to send the HTTP 503 code to the Google bot so that it will know when it should return again to this webpage.

Select ‘Count down’ and then edit the time, such as the days, hours, minutes, or seconds from the left sidebar. You can also edit anything else on the template if you want.

It is recommended not to use maintenance mode for more than one or two days.

By mistake, if you use a coming soon page instead of using the maintenance mode page for your website’s maintenance mode, it will hamper your overall site’s SEO.

Google bot will index this coming soon page even though you don’t want it to. Be careful about using the right mode.

After finishing the design, hit the publish button now.

Now go back to your WordPress dashboard.

Visit Elementor > Tools > Maintenance Mode.

From here you have to set up a few things.

Choose the mode first.

By default it is disabled. If you want to create a ‘Coming Soon’ page, select ‘Coming Soon’ mode from here.

However, if you want to create a Maintenance mode page, then choose ‘Maintenance’ mode from here.

elementor maintenance mode for under construction page

Next, go to the ‘Who can access’ tab. Here, select ‘logged In’. This means that only webmasters who have the site’s login credentials can access the site.

When you are logged in, you can see the site’s overall design and functionality because you are working on the site, but visitors cannot see your full website. They only see the template that we made for coming soon or maintenance mode.

If you log out, then you can also see the ‘coming soon’ template design, but you won’t see the full website now, as you are logged out.

After this, select the template name that we made.

Lastly, click on the ‘Save Changes’ button.

save maintenance mode for under construction website

Notice that when coming soon or maintenance mode is on, you will see a ‘Red Bar’ which contains ‘Maintenance Mode ON’ text. This bar will be shown both for ‘Coming Soon’ and ‘Maintenance’ mode.

Under this maintenance mode, you can design your website now and fix all kinds of problems. On the other side, your visitors will see the under construction website image only.

This kind of page delivers a better user experience to the site’s visitors and keeps them more engaged in your site.

Congratulations! You have successfully made a coming soon page for your website.


Conclusion: How to Create an Under Construction Website Image Using Elementor

People love the excitement that comes with anticipating something new and unique. You can take advantage of this by designing an exclusive under construction website image.

Our easy step by step guide shows you how to build one using Elementor, one of the most intuitive WordPress page builders in the market. The process is simple and does not require any coding skills.

Be sure to add a means for potential customers to reach you, such as social media channels and an email address. Avoid mixing up a maintenance page and an under-construction page.

Using a maintenance page for a website under construction will negatively affect your new site’s SEO.

Read More Elementor Tutorials:

  • How to Get Started With Elementor
  • Elementor Pro Discount
  • Elementor vs Elementor Pro
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • How to Add a Popup With Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Subscribe Form Popup With Elementor
  • How to Create a Cookie Consent Popup Using Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a 404 Web Page With Elementor
  • How to Create a Mega Menu WIth Elementor

Filed Under: Elementor, Tutorials

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2023 · WPCity.com

x
x