Create a WordPress Coming Soon Page in 15 minutes with Mira

Published on: Sep 28 2015 by Anli

Mira - Coming Soon Page WordPress Tutorial

If you’re planning to launch a new product or service in the future and you want to create a coming soon page to generate some subscribers before the release day, you can use a simple HTML Bootstrap template like this one. In this case you have to modify the template according to your needs by editing some HTML, CSS and Javascript files. Nothing too difficult, really.

But what if you wanted to create the same “under construction” page without touching a line of code?

You could use WordPress and the Mira Theme!

In today’s tutorial I’ll show you step by step and with the help of some screenshot images, how to create a “coming soon” page in WordPress in 15 minutes with the Mira Bootstrap WordPress Theme. Let’s begin!


1. Introduction, theme installation, options page

I wrote a quite long presentation of the Mira WordPress Theme when I released it a few months ago. It includes the full list of features and the description of the Options Page with images. You can find it here.

You can see a LIVE PREVIEW of the theme here.

And you can PURCHASE the theme here.

Now that we have everything we need, we download the theme, extract it and install it in our WordPress site. Note: the folder that you have to upload in WordPress is called “mira-theme”.

Open the Mira Options page by clicking on the “Mira Theme Options” item in the left menu inside the WordPress Admin panel.

Mira Theme Options

2. Setting up the main color and favicon

The Options page is organized in tabs that control different sections of the page. The first tab is called “General tab”.

From there we can set up the main color of our coming soon page (used for the buttons, hovers and links) and we can also upload a favicon image.

Mira Theme Options - General Tab

3. Setting up the “Coming Soon” section

Click on the “Coming Soon” tab to set up the coming soon section. In the first text field we can enter the name to use in the top menu for this section. The default is “Top”.

Next we upload the background images (up to 5 images). If we upload more than one image, the background slideshow is activated automatically. You can find some example images when you download the theme, in the folder “example-images/backgrounds”.

Now we upload an image for the logo. We can also use another image for the “hover” state of the logo.

In the last three fields we enter a title, description and the date for the countdown timer in the format YYYY/MM/DD.

Click on the “Save Changes” button and this section is ready (see image below).

Mira Theme Options - Coming Soon Tab

4. Setting up the “Subscribe” section

The section with the email subscription form can be customized from the “Subscribe” tab. This section is also “sortable”, it can be ordered or disabled (along with “The project”, “Testimonials”, “About us” and “Contact” sections).

We can also decide the type of background to use for these sections: white or fullscreen image. Next we enter the title and the description text for this section.

In the image below you can see the first part of the subscribe tab:

Mira Theme Options - Subscribe Tab

We continue with setting up the email subscription form. You can choose between two types of subscriptions:

  • Email: you receive the new subscribers in your chosen email address.
  • MailChimp: the subscribers are added in your MailChimp list.

Here we enter the placeholder for the input field, the text for the submit button and the error and success messages.

If we choose the MailChimp subscription type, we’ll need:

Mira Theme Options - Subscribe Tab

5. Setting up the “Project” section

In the project section we describe our product or service that we’re about to launch. This section is controlled by the “The project” tab. The first part of this tab is the same as in the previous paragraph: we enter the title, description, upload the background image, etc.

This section contains also some “boxes” (or “widgets” if you like) with an icon, title and description, to highlight the various features of our product. We can add up to six boxes. The icons used here come from Font Awesome, where you can find all the icon names.

Mira Theme Options - The Project Tab

6. Setting up the “Testimonials” section

We set up this section in the “Testimonials” tab. Here we show what our clients from previous projects have said about us, usually the positive reviews. The first part is the same as the other tabs above. We can add up to six testimonials; each one has a description and an image.

Mira Theme Options - Testimonials Tab

7. Setting up the “About us” section

We open the “About us” tab to customize this section. The first part is the same as above. Here we display the members of our team with names, roles / professions, photos, social media links and short descriptions.

We can add up to six team members. Each member can have up to four social media links with icons from Font Awesome (see link above).

Mira Theme Options - About Us Tab

After we finish setting up the team members, we can also add a motto or quote to this section.

Mira Theme Options - About Us Motto

8. Setting up the “Contact” section

In this section (“Contact” tab) we enter our contact information. We set up a contact form, a Google map that shows where we are, and we write our address, phone number or other details.

For the contact form we enter a title, our email where we want to receive the messages, and a text to display when the form is sent successfully:

Mira Theme Options - Contact Form

For the Google map, first we choose if we want to display it. If so, we enter a title and our coordinates:

Mira Theme Options - Google Map

For the address part we first enter the title and then all the details like phone, address, skype, etc. Each one of these details goes into a different line that starts with an icon from Font Awesome and continues with the text. We can have up to five lines.

Mira Theme Options - Address

9. Setting up the “Footer” section

Lastly, we set up the footer section of the page from the “Footer” tab. We enter the copyright text and add the social icons with their links. We can add up to six icons.

These icons come from this icon set and the available names that you can enter here are: twitter, rss, facebook, dribbble, vimeo, pinterest, instagram-1, linkedin, youtube-1, skype, flickr-2, myspace-2, google-plus-1, digg-1, deviantart, wordpress, github-1, stumbleupon, behance, tumblr, feedburner-1, android, apple, email-1, blogger.

Mira Theme Options - Footer Tab

Conclusion

We just learned how to create a Coming Soon page in WordPress with the Mira Bootstrap WP Theme without any programming knowledge. Assuming that you have all the images and texts, you can set up the page in 15 minutes. Here are some useful links:

LIVE PREVIEW

PURCHASE MIRA THEME

MIRA THEME FEATURES

And here is how our coming soon page should look like:

Mira - Coming Soon Page WordPress Tutorial

If you have any questions or suggestions, please let me know in the comments below.

All the best,
Anli

Filed under: Tutorials

Leave a Reply