2021/10/06 13:05:46

How to create a Coming Soon page fast

Alexander Hoogewijs

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.

create coming soon page
create page

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.

create coming soon layout
create layout

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.

create coming soon component
create coming soon component

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.

set full width background
full width background

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.

create content structure
coming soon content structure

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.

create coming soon content
coming soon 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.

Coming Soon style

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.

publish coming soon page
publish the coming soon page

Start building today

Streamline your creative process and keep your team aligned with our collaboration tool.

Design amazing digital experiences
that make people feel happier.

© 2024 SiteManager. All rights reserved.