Overview![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
In this guide, we will go through the steps to create a captivating coming soon page using PageFly. By following along, you’ll end up with a visually attractive landing page that generates excitement for your upcoming product or website launch.
A well-designed coming soon page is a powerful tool for any entrepreneur as it allows them to snag potential customers’ attention and engage them before the official opening. This guide is perfect for anyone who wants to create a buzz around their upcoming site and start building an audience early on.
In this article
- Requirement
- How to create a coming soon page with PageFly
- Tips and best practice
- Frequently asked question
Requirement![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
The primary requirement is really the content and any visual assets you want to include on your page. This could involve text about your upcoming launch, images or videos that represent your brand, and perhaps a signup form to capture email leads.
How To Create A Coming Soon Page With PageFly![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Build your coming soon page with PageFly is just a breeze with the following clear and digestible steps below.
And if you are a visual learner, we’ve covered you with this helpful video on creating a password/coming soon page with PageFly.
1. Create A Password Page![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
On PageFly’s Dashboard, to create a Coming Soon Page, head to Apps > Select PageFly Page Builder > Select Pages > Select Create blank page at the top right corner > Click on Password
And if you don’t want to start building a page from scratch, switch on the Add section or select a page template to use PageFly pre-made templates for your password page.
2. Upload An Image![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
2.1. Add Section On The Page Canvas![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Click on Add element > Select Layout element > Drag & drop the one-column layout. into the page editor.
2.2. Add A Background Image![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
2.2.1. Choose An Image![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
In the Styling tab, scroll down to the BACKGROUND parameter > Choose an image from Background image option > Select image
You can upload the image which is available in the Image Manager or upload it from the Internet.
2.2.2. Style The Image![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
In the Styling tab, head to SPACING parameter > Padding
- Edit the top-padding and bottom-padding value to change the height of the section to fit your image’s height.
- The little box in the middle will set the same value for all four sides of Padding and Margin. In this case, we set 300px for both Padding top and bottom.
2.2.3. More Settings![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Scroll down to the BACKGROUND parameter, and click on the More Settings button.
In this case, we choose:
- Center Center for Background Position
- Cover for Background Size
3. Add Store Information![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
3.1 Add Heading![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
3.1.1. Choose The Heading![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
On the left sidebar of the Editor, click on the Add element > Choose the Heading element > Drag and drop the first variant into the Editor.
3.1.2. Add Text To The Heading![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
From the In the General tab, add text
3.1.3. Style The Headings![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Head to the Styling tab, in Content color, you can choose from the 8 default colors or customize it on your own
- On SPACING, set the margin-top to 0px and the margin-bottom to 20px to create some space between the header and the paragraph below it.
- Scroll down to the TYPOGRAPHY parameter > choose the font family
- Choose to align center in the Text Alignment option.
- Click on More Settings
For example, we choose Font Family 2 for the Font Family and set up 40px for the Font Size. Set the Regular for the Font Weight and the 40px for the Line Height.
3.2 Add A Paragraph![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
3.2.1. Choose The Paragraph![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
1. Click the Add element icon > Choose the Paragraph element > Drag and drop the first variant into the page editor.
- In the General tab, add more details about the estimated release time or undercover the reason behind a delayed launch.
3.2.2. Style The Paragraph![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Go to Styling tab
In Content color, you can choose from the 8 default colors or customize it on your own.
- On SPACING, set the margin-top to 0px and the margin-bottom to 40px to create some space between the header and the paragraph below it.
- Scroll down to the TYPOGRAPHY parameter > choose the font family
- Choose to align center in the Text Alignment option.
- Click on More Settings
For example, we choose Font Family 2 for the Font Family and set up 20px for the Font Size. Set the Regular for the Font Weight and the 40px for the Line Height.
4. Create A Customer Form![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
4.1. Choose A Form![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
On the left sidebar of the Editor, click on Add Shopify element > Choose the Customer Form element > Drag & drop the first variant into the page editor.
4.2. Style That Form![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Go to Styling > Adjust the padding left and right. For example, we set 250px for both padding left and right.
4.3. Adjust Custom Form Field![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Click on the Custom Form Field > In the General tab, adjust the text in the field.
Click on the Custom Form Button
- In the General tab, there are three button types for you to choose from, which are Text Only, Text With Icon, Icon Only.
- Add text for the button
- Enable Full Width: Click on Yes if you want to enable full width of the button. If not, select No.
4.5. Style The Form![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Switch to Styling tab
- Content color: customize the text color based on the configured color of the Global Style or set it up for your own.
- Typography: customize the font, font size, text element, etc
- Border: adjust the button border
Normal state: add Hover/ Active state that helps the button look more attractive
You can find more about styling for a Customer form button here.
5. Save And Publish![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
After finishing editing your page, check once again the entire page.
If you don’t want to publish, click on the Save button and see it in the Preview mode.
After the page is done, click on the Save & Publish button to see the page in the live view.
You can see the Preview as below:
Tips And Best Practice![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Use high-quality visuals and a clear headline to grab visitor interest
- Motivate visitors to sign up with a strong call to action
- Ensure your design looks great and functions flawlessly on all devices
- Include a countdown timer and engaging text about your upcoming launch
Frequently Asked Questions![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
What Is A Coming Soon Page?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
A Coming Soon Page is a hint to let your customers know that sellers are preparing to release something, for example, a new product or launching a new brand.
What Should A Coming Soon Page Include?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Logo, Simple Sentences, a beautiful image and a contact-us form.
Great Coming Soon Message Examples?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
‘New Product is coming soon. We are working hard on the full version, and will be back shortly.’ or ‘Stay tuned. We are launching soon. Something awesome is coming. Be first to know’