How to Create an Elementor Coming Soon Page for WordPress

The Elementor page builder for WordPress allows you to build websites quickly and easily with drag-and-drop tools. In this video, you’ll learn how to use the free version of Elementor to make a “coming soon” page for your website.

How to Build a Coming Soon Page with Elementor

What You’ll Need

All you need to build this page is a WordPress installation with Elementor installed, a basic understanding of how WordPress works, and a spare half an hour. You may also find the resources listed below helpful.

What You’ll Be Building

In this tutorial, I will show you how to create the following coming soon page in WordPress for free using Elementor.

1. Plan the Initial Layout

Elementor is a great plugin to help you create your own designs for webpages by simply dragging and dropping elements. However, it is not a good idea to just keep dragging elements on to our webpage until it looks good.

You should consider spending some time on laying out the design of the webpage like what its contents should be etc. This is exactly what we will do in this section.

Step 1: Be Clear with Your Message

A coming soon page could literally be about anything. It could be a new product like a smartphone or a car, it could also be a new service like any image editing software or a new course. The coming soon page could also be about any offline business like a restaurant etc.

In this tutorial, we will be creating a coming soon page for a restaurant and we will make that very clear at the top of the page. Make sure that you do the same with your own product or service.

If possible, it is also important to mention when the product or service will come into existence. We will be adding a count down timer to our page for this purpose. Unfortunately, the count down timer element or widget in Elementor is not free. Therefore, we will be using another plugin called Essential Addons for Elementor. The free version of the plugin will give us a countdown timer.

Step 2: Mention Why People Should Care

A coming soon page should get people excited about your new product or venture. This will only happen if they think whatever your are planning to launch is actually something they want.

It makes sense to list the features of the product etc. that you are launching. If it is a smartphone, you can say something like the best camera in the industry or the longest lasting battery. For our restaurant, we will simply list some of the special dishes we will be serving when the restaurant opens.

Step 3: Give People a Way to Contact You

Coming soon pages are created for events that will happen in the future. Depending on how far into the future they happen, it is entirely possible that people might lose interest. It is also possible that some people might have additional queries about your product.

You can handle both these situations well by simply giving users an easy way to contact you.

Step 4: Include Other Relevant Details

Every product or service is different. This means that they will also require a coming soon page which is optimized for that specific product. One example of this would be the inclusion of a section in our page which lists the three locations where we would open the restaurant.

2. Create the New Coming Soon Page with Elementor

Our first step for creating the coming soon page would actually be simply creating a new page by navigating to Pages > Add New from the WordPress dashboard. Next, we will click on the Edit with Elementor button at the top to open up the page in Elementor and begin editing.

We want to start from scratch without any headers and footers. The best way to do that is to click the Settings icon in the corner and then setting the Page Layout under the Settings tab as Elementor Canvas. You can also add a new title for the page. I will go ahead with “Desi Dishes” here.

3. Add the Heading and Countdown Timer

All the elements that we can drag and drop on our page are located in the left pane of the Elementor editor. Make sure that you have installed the Essential Addons for Elementor plugin because we will be needing it here to add the countdown timer.

Begin by dragging a Heading element at the top of the webpage. Set the heading content to “The Best Restaurant in Town will be” under the Content tab. Head over to the Style tab for styling the element. Set the Text Color to be black and under Typography, select Playfair Display. The font name will appear for selection once you start typing it out. We will set the Size to 60px because the main heading needs to be big.

We will also need some extra space at the top to avoid congestion. We do this by adding a margin at the top of the heading by going to the Advanced tab. Before you set the top margin to 100px, make sure that you have unlinked the top, right, bottom and left margin values from each other by clicking the little link icon.

Now, it is time to drag another Heading element and drop it just below the first heading. Set the Content of the heading to “Open Soon” this time. Under Style, set the color to #7CB342 and set to font family to Playfair Display under Typography. Also, make sure the font size is 60px just like the previous heading. However, the Decoration would be set to Underline this time.

Click on the red Add New Section button and select the two column layout under Select Your Structure. This will add two columns in a row under the headings. Drag an image element over the right column and add any image you like. I have added this one from Reshot.

In the left column, drag and drop the countdown element. You can find it by typing Countdown in the search bar as shown below. Use the one that has the little EA label on it. We will now add our own custom styling to the countdown timer.

First step for that would be setting the Countdown Due Date to the day when the restaurant would launch. You can find this option under the Content tab. Now, head over to the Style tab and set the Space Between Boxes to be 15px. Under Color & Typography, set the Digits Color to #FEC503. Make the Label Color black and choose Bakbak One as the font. Also make sure that you change the top margin to -30px and the right margin to 150px. These options are available under the Advanced tab. They are set like this to align the with two more heading elements.

Drag two more Heading elements on the webpage. Place one of them above the countdown timer and the other one below it. Set the content of first one to “Only” and the second one to “To Go”. Set the Alignment of the second heading to Right. Set the Text Color for both the heading elements to #41758B and set the font family under Typography to Zilla Slab Highlight. For the second heading, set the top margin to -20px and the right margin to 130px from under the Advanced tab.

Finally, we will update the alignment of the headings and the countdown timer by setting the value of Vertical Align to Middle. These settings become visible once you click the Edit Section button.

At this stage, your coming soon page should look like the image below.

4. Add a Feature List

We need to add a feature list to our coming soon page in order to keep visitors excited about the launch. Since we are creating a coming soon page for a restaurant, it could be things like the ambience, the excellent customer service and so on. I have decided to list the special dishes that we will be serving at the restaurant.

We will begin by adding a heading element with the content set to “Our Specialities” and its Alignment set to Center. Now, head over to the Style tab and set the Text Color to white. Also, update the font family to Bakbak One, font size to 48px and the Transform to Uppercase under Typography.

Add a Margin of 100px at the top and -40px at the bottom. Also apply a Padding of 20px on all sides of the heading element. We will also apply border radius to the top of the heading element by setting the Top and Right values for Border Radius to 100px.

Add a section with three columns under the “Our Specialities” heading. We will use these columns to provide a little information about three different dishes. Before you do that, click the Edit Section button for this section and apply the following styles.

We added the top border to provide a buffer between the heading and the Mountains shape divider. The Color in both these settings should be set to #3949AB. Also apply a 30px margin at the top of the section and a 200px top padding with 80px bottom padding. The top padding provides a buffer for the text content.

Drag one Heading element to each of the three columns and set their content to “Vada Pav”, “Chur Chur Naan”, and “Dosa”. Now add one Text Editor element to each of the columns with some filler text. For the headings, set to Text Color to #2E7D32 and the font family to Playfair Display. Also set the font weight to 900 and Transform to Uppercase.

For the filler text, set the Text Color to black, font family to Dosis and the font size to 25px.

Since we will be serving a lot more dishes, I am going to add two more heading elements below our three dish columns. The first heading will have the text “… and that’s not all” and the second heading will have the text “We will be serving at least one popular dish from each Indian State.”. The Alignment for both the headings will be Center.

Apply all other styling values as shown in the image above. The first heading will have black color while the second one will have #5D4037 as its Text Color value.

5. Add Other Relevant Information

Creating a coming soon page for a restaurant that we are about to open won’t make much sense if the visitors cannot figure out where the restaurant is located. So, we will use this section to let the visitors know that we will be opening the restaurant at three locations.

As usual, we begin by adding a section after clicking the Add New Section button. Now click on the Edit Section button for this section and go straight to the Style tab. Change the Background Color to black for this section to make it stand out.

Now add a Heading element with the text “Opening at 3 Locations” to this section. Move over to the Style tab and change the Text Color to #FFEB3B. Under Typography, set the font family to Righteous, font size to 48px and the Transform to Uppercase.

Apply a Top margin of 50px and Left padding of 6px to the heading as shown in the image above.

Now add a new Inner Section element below the heading. This will create two columns. Put a location related image in the first column and three Text Editor elements in the second column. Apply the following settings to the Inner Section and the Text Editor elements.

6. Add Contact Information

The last step in the creation of our coming soon page is the addition of a “Connect with Us” section. This is where you can add any information that visitors can use to contact you. It could be contain anything from a newsletter sign up, a contact us form or links to your social media. For this tutorial, I am going ahead with the social media icons.

Add a new section by clicking the Add New Section button. Apply a top margin of 100px and a bottom padding of 150px to the section. Also apply a Pyramids Shape Divider to the bottom of the section. Set its width to 100 and height to 120px. Make sure that you have turned on the option to invert the Pyramid.

Now add a Heading element to the section with its Text Color set to black and font family set to Bakbak One. The font size should be 48px and Transform should be Uppercase. The content of the heading is “Connect with Us”.

Drag and drop the Social Icons widget from the Elements tab in the editor, below the last heading. It will have icons for Facebook, Twitter and YouTube. Set the Size of these icons to 58px and the Spacing between them to 35px. Under the Icon Hover settings, select Push from the dropdown menu. This will animate the icons as if they are being pushed when visitors hover over them.

The final coming soon after following all the steps in this tutorial should look like the following image.

Final Thoughts

In this tutorial, you learned how to create a coming soon page in WordPress for free by using Elementor. Most of the elements that we used to create our page were already available for free with Elementor. However, we had to install another plugin to use the countdown timer.

Try inserting one more sections in the coming soon page or create another one from scratch for practice.

Premium WordPress Themes and Plugins

Once you have your site set up, you’ll want to explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.

You’ve Built a Coming Soon Page for WordPress!

If you followed along you should now be looking at your own Elementor coming soon page for WordPress. I hope you’ve seen how easy it is to work with Elementor (even the free version is a great visual builder) and feel confident enough to have a go on more designs yourself.

Stay tuned for more practical tutorials coming soon, and don’t forget to check out more Elementor resources on Tuts+!

Post date March 22, 2021

This content originally appeared on Envato Tuts+ Tutorials and was authored by Adi Purdila

How to Build a Coming Soon Page with Elementor

What You’ll Need

What You'll Be Building

In this tutorial, I will show you how to create the following coming soon page in WordPress for free using Elementor.

1. Plan the Initial Layout

You should consider spending some time on laying out the design of the webpage like what its contents should be etc. This is exactly what we will do in this section.