How to Create a Coming Soon Page in ProPhoto

A coming soon page is a landing page that locks your visitor out of your main site and encourages them to signup for updates. A coming soon page is a great solution to capture leads of interested customers while your site is actively being worked on or fixed in the backend.

In this post, we are sharing how to create a ProPhoto coming soon page in eight easy steps:

1. Create a new ProPhoto design
2. Create a new ProPhoto layout and assign it as default
3. Hide the mobile menu tile
4. Create the coming soon block
5. Style the row
6. Style the column
7. Add elements to the column
8. ‘Go Live’ with your coming soon design

If you would rather ditch the DIY setup we offer ProPhoto templates with pre-made coming soon pages included. Check out our premium ProPhoto templates with coming soon pages.

How a ProPhoto coming soon page works

ProPhoto allows you to have two designs active at the same time: a ‘Live Design’ that your visitors can see and a ‘Customizing Design’ that you can edit on the backend. The ‘Customizing Design’ is only visible to admin users logged into the site.

This tutorial will walk you through setting up a new ‘Live Design’ that will serve as your coming soon landing page.

1. Create a new ProPhoto design

From the WordPress dashboard click ProPhoto > Manage Designs to create your new design. Scroll down and click ‘create blank design.’

Pro Tip: Optionally, you can copy a design already available in your manage designs section. This is a little shortcut to save time on customizing your text styles and other branded elements.

Give your new design a name such as “coming soon” and click the customize button. Before we make this our ‘Live Design’ we need to create the actual layout so don’t push the ‘Go Live’ button just yet, we will do that in step 8 below.

2. Create a new ProPhoto layout and assign it as default

Create new ProPhoto layout

Open the ProPhoto customizer by clicking the ProPhoto customizer shortcut button (on the top navigation of the page). Once you open the ProPhoto customizer go to Layouts > Add New Layout. Name the layout “Coming Soon.”

Assign the ‘Coming Soon’ layout as the default layout

When visitors land on any page on our site we want the coming soon layout to appear. To achieve this we will assign our layout as the default in ProPhoto.

Next, click the “default layout” dropdown menu and select ‘coming soon’ from the layout list. This will assign the coming soon layout to all pages by default.

A dialog box will appear asking if you want to change the default layout. Click continue to accept the new default layout style.

Finally, click the blue “save” button.

3. Hide the mobile menu tile

A key feature to a coming soon page is disabling any menus or navigation so we will need to hide the mobile menu for this layout.

On the left panel, click elements > tiles and then click the setting icon for the menu tile.

Temporarily hide this mobile menu by clicking the eye icon to disable and hide each layer.

4. Create the coming soon block

Now that we have created a “Coming Soon” layout, we need to add content to the layout by adding a new block.

Click Blocks > Add Block from the left panel and name the new block by clicking on the title (in the left panel), for example, ‘Coming Soon.’

Drag and drop the new block into the page layout.

Style the coming soon block background

Click the setting icon for the block to open the block settings and scroll down to the background settings.

Click the ‘add image‘ button and select an image from your media folder or upload a new image.

Use the following background image settings or experiment with the background image settings to achieve your desired style:

• Position: center center
• Size: cover
• Repeat: no-repeat
• Attachment: fixed

Scroll down to ‘Block Height’ and select the ‘Full Heigh’ radio button. Next, click the ‘Center’ for the module alignment button.

5. Style the row

Scroll back up (inside the block dialog box) and click the row setting icon (in orange) to lock it in. Scroll down and use the sliders to add padding to your row. A good number to start with is 10% but you can select any number to achieve your desired look.

6. Style the column

Up next, we will give the column (in our coming soon block) a color and styling.

Add a column color

Scroll back up (inside the block dialog box) and click the column setting icon (in blue) to lock it in. Scroll down to the background color section and click the plus icon and select a color from the color picker.

Add column padding

Next, add padding to the column. A good start is 8% around all sides but you can select any number to achieve your desired look.

Pro tip: be sure to check how this layout looks in the phone mobile version. Adjust the padding settings for specific device breakpoints if desired.

7. Add elements to the column

Click ‘Elements‘ on the left ProPhoto panel. Click and drag a text module into the column. Type your desired text directly into the text module. Optionally apply heading tags (h1, h2, h3) to your text.

Styling the text modules

Change the text default styles if desired. Click the setting icon of the text module (in purple). Scroll down and select your desired font style from the dropdown. If no font styles exist simply create a new font style from the left panel.

Add any relevant modules to achieve your ‘coming soon’ page goals. For example, add a widget module to add your MailChimp or Flodesk signup form.

8. ‘Go Live’ with your coming soon design

Once you have completed all your styling to your layout you are now ready to ‘Go Live’ with your design.

Be sure to click the blue ‘Save‘ button to save all your changes. Next, click Exit > Go to Dashboard > ProPhoto > Manage Designs.

Locate your ‘Coming Soon’ design from the list and click the ‘Go Live’ button.

Please note: this will now make your design visible to your website visitors.

With your coming soon layout now live, you can create or copy a new ProPhoto design in the backend and customize it while your visitors continue to see the ‘coming soon’ live design.

Final result, a perfect ProPhoto coming soon page

Your final result is a simple yet effective coming soon page design in ProPhoto. There are unlimited ways to style your own ProPhoto 7 coming soon page. Add in your own fonts, colors, images, logos, and unique content to make this ‘coming soon’ page match your brand and business needs.

Save time with a ProPhoto template

If you’re not really the DIY type then consider using a pre-made ProPhoto template that includes a stunning coming soon page design.