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.
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.
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).
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:
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:
- A MailChimp API Key. You can learn how to find it here.
- And a MailChimp List ID, where we’ll save the new subscribers. You can learn how to find it here.
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.
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.
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).
After we finish setting up the team members, we can also add a motto or quote to this section.
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:
For the Google map, first we choose if we want to display it. If so, we enter a title and our coordinates:
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.
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.
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:
And here is how our coming soon page should look like:
If you have any questions or suggestions, please let me know in the comments below.
All the best,
Anli
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.