How to create a coming soon page on Elementor + Best practices from a marketing perspective

So you’re launching your business soon, but already have the domain and can’t wait to announce the launch, so you decided to create a coming soon landing page? Or maybe having a coming soon, a teaser, campaign is part of your marketing strategy? No matter what the reason is, here’s how to create a coming soon page on Elementor + Best practices from a marketing perspective.

Table of content:

1. Why to create a coming soon landing page
2. The essential elements of a coming soon page – Examples
3. How to create a coming soon landing page on Elementor – Step by step
4. Best practices of a coming soon landing page
5. Under maintenance landing pages – Step by step
6. Coming soon campaign’s complete outline & requirements
7. Best coming soon examples – Marketing perspective

Why to create a coming soon landing page

Reasons may vary, but it is usually one of the following:

1. Having a teaser campaign, where you tease your audience about an upcoming announcement, launch, product and/or release.
2. Testing and getting feedback on the interest of the market.
3. An early birds campaign. Where visitors get some benefits for signing up early (discounts, more access, etc…), in return you get a list of interested people, potential customers.
4. For fun, probably the most common reason, but why not? Do it.

The essential elements of a coming soon page

Obviously everything depends on the purpose of the landing page. In some cases you might do something creative, never seen before or not usual, simply out of the necessity of your campaign. However, here are the categorical essential elements of a coming soon landing page:

1. Identification element – Something that will identify with your brand. A name, logo, slogan or a message that hints at the brand. Even a color could be enough.
2. The promise – You gotta give your audience an element of promise, they want to know what to expect, at least what kind of something to expect. For example, the trailers of movies, they give you footage of the movie, it might be misleading, but it is there. For a very creative campaign, you might not give any promises or expectations.
3. Reward – If this is an early bird campaign, you want to give early subscribers a reward, a motive to sign up early. Discounted prices, extra service, better subscription plan, limited offer, etc…
4. Sign up form – Obviously, your visitors have to sign up.
5. Timeline, date – When to expect the launch. A countdown, to create scarcity, a launch date. If you’re not certain, don’t give exact dates, it will most definitely piss off your audience. However, in some cases you might want to piss them off.

Example 1:

An online bank wanted to collect interested people’s contacts, to understand the market size and attract investors. We launched an early birds campaign, collecting over 60K leads.

• The landing page was focused on leading visitors to the registration form.
• The entire content was focused on the features that the bank will have.
• Installed a referral program, where the more you referred to people the more benefits you’d have.

Example 2:

Dropshipping website that would sell bicycle accessories. I created a coming soon landing page that promised a 20% discount to people who signed up early, with the launch date fixed.

• Went to Reddit/Quora forums, spread the landing page’s URL.
• Received dozens of registrations.
• Made 200$ worth of sales on the first day of launch.

How to create a coming soon landing page on Elementor – Step by step

I will be covering the technical steps here, so based on the above content, identify what content you want on the page.

Here are the steps:

1. Install Elementor & Contact Form 7 * HT Mega Addons
2. Create & design the Coming Soon page template
3. Form submission configurations
4. Turn Coming Soon mode live from Elementor’s settings, and choose the template

1. Install the required plugins

Elementor – The ultimate WordPress drag & drop builder. I’m sure you know it, not more talking about it.

Contact Form 7 – The plugin used to accept submissions. Here you can learn to fully design and edit Contact Form 7 forms.

HT Mega Addons – Few widgets to be used on the landing page, like, countdown.

2. Create & design the coming soon page template

From your WP dashboard click on Templates, then click on Add New. In the type, select Page, name your template, and create template.

Start designing your page as you wish.

Some notes:

•  Designing the page is visible in the YouTube video step by step. Didn’t find it suitable to show the designing stage here. https://youtu.be/k6Axv20sZuo
• If the outline looks weird, change the Template in the Post Attributes from the page settings to Elementor Canvas.

• Create a Contact Form 7 form, add the shortcode in the page.
  • WP dashboard -> Contact -> Add New
  • The shortcode is visible in the list

[A complete guide on fully editing and designing Contact Form 7]

3. Form submission configurations

You want people who submit the form to be gathered in a list automatically so you can send them emails and inform them about the launch and their rewards.

To do that, I recommend you create a Mailchimp account, and then integrate it with your Contact Form 7. To do so follow the steps below:

1. Create a Mailchimp account.
2. From the bottom corner, click on your account -> Account -> Extras -> API Keys
3. Scroll down and click on Create A Key
4. Rename the label and Copy the API Key (This is confidential, don’t share it with anyone)

5. From your WP dashboard install the following plugin, Integration for Contact Form 7 and Mailchimp
6. From the plugin’s settings, go to Mailchimp Accounts -> Add New Account
7. Name the account, in the API Key field, paste the key that you copied from your Mailchimp account
8. Head over to Mailchimp feeds. Add New feed.
9. Name the feed, choose the Mailchimp account, choose which Contact From 7 submission you want to take to Mailchimp, choose which list do you want the contacts to be in the Mailchimp account and finally start mapping the fields. (Email -> Email, First name -> Name)
10. DONE

With this, everyone who submits your form will automatically appear in Mailchimp.

Note: Don’t forget to configure the information in the form’s mail section itself. So whenever a form is submitted you receive an email about it. To do it follow the steps:

1. Go to your form’s edit mode, then go to the Mail section.
2. In the “To” field – add your email address so that you will be notified about the submission.
3. In the “From” field – add the email address from which you want the email to be received. Probably again your email address.
4. “Subject” – The subject of the email, write something specific about this form, like the form name, so you can easily identify which form was submitted.
5. “Message body” – Write the text which you want to be in the email body. Obviously include the submitted variables [your-name] [your-email]… These variables are the inputs that your visitors used. You can find the list of variables (fields) used in the form, in the top section of the mail in bold.

4. Turn Coming Soon mode live

1. From your WP dashboard -> Elementor -> Tools -> Maintenance Mode
2. Choose Mode: Coming Soon [Coming Soon vs Maintenance Mode]
3. Who Can Access: Logged In
4. Choose Template: Choose the template that you created
5. Save changes

Best practices of a coming soon page

Well, as I said before, everything depends on your campaign’s details and goals. There is no one size fits all rules. But here are some things to consider.

1. Make your page short – Don’t overcomplicate with details that are irrelevant at this point.
2. Make your messages clear – Make it understandable, set the expectations right. Do not overpromise and underdeliver.
3. Make the submission easy – Don’t ask for too much information, they still don’t know you, they don’t trust you, don’t ask everything. Ask based on the value that they will get. If you’re giving 1M$s, you can ask for some more 😉
4. This is the first impression – Make sure you leave a good first impression.
5. Don’t make promises you can’t keep – Be clear and strict on your deadlines, promises and deliverables. People will trust you before you actually prove yourself, this is your chance to do it right, do it right.

Under maintenance landing pages – Step by step

If you’re not running a coming soon campaign, then having a maintenance mode might be a more suitable solution.

Coming Soon vs Maintenance:

• Coming Soon: Returns a 200 code – which means Google will index your page/content and rank it.
• Maintenance Mode: Returns a 503 code – which means it won’t be indexed by Google and other search engines. This is best used when your website is actually under maintenance and you don’t want your website to be ranked for the content written on the Maintenance mode page.

[More info on different codes and their meanings 200 vs 503]

For the maintenance mode, you wouldn’t need sign ups or any marketing content. Instead, just a lovely message letting your visitors know that your website is being built and that it will be ready soon.

To set up a maintenance mode, go to Elementor -> Tools -> Maintenance Mode -> In the Choose Mode field pick Maintenance Mode. That’s it.

Coming soon campaign’s complete outline & requirements

Your campaign has to make sense, you can’t just create a page and wait for sign ups, unless your project is very anticipated and PRed. In such cases, word of mouth can do all the job itself.

Here’s an outline of a coming soon campaign:

1. Identify your campaign’s goals and objectives.
2. List the value it’s going to give to your audience.
3. Clarify the amount of giveaways, bonuses, offers you can offer, and its short/long term benefits and risks on your brand and business.
4. Identify the amount of information you can reveal in the “coming soon” campaign.
5. Identify the promises you can make brand-wise.
6. Design & create the landing page.
7. Set up onboarding emails.
8. Prepare your social media channels.
9. Create a calendar with everything outlined – messages, posts, dates, emails.
10. Start teasing about your launch.
11. Share your landing page whenever possible – Forums, social media, friends and family.
12. Announce the launch everywhere – Social media, emails & website.
13. Keep your promises.

Best coming soon examples – Marketing perspective

The Matrix Resurrection

Check this landing page out. It went viral, fans around the world were so hyped for the trailer, a trailer, not the movie, but the trailer, they had a coming soon teaser campaign for the trailer and it worked like a charm.

https://thechoiceisyours.whatisthematrix.com/en/

Kanye West – DONDA

The mfer planned out the entire campaign, from deleting all his insta photos, profile picture, to having listening parties of the album. Now the website only features a single product worth 200$ with which you can stem DONDA. Nothing else.

https://kanyewest.com

Spider-Man: No Way Home

The campaign was/is so successful that unless you live in a cave, you’ve heard about it somehow. The movie’s landing page is rather an entire website containing the trailer, images, information about the movie, social media links and of course a link to subscribe.

https://www.spidermannowayhome.movie/