Whether you’re launching a brand new website, changing your WordPress theme, or just making a few tweaks behind the scenes, a coming soon page is an important tool in your website toolbox. A coming soon page gives you a place to send people to as you build your new site, and you can even use it to gather emails before you launch. A coming soon page is also a great way to notify your visitors that you’re making site updates, so you can make changes without users seeing your work in progress. In today’s video, I’m going to show you how to create a WordPress coming soon page!A coming soon page is an important tool in your website toolboxClick To Tweet
Video: How to create a WordPress coming soon page
Step 1: Install the SeedProd WordPress coming soon page plugin
I use the SeedProd Coming Soon Pro plugin on all my personal and client sites when I launch new sites or update existing sites. It’s very user-friendly and has a lot of great features. If you’re working under a budget, they also have a free version, which is what I show in the video above. It’s still customizable, but you will need to use CSS to truly customize it to your needs. The Pro version has more features built in that allow you to design a truly unique page without code.
Step 2: Enter your content
You’ll find the settings for your coming soon page under Settings > Coming Soon Page & Maintenance Mode. In the content area, enter a headline and description to let people know what you’re up to. You can also upload your logo if you have one, but it looks fine even if you’re launching something new and don’t have a logo yet.
The description works just like the WordPress editor, and you can even use shortcodes to help you customize further (though you may need to enable third-party plugins under the Advanced options tab). The Pro version easily syncs with a number of email list providers. Though the free version does not, you can still copy form code from your provider and paste it into the description area, just switch to the Text tab in the editor. I recommend adding everything else in your description first, then add the form code last, as switching between the Visual and Text tabs can disable your form.
Step 3: Design your page
Once you’ve saved your content, go to the Design tab to design your page. The free version allows you to add a background image or color and customize the colors and fonts of the coming soon box, though you are limited to a few font options. However, you can add CSS to customize the fonts, which we’ll discuss in later steps. The Pro version is integrated with Google Fonts, and you can also easily add Typekit fonts. It also gives you more options for the background and design of the content box.
Step 4: Customize with CSS
At the bottom of the design tab, there is a section where you can add your own custom CSS. I recommend watching the video above to see the process of customizing with CSS, but I’ll summarize here if you’re reading this and unable to watch the video. Using the Chrome web browser, right click on the element that you want to customize, then choose Inspect Element. This will open up developer tools where you can see the code of the page and what you’ll need to target to change the color, layout, fonts, and more. On the right, you’ll see the CSS that is already applied to each element, and you can copy and paste that CSS into the custom CSS box and alter it to your needs. Learn more about customizing your site with CSS here.
Step 5: Add Google Fonts
The easiest way to customize the fonts on the free version is with Google Fonts. First you’ll need to build a collection at Google Fonts, and it will generate code for you to add to the header of your site. You can add this code in the Advanced tab in the header scripts box. Next, in Google Fonts look for the CSS rules for the font families you selected and add your custom CSS in the Design tab’s CSS box.
Step 6: Enable your coming soon page!
Once you’re ready to put up your coming soon page, go back to the first tab and enable coming soon mode or maintenance mode. If you are launching a brand new site, use coming soon mode. If you’re making changes to an existing site, it’s important to use maintenance mode as this lets Google know that your site is temporarily down for maintenance, not permanently changed to the coming soon page. Once enabled, only logged in users will be able to see your site; anyone else will see the coming soon page no matter which URL they visit. However, the Pro version has a few extra useful features. You can set a preview URL allowing anyone with that URL to bypass the coming soon page, and you can also set your coming soon page as a landing page, making it an easy way to build a subscription page for your site.
When you’re ready to launch your new site or changes, you’ll see a red button in your toolbar for easy access to the coming soon page settings, where you can then disable and save to make your site live.
Good luck launching your next big thing, and be sure to tweet me your coming soon page @elembee!