Your website may still not be ready. But you want a better way to keep your potential visitors updated on your website launch. This article will show you how you can easily create a coming soon page on Elementor.
As you try to work on your “Coming Soon” page, it is important that you also build your mailing list. Creating an e-mail list is important. Many might argue that it’s e-mail marketing is dead. But I’d disagree.
It is still one of the most effective online marketing channels for both acquiring customers as well as retaining potential clients/customers. Once you have a well-targeted e-mail list, it have a huge positive impact on your ROI.
So why am I telling you all of this? It’s so that you get started building your e-mail list right from the word go! And this includes prior to your launch too – i.e. to include a newsletter subscription in your coming soon page.
Is “Coming Soon” different to “Maintenance mode”?
Elementor provides you to the option to set your website either as Under Maintenance or as “Coming soon”. They are both enabled from the same dropdown menu.
So what’s the difference between the two? It’s all in the header response codes! Basically, these can affect the way your website communicates with Google Search crawlers.
Setting up your website to maintenance mode returns an HTTP 503 code. This would tell Google and other search engines (as well as your visitors’ browsers) that your website is temporarily unavailable and that they should come back soon. They send strict signals for Googlebots to not crawl your website so you must use it very sparingly.
On the other hand, with coming soon mode, your site will return a 200 OK code. This is the code that normal, functioning websites return. The implication of this code is that search engines will still go ahead and index your page. This is the ideal option if you want your website to be searchable because while you prepare the final touches on your site.
Creating the “Coming Soon” page template
Fortunately, Elementor’s template library has a dedicated section for “Coming Soon” templates to choose from. Most designs will include a strong heading with a countdown timer and an attractive background image.
To create a new template:
- Go to Templates > Add New
- Select ‘Page’ from the first drop-down list and give your template a name – say “Maintenance” or “Coming Soon” depending on your use case, and then click Create Template
- You could either design your own template or choose from Elementor’s template library.
- Once done, click Publish.
If you are on the free version however, your choice would be limited. Nevertheless, designing from scratch shouldn’t be too hard either. You could either download the template used in the tutorial or gain inspiration from various sources online (opens in a new tab).
Below are the different sections you will need to create a Coming Soon page on Elementor that are effective:
- Strong headline stating that you will be launching soon;
- Countdown timer widget set to expire on your launch date;
- Form widget to to capture entries from visitors interested in being notified about your website launch;
- Social Media icons to connect with your visitors on your social pages such as Facebook, Instagram or Twitter.
Activating your “Coming Soon” template
So, how would set up your coming soon page on Elementor? This involves setting up a Coming Soon HTTP 200 code, meaning the site is ready to be indexed. To do this, you need to follow these simple steps:
- On your WordPress Dashboard, and go to Elementor > Tools – click on Maintenance Mode.
- Choose the mode you want depending on your use case (see above for the difference)
- In the drop-down labeled ‘Choose template‘, select the template that you created in the above step – which is this case was named as ‘Coming Soon’.
- Click Save Changes.
Creating your mailing list
A well-designed coming soon page is a great way to spark interest and create a targeted e-mail list which you can use for marketing purposes. Use a mail responder platform that can help you create a mailing list. There are two ways you can automate the process of creating this list based on the information submitted on the coming soon page.
- using a 3rd-party plugin;
- using the Form widget.
This article would focus on the 2nd approach only which requires Elementor Pro.
Note: If you are using the free version of Elementor, you will need a 3rd Party plugin such as Contact Form 7 to integrate with your mail responder. For example, if your mail responder is MailChimp, you will have to install the “MailChimp for WordPress” plugin to include the signup form on your Coming Soon page.
Using Elementor Forms widget
One of the ways to achieve this is to include a Form widget that integrates with your mail responder. This is however a feature available only if you have the Elementor Pro version. Including the Form widget on your coming soon page will let your visitors enter information (such as e-mail addresses) which can be later used for your marketing purposes. It could either be a simple form with just the e-mail address or you could ask for more information such as name, country etc.
Designing the form
Depending on your requirement, you can decide the form accordingly. The following steps shows how you can create a simple form to collect data (their name & e-mail address) from visitors:
Step 1. Click & drag the form widget to a column you wish to place the form
Step 2. Under “Content” tab, delete the fields you don’t require (in this case, that would be only the “Message” field).
Step 3. Set the “Label” field to “Hide” to give your form a cleaner look.
Step 4. Set the column width of “Name” and “E-mail” field to 40% respectively and the button width to 20%.
Step 5. Customize the fields and buttons on the “Style” depending on your requirements
Actions after submit
Once the visitors submits the information on the form, you can decide what you’d want to do with this information. The Form widget allows you to integrate it with your mail responder (eg: MailChimp, ActiveCampaign, Drip etc). This automates the process of adding the submitted data to your mailing list. Here’s how you could do it (assuming you use MailChimp as your mail responder):
Step 1. Under “Actions After Submit”, select the mail responder you use (which in this case is MailChimp)
Step 2. You will now see a tab called “MailChimp”, you will see the API Key set to “Default”.
Step 3. Change it to “Custom” which will prompt you to enter a Custom API Key. You can find a detailed guide on how to obtain your API Key here.
Step 4. Assuming you have created a list in your MailChimp account, you will be asked to select the list that you need the data to be added to.
Step 5. Under “Field Mapping”, select the field that corresponds to the one in the form.
Step 6. Click Update.
Final thoughts
In this article, we looked at creating a “Coming Soon” page on Elementor and also using Elementor’s form widget to build your mailing list right from the beginning.
We achieved with just Elementor and no third-party plugins for our basic setup. They can be fully customized with zero restrictions on its functionality.
