How to create a Coming Soon page fast

Coming soon pages notify your audience that you are redesigning your current website or you are about to launch a new online identity. They are especially helpful for product releases for which you want to collect new beta sign-ups.

Creating a coming soon page in SiteManager is very easy. Below we highlight the steps to go through.

Step 1: Create a coming soon page

Let’s start with creating a coming soon page and putting this page as first in the page order. In the example below we don’t focus on optimizing the SEO settings of the page, but we recommend that you do enter a meta title and description.

Step 2: Create a coming soon layout

After the page has been added to the project, we create a coming soon layout and link it to the coming soon page. We want this layout to be blank, so it doesn’t have a header (f.e. navigation bar) or footer structure.

Step 3: Create a full width coming soon component

3.1. Create a component from scratch

After the page and layout has been created, we can create a coming soon component. This component will be used to fill the entire coming soon page.

3.2. Create a full width background

We want the entire page to be filled with a background image.

First, we upload a design image. We’ll use this image as the background of our new component.

Next, we’ll edit the dimensions of the banner. Coming soon pages often don’t have a scroll so the component needs to cover the entire screen. We’ll set the view height to 100.

3.3. Create a Coming Soon structure

We change the layout setting to horizontal flex and start adding elements to the component.

Because we want our elements to be grouped together, we add a content structure first. In this structure we want the elements to be stacked on top of each other. That’s the reason why we change the layout to a vertical flex.

After adding the elements to the content structure, we can arrange them to set the right order.

3.4. Create your Coming Soon content

SiteManager automatically creates CMS fields. This way, you don’t have to leave the design engine to fill in your content.

3.5. Style the Coming Soon component

The only thing that we still need to do is polishing the design of our coming soon page. Below you can see how we give the content structure some top margin spacing and how we adjust the title and text color from global stylesheet color setting.

Step 4: Publish the Coming Soon page

Once the styling is set, save & exit the design engine. Publish the page and visit your coming soon page.