How to Create Upcoming Pages in WordPress with Elementor

How to Create Upcoming Pages in WordPress with Elementor

"Coming Soon" pages are created before a website or project is all finished and live. With Elementor, you can create a Coming Soon page from scratch or use a ready-made template.Elementor is a powerful page builder that allows you to create and add different types of pages and important elements to your website.

The "Coming Soon" page is an invaluable website element that you can create using the Elementor plugin. In this article, we'll show you step-by-step how to create a Coming Soon page using Elementor.

What is the Coming Soon page?

The Coming Soon page is a temporary web page that is displayed to visitors before the final launch of the website or project in question. It is effectively a teaser. It provides information about upcoming content and allows visitors to subscribe or stay updated until the page or project is officially launched.

It usually includes a brief description of the upcoming product, a countdown timer, and options for visitors to subscribe or follow updates. It is a marketing tool used to capture leads and build a pre-launch audience, setting the stage for a successful launch.

When and why you should create a "Coming Soon" page

From a marketing perspective, creating a "coming soon" page can be very beneficial to your business. However, you must be strategic enough to anticipate the future and implement your plan accordingly. The following points illustrate when and why you should create a "Coming Soon" page.

  • Website Development

If you're building a new website or redesigning an existing one, a coming soon page can serve as a noticeboard while you work on the site behind It allows you to inform visitors that your site is under construction and let them know what's coming soon.

  • Pre-launch Marketing

"Coming Soon" pages are an effective way to create buzz and generate anticipation for an upcoming product or service. By giving a preview of your upcoming product or service, you can capture the interest of potential customers and start building a pre-release audience.

  • Generate Leads

One of the main purposes of the "Coming Soon" page is to collect email addresses and contact information from interested visitors. You can collect leads and build a list of prospects to keep up to date by providing a subscription form or call to action. ViewBest WordPress Lead Generation PluginsThe

  • Brand Awareness

A well-designed "Coming Soon" page can help you build brand identity and make a memorable first impression. By incorporating your brand colors, logo and message, you can start building brand awareness even before your website is fully launched.

  • Social Media Promotion

"Coming Soon" pages provide an opportunity to promote your social media accounts and encourage visitors to follow you on platforms such as Facebook, Instagram or Twitter. This allows you to stay in touch with your audience and provide updates on the progress of your website or upcoming releases.

How to Create a Coming Soon Page in Elementor

In this section, we will show you how to create upcoming pages in Elementor. But before we get to the tutorial section, make sure you have the following plugins installed on your site.

You might ask-Why HappyAddons and not Elementor Pro?The answer is that you will hardly find any ready-made Coming Soon page templates in Elementor. But HappyAddons provides tons of Coming Soon page templates to get your pages ready right away.

You can create upcoming pages from scratch using the free version. In this case, you will miss out on many exciting premium plugins. However, we will use the HappyAddons Pro plugin in this section to complete this tutorial.

There are two ways to create a "Coming Soon" page. Explore them with us below.

Method 1: Create a "Coming Soon" page using a ready-made template

As mentioned above, HappyAddons provides many ready-made templates for upcoming pages. Using these templates, you can have your upcoming pages ready in just a few minutes. The process is described below:

Step 01: Install and activate the above plugin

As we said, make sure that the three plug-ins thatElementor, HappyAddons&HappyAddons Pro, already installed and activated on your site.

Install and activate the Above Mentioned Plugins

Step 02: Open the page with Elementor Canvas

switch to Pages > Add New PageThen, use Elementor to open the page. Then, open the page with Elementor.

Open a page with Elementor

After opening a page with Elementor, go to Settings > Page Layout. Select from the drop-down list Elementor CanvasThe

Elementor Canvas will remove the page header and footer. In fact, the "Coming Soon" page does not need to display a header and footer. Therefore, we chose the Elementor Canvas option to remove the header and footer.

Open the page with Elementor Canvas

Step 03: Import Upcoming Templates

Click on HappyAddons Template Library Icons, open and access the template library.

HappyAddons template library

It's easy to filter and find templates for upcoming pages.strike (on the keyboard)Arrow symbol in the upper left cornerThe

optionUpcoming Options.. The screen will show all upcoming blocks and related pages.

strike (on the keyboard)Insert buttonAdd your favorite templates to the canvas.

Find and select a coming soon page template

The upcoming page templates will be imported into the canvas in seconds. You can now modify it by adding new widgets and elements.

The coming soon page template imported

Method 2: Create a "Coming Soon" page from scratch

You'll get tons of useful widgets in the Elementor panel that make it easy to create your upcoming pages from scratch. We'll show you how to do it this way. Let's start by taking a look at the widgets you'll need to create an upcoming page.

Now, onto the tutorial.

Step 01: Select the structure and add content to the Elementor canvas.

Elementor has released Flexbox containers in the 3.6 update.Select a Flexbox column structure on the canvas.This way you can add widgets and design the upcoming pages.

For this tutorial we will chooseFirst column structureThe

Select a Structure to Add Content on the Elementor Canvas

Step 02: Add a color or image to the background of the structure bar

By adding the right colors to the column background, you can create a vibrant environment to showcase the information and design elements of the upcoming page.

To add a color to the column backgroundclick (using a mouse or other pointing device)Columns on thesix-point icon. Go to Style tab. Click on the tab underColor OptionsThe

Add a Color to the Background of the Structure Column

Alternatively, you canBy clicking the "Image" option under the "Style" tab for the backgroundAdd an image.

Add an Image to the Background of the Structure Column

Step 03: Add a spacing widget to the top of the structure

Find and add Spacer Partsto the selected area on the canvas. It will create a space between the top and another part of the selected area. Otherwise, your content may show up as aligned with the top edge, which doesn't look good.

Add the Spacer Widget on top of the Structure

You can find more information on theContent tabCustomize the height of the widget in the

Customize the height of the Spacer widget

Step 04: Add the Text Editor Widget to the Selected Area

commander-in-chief (military)Text Editor WidgetDrag and drop onto the canvas of the selected area. This will allow you to write the copy for the upcoming page.

Add the Text Editor Widget to the Selected Area

You can see that we have written a text on the gadget. Then, we wrote a text in theStyle tabIt is customized in theColor, alignment, typography&font sizeThe

Add a copy to the coming soon page and customize it

Step 05: Add the Countdown Widget to the Elementor Canvas

HappyAddons has aCountdown Widget. Find and add it to Elementor Canvas.

Add the Countdown Widget to the Elementor Canvas

The countdown widget includespresuppositional componentMultiple templates under. You can choose a template or customize it from scratch. However, we will choose a template for this tutorial.

Select a template for the countdown widget

existtime portionYou can set how long you want the countdown to last.

Set how long you want the Countdown to last

existCountdown Timer SettingIn this section, you canRewrite the label for the countdown optionas well asalignmentThe

Configure the Countdown Settings

go into Style tabYou will be given the option to stylize the widget with the appropriate settings. You will be given the option to style the widget with the appropriate settings. You can modify the widgetcolor, font size, padding, margins of theetc.

Stylize the Countdown widget

Step 06: Add contact form

Adding a contact form to the Upcoming Releases page is crucial. It allows you to collect the email IDs of your interested audience and keep them up to date with your latest news.HappyAddons integrates with many form builder plugins such as Contact Form 7, WP Forms, Ninja Forms, Caldera Forms, weForms and more!

To add a contact form, make sure the Forms plugin is installed in the backend. In this tutorial, we have installed the Contact Form 7 Plugins. Check out some of the otherBest WordPress Contact Form PluginsThe

Install and activate the Contact Form 7 plugin

Create a contact form using the plugin. As we can see, we've created it and named it Contact form 1The

Create a contact form using the Contact Form 7 plugin

find Contact Form 7 widget and add it to the Elementor canvas.

Add the Contact Form 7 widget to the Elementor Canvas

Now you have to select the contact form to be displayed on the canvas. Go to Content > Contact Form 7. Select the name of the form you created in the backend. Watch the video below to see the entire process.

Content tablowerPreset OptionsSelect a template for the contact form.

Select a template for the Contact Form

# Stylize the Contact Form

As you can see, the contact form is too wide for the design. You can reduce the width of the form by holding the right edge of the form and dragging it to the left.

Go to the Advanced tab. Underneath it is theself-alignmentOptions. Here you canSelect Center Alignmentoption to display the form in the center part of the canvas.

Centrally align the contact form

go intoStyle tab. In this tab, you can customize the color-size-weight, placeholder color, font size, and CTA buttons of the label.

We won't explain the details here.

Customize the contact form

Step 07: Add a spacing widget at the end

Add the spacing widget again to create a space between the bottom line of the canvas and the main content. This will make the design of the upcoming page more aesthetically pleasing.

Add the Spacer Widget at the End

Step 08: Add "Coming Soon" text

Hey, since this is a Coming Soon page, you have to add "Coming Soon" to the canvas to make sense of your design. We forgot to add it at first. But once you've found it, it's not too late to do the right thing.

utilization Text Editor Widget, you can easily add "Coming Soon" text to the canvas. See the image below; we've done it.

Add the Coming Soon text to the page

Step 09: Make the "Coming Soon" page mobile-responsive

Due to the relatively narrow screen widths of mobile and tablet devices, it is important to reduce the size of the page elements so that they fit perfectly on the screen.

Click the Responsive Mode Options. It will open theDepending on the device at different breakpointsThe option to switch between

No matter which device you switch to, you can customize the content to perfectly match the screen size. Customization details will be saved based on the screen size of the device.

Attention: Do not delete any element of any screen; it will work equally well for all device modes.

Make the Coming Soon Page Mobile Responsive

ferret out How to Make Your Elementor Website Mobile ResponsiveThe

Step 10:Save the design

When the design is complete, click the Publish or Update button on the Elementor panel to save the design and all changes.

Attention: Save the page with an appropriate name, such as "Coming Soon" so you can always find it when you need it.

Save the Design

This way, you can create your upcoming pages with Elementor. Now you can use it as a landing page or template for an upcoming launch. This template can be imported and used for other websites created with Elementor.

How to Enable Coming Soon Pages in WordPress with Elementor

So far, you have just designed the Coming Soon page using Elementor. Now, you need to complete more configuration in order to display the page on the front end. Enter the WordPress Control Panel. Navigate to Elementor > Tools > Maintenance ModeThe

surname Cong "Select mode" optionchoose from "Maintenance"The

exist "Who can access"in which you can define who can see the "Coming Soon" page.

Next, from theSelecting Template OptionsSelect the page you created a while ago.

Click on the lastSave Changes buttonThe

You'll see that Maintenance mode has been activated, and your page will be displayed on the frontend.

Wrapping Up!

Finally, using Elementor in WordPress to set up upcoming pages is a great way to keep your audience engaged when your website is finalized. With Elementor, you can easily create pages while keeping them eye-catching and functional.

While adding a contact form is not required, we recommend that you complete the page with a contact form powered by a powerful plugin so you don't miss out on any potential customers. If you run into any problems, just type them in the comment box or send them to our support staff via the chat box.

Other Latest News