Building a Coming Soon Page in Elementor [Time to Complete — 15 Minutes]
by Alex Bulat
There’s a 100% chance that you will buy your domain name long before your website is built. The next moment after your DNS get resolved website URL will appear in the bio section of your Instagram account, or some other social network, just to brag.
That’s why you need to make sure that you don’t lose some of your early website leads. To make sure this happens you need to build a simple splash page or a coming soon page that can help you gather some leads in your MailChimp or SendPulse accounts (in case you have a subscription form on this page).
Further, I’ll show you how to build the Coming Soon page and active Coming Soon mode on your WordPress website powered by Elementor builder.
The Maintenance Mode
Someday we had to use plugins like Coming Soon CC but now the Maintenance Mode feature is implemented into the Elementor builder tools. You can access it from the Tools menu item, under the main menu item Elementor
In order to activate Maintenance Mode, you need to create a coming soon template. Now let’s see how we can do it.
Since everyone these days is obsessed with the Avengers: Endgame movie (so am I actually) I’ve created a Coming Soon page for it.
This is the final look.
Coming Soon Template
While you were on the Maintenance Mode tab in the Elementor settings you might have seen the create a new template link, go there and press it.
The template editor will open
There you need to add a title and change the layout of the template. Since we don’t need a header or footer our page should have Canvas layout. In the Post attributes choose Elementor Canvas.
When you’re done, press on the big blue button Edit with Elementor. Also, you can change the visibility setting of this page, either to publish it at once or make it private.
I left it public (anyways no one will reach my page unless they have the URL) so every change I’m about to make will be immediately visible to the guests.
When the Elementor editor loads you will see the lovely editor layout.
To ease the process a little bit, I’ll choose a ready-made block and will customize it.
Press Add template, it’s the folder icon.
This block looks OK, so I’ll use it.
Press on the green button Insert, to add this block to your editor.
For my design, I want to use the movie trailer#2 as the video background
On the Style tab of the section, we need to add the URL of the video to the Background Type — video option.
The video will start playing immediately, there you can set start and end time in seconds.
Don’t forget to add the Background Fallback image, either tablet and smartphone users will see an empty background.
Content Elements
Now let’s see what content elements I will use. In the right column, there will be:
- Movie title;
- Title of the page;
- Subtitle;
- Counter;
- Button.
In the left column, there will be:
- Marvel logo;
- Social media icons (Facebook, Twitter & Instagram).
From the block, I’ve used I need only one column, so I’ll remove the right one.
No there’s only one column left.
Now I’ll add the section inside this column it will include the movie title and Marvel logo. Let’s drag image widgets into the parts of the section.
As you can see it’s not centered, that’s because there’s padding right value of 10%, it needs to be removed.
To add an image just press on the widget and choose an item from your media gallery, if it’s not there yet, upload it from your PC.
Both items are there, but the Marvel logo has to be aligned to the right.
Now I’ll add the second section, the rest of the content will go there.
Since I don’t need the text widget, I’ve removed it but duplicated the title widget. All widgets are centered.
The last thing is the social media icons, I will use the Social icons widget, but will tweak it a little bit.
Fine Tuning
To make this page fit the movie color scheme let’s find what colors are used in the Avengers: Endgame. According to schemecolor.com, this is the palette we’re looking for.
I want to use the darkest color from the palette as an overlay for the background, right-click the background and press Edit Section.
The color I need is #0B0930, go to Style >> Background Overlay >> Background Type >> Color
Now the background looks darker and way cooler.
The font color will remain white, but I will use Tahoma 35px (font weight 600) and Tahoma 25px (font weight 400) for title and subtitles respectively, both items uppercased.
Here comes the button, I want it to be outlined with two rounded corners. Here are the settings I’ve used for the button.
Now let’s move on to the social media icons. Since Google+ is already dead we need to replace it with Instagram. In order to stick the buttons to the bottom of the column, in the Vertical Align options, we need to set the value Bottom.
These are the settings I’ve used for Icons:
And here come the settings for the Icons Hover:
In both options, primary colors should be set to transparent.
Here’s the final look.
As you can see the video background still distracts from the content, let’s add an image and some color to the back of this column.
Go to Edit Column >> Style >> Background >> Background Type >> Classic.
First of all, let’s add some color to the column, I will use the same as for the background video, which is #0B0930.
It’s getting darker :)
Now go to the Background Overlay >> Background Type >> Classic >> Image.
Here I will use the movie poster.
Opacity — 0.38, Blend Mode — Screen.
This looks much better.
Now, guess what’s missing? IT’S THE COUNTDOWN.
Since Elementor doesn’t have such widget I will use JetElements plugin.
It’s really easy to customize, just set the Due Date (in this case April 26), and some styles.
Typography settings for the labels:
- Font face — Tahoma;
- Font weight 400;
- Uppercase.
Typography settings for the digits:
- Font face — Tahoma;
- Font size 60 ;
- Font weight 100.
This looks much better.
The final stitch is the shadow, I will use the color #7b6fde.
That’s it, the page is done.
In case you’re planning to build a lot of websites with Elementor builder I recommend you join subscription service ONE, there you can get literally thousands of Elementor WordPress themes paying only $19/mo.
P.S. Using the promocode BecomeThe1 you can save 5% off your yearly subscription.
