How to create a "coming soon" page

A coming soon page is useful if you'd like your site to remain private while you work on setting up your theme. In this tutorial, we'll show you how to create a beautiful coming soon page that matches your 17th Avenue theme.

Creating a coming soon page

For a coming soon page, we recommend CMP - Coming Soon & Maintenance Plugin. We've tested several coming soon plugins, and this is the easiest to customize!

1. Install and activate the CMP plugin.

2. Once installed, go to the CMP Settings tab in the lower left corner of your WordPress dashboard and select "CMP Basic Setup."

3. To turn on the coming soon page, click Enabled:

Customizing your coming soon page

Now it's time to make your coming soon page beautiful!

1. To get started, click the "Content" tab in the CMP Settings.

2. On this page, you'll see several sections:

  • Logo Setup — You can display a text-based site title, upload a custom logo image, or disable the logo.
  • Main Content — The main content will display beneath the logo/title. There is a field for a heading, and a field for a message/text. The heading field is great for a coming soon message (example: "New Website Coming Soon!") and the message field is great for less prominent information (example: "Thanks for stopping by! We're currently updating our website. Please check back later.") Both fields are optional.
  • Graphic Background — This is where you can change the background of the coming soon page. Your background options are: custom image, stock image, video, graphic pattern, solid color, or gradient color.
  • Social Media — If you'd like to display social icons on your coming soon page, you can select your icons here and add your links. The social icons will display in the footer of the coming soon page.

3. To change the appearance (fonts and colors) of the coming soon page, click on the "Customize" tab.

4. There are two main sections in the Customize tab:

  • Customize Colors — In this section you can select your font color (for the site title, heading, message, and social icons). You can also select the background color for the footer, which displays behind the social icons if they are enabled.
  • Customize Fonts — The "Headings font" will change both the site title and heading font. The "Content font" will change the font of the message/text. 

Tips for customization

Each of our themes has a "Font & Color Guide" in the theme documentation. If you'd like to use the fonts and colors from your theme in your coming soon page, refer to the Font & Color Guide for your particular theme.

If you'd like the social icons to be a different color from your headings/text (i.e. white icons and black text), you can use this code snippet:

.social-list i {
	color: #fff !important; }

Add this snippet in the "Custom CSS" tab in the CMP settings.

Coming soon page examples

Matching Magnolia theme; image background; social icons enabled; using white icon code from tips section.

Matching Charlotte theme; solid color background; social icons enabled; using white icon code from tips section.