fbpx

How to Create a Beautiful Coming Soon Page with Elementor

How to Create a Beautiful Coming Soon Page with Elementor

Do you want to learn how to design a coming soon page?

Stick around because today I will show you the quickest way to design a beautiful coming soon page with Elementor page builder.

It is a common practice in web design to have a splash page while developing your site informing visitors of when it will go live.

It helps people to know when to visit again.

Helps you avoid losing a visitor’s trust who keeps coming back only to find an incomplete site.

Prevents the public from accessing your website before launch.

It also tells search engines not to index your pages yet.

Let’s start creating our coming soon page

In this quick step by step tutorial, I will show you how to design a coming soon page that has:

  • A countdown clock.
  • And a newsletter subscription form.

Finally, I will show you, how to activate your coming soon page in your WordPress dashboard.

What will you need to follow along with in this tutorial?

  • Your registered domain and hosting space.
  • A WordPress installation.
  • The Pro version of the Elementor plugin.
  • Preferably the Hello theme.

Step one: start by creating a template for your page.

Elementor makes it easier to create a coming soon template.

To begin we need to create a template and customise it to our liking.

Once we are happy with our design we can then go back to our dashboard to activate our template.

  • Start by opening your WordPress Dashboard.

WordPress Dashboard

  • Then hover over “Templates” just below “Elementor” to open the flyout menu and click “Add new

Elementor Templates Flyout Menu

  • A new popup window will open prompting you to select a template type and give your template a name.
  • Choose “Page” as template type, and in the name field give your template a name, ideally, name it “Coming soon template” and hit the green button to create your template.

Add New Template Popup Window

Step two: get creative, customise your coming soon template.

After clicking create a template, wait for Elementor to finish loading the editor. Once the editor loads, a new popup window with pre-built coming soon templates will open.

These templates are a great place to start building your page. However, you will need an Elementor Pro license to import some of these templates.

But for the purpose of this tutorial, close the popup window because we will be designing our template from scratch.

So, let’s start by changing our template layout from “Default” to “Canvas“. Elementor page builder adds two more page layouts in addition to the default WordPress layout.

Canvas — This layout lets you hide the header and footer’ of your site leaving you with an empty canvas.

Full width — As you might have guessed, this layout stretches your page container from left to right of your screen.

  • Click the little gear icon at the bottom left corner of the editor to open the page setting flyout menu.
  • Once the menu opens, click to open the “Page Layout Drop-down Menu” and Select “Canvas” from the list. After selecting the Canvas layout, the editor will reload and your page title, header and footer will disappear living you with enough space to work with.

Elementor Page Builder Editor Window

  • Click the little reddish icon with a plus symbol to add a new section. You will be presented with 12 section layout options, from the top raw choose the last option to add a 66×33 section.

Add New Section

  • Elementor sections allow you to nest inner sections and widgets. Inner sections are very handy when you want to create complex page layouts.
  • From the widgets panel drag and drop the “Heading” widget inside the first column. Click the icon to show widgets, now drag and drop the “Countdown” widget below the heading.

Drag Heading Widget into The First Column

Drag Countdown Widget into The First Column

  • Repeat the previous step but this time add the Heading, Text editor and Form widgets to the second column.

Coming Soon Page Template

The structure of our coming soon page template is now perfect. Yours might look a little bit different than the screenshot above because your Elementor Global Styles are not configured the same way as I did.

Step three: add more style to your template

Let’s get more creative with our template.

The first thing that we need to do is to make the heading in the first column a first-level heading (h1). Why this is important? It is the best practice to always have the hierarchy of heading elements on your page starting from h1 – h6. H1 element carries more weight than any other heading element on your page and helps tell the web visitors what your page is all about.

For our template, we also need to change the text of our h1 heading to something more descriptive.

It will help search engine crawlers and our visitors to immediately know what our page is about without having to read all the text on our page.

  • Start by selecting the heading element in the first column, change the “HTML tag” from “h2” to “h1” and then also change the text to anything you like.

Edit first-level heading styles

  • Apply styles to your heading — change font size to 60px, transform to uppercase, font-weight to 700 and line-height to 72px.

Adjust first-level heading typography styles

Now let’s move on to style the countdown widget.

  • Make the countdown box’s background colour transparent.

Make countdown widget background transparent

  • Change the borders of the countdown boxes.

Adjust boxes border styles

  • Now style the countdown digits.

Style Countdown Digits

  • Finally, style the countdown labels and move on to style other elements of your coming soon page template.

Style Countdown Labels

  • Now style the second-level heading and paragraph widgets.

Style the second-level heading

Style the paragraph text

We are almost there, now let’s finally style our form — we do not need the message field so go ahead and remove it.

Now adjust the styles of your form until you are happy — refer to screenshots below for the styles I applied to my form.

Style Form Labels

Style Form Fields

Adjust form field border styles

Change submit button text

Style form submit button

Feel free to add any styles to make your template look more appealing.

So I went ahead and added more styling to my coming soon template and here is the final design.

Final Coming Soon Page Template Design

Step four: Let’s set our template as a coming soon page

  • Get back to the WordPress Dashboard and navigate to Elementor>Tools>Maintenance Mode.

Activate Coming Soon Page

You will see three fields listed under the Maintenace Mode.

  • Choose Coming Soon from the first drop-down.
  • Keep the second drop-down as it is. Keeping Logged In as your selected option will allow only logged in users to access the website during this time. And anyone who isn’t logged in will only see the Coming Soon page.
  • Pick the Template that you just created from the third drop-down. If you can’t find the template you just created, this means you have not published it. So make sure you publish the template before setting it as the Coming Soon Page for your Website.

Once you are done hit the Save Changes button and you are good to go.

To see if it worked, you need to log out of your Website and visit the front-end.

Ready? Tell us about your project.

This way we’ll be able to assist you in the best way possible.