How to Make The BEST Teaser Page for a New Website

by mmb_dev Comment 1

A teaser page, a coming-soon page, an under construction page–we’ve all seen them before and they all mean the same thing: we’re not ready yet. But a teaser page can mean so much more for your brand.

Yeah sure, you can put together a basic webpage with the words, “Coming Soon” plastered over a white page in Times New Roman font. But what’s the fun in that? More importantly, what’s the purpose of that?

A teaser page serves a higher purpose than just telling your visitors to come back soon. But before I go on, let’s break it all down:

What is a teaser page?

A teaser page lets your visitors know that the full version of your website is in the works. Its purpose is to entice your visitors while you’re working hard behind the curtains to make your dream come to life. Although teaser pages are known to be simple, one-page sites, there’s more to a teaser page than you might think.

Investing in a phenomenal teaser page gives your website the power to collect the best thing since sliced bread: email addresses.

Why is an email address so important? Think about it. What website have you been to lately that didn’t ask for your email? They are the holy grail of online marketing and the sooner you learn that, the more successful your brand will be.

Why should I build a teaser page?

Well, that’s a loaded question. It really comes down to three key reasons: hype, SEO and user experience.

Hype: The power of a launch

You that feeling you get when your favorite clothing brand comes out with a new seasonal collection? I know I do (I’m looking at you, Rachel Parcell 😉 ). What makes you so excited about that launch? Of course, it’s because of that moss green trench coat, right? Not quite.

When you get down to the root of it, what really gets you pumped for that launch is the constant reminders you get every time you visit their website and open your email. And it all starts with a teaser page.

A well-thought-out and all-around fabulous launch creates a sense of excitement + urgency. Are you an author? Center your teaser page around getting email addresses to drive pre-orders. Before you know it, your book has sold more copies than you could’ve imagined – and it hasn’t even launched yet.

But we’re just getting started. An effective teaser page will give you a list of subscribers to your brand before you’ve revealed all the goodies hidden on your full website. You know what that means? You can start emailing your subscribers, building trust, building authenticity, building your tribe.

SEO: What gets the traffic going

Here’s a little SEO secret: it’s better to have something live on your site than nothing at all. What do I mean by that? Well, search engines, like Google, judge your website based on a number of categories – too many to count! However, one of those categories is the age of your website, and a teaser page offers the perfect solution to make Google happy.

By publishing a teaser page and directing traffic to it through social media, your website is climbing up the latter of domain authority. Even if your teaser page isn’t generating the leads you thought it would, simply having it up and running on your site is working in your favor.

Pro Tip: Make your teaser page extra SEO-friendly with these quick tips:

  1. Download Yoast SEO for your website.
  2. Create a meta title and meta description for your teaser page.
  3. Write your teaser page with your keywords in mind. These 3 simple steps will give your teaser page a well-deserved edge over other brands.

UX: Learn what your tribe wants

A teaser page is like a mini website that gives you the control to test what works best for your tribe. Without having to make major changes to multiple pages of your website, just use your teaser page to test out new ideas. I’m going to hit you with some marketing lingo again; we call this A/B testing.

A teaser page is the perfect place for some simple A/B testing. See what your tribe is responding to with just a few simple changes to your site every now and then. Here’s a few tests you can effortlessly perform on your teaser page.

Design Alterations

  1. Change the header font. Maybe your tribe just isn’t responding to the font you’ve originally chosen. Change it up and see if this affects the number of submissions you get on your teaser page.
  2. Change the color of your submit button. Sometimes the color just doesn’t stand out. Try a more contrasting color that draws the visitor’s attention to the submit button.
  3. Move your submission box (CTA). The first place you thought to put your submission box may not be the best. Generally, my marketing agency always places the CTA, or Call to Action, above the fold – meaning the visitor can see the CTA without scrolling down the page.

Copy Alterations

  1. Change the header copy. Your header is the most important text on your page. It’s the first thing your visitors see, so make it an impactful first impression that convinces them to hand over their email address.
  2. Change the CTA text. Sometimes your Call to Action just isn’t converting. Change it up to see if your visitors prefer copy that is more persuasive and direct. Here are a bunch of incredible examples working for major companies.
  3. Change your button text. You might think that I’m being nit-picky but I assure you it makes a world of a difference. Going from “Submit” to “See You in Your Inbox!” gives your brand a personal feel, which builds trust with your tribe.

And before I forget – It’s highly important that you test these changes one at a time. Changing too many variables won’t give you a clear picture of what your tribe is looking for.

How long should a teaser page be live?

Your teaser page can be live as long as you want it to be. It’s totally up to you!

Of course, if you’re still working on your website, sit back, relax, and let the teaser page be the face of your brand for now. When you’ve put the finishing touches on your site, you’re good to take that teaser page down and reveal your final product!

In my experience working with personal brands, I know that launch day can be a toughy. You’re putting yourself out there for the world to see (and judge). You’re defining who you are and not letting others define you. That’s a monumental shift in your life!

If you’re not quite ready for the big game, let your teaser page work its magic until you feel prepared enough to venture into the online world. But always – and I mean always – remember that I’m right here with you. In every blog you write, webpage you publish, and photo you post, I’m here as your resource for the confidence and know-how to get your brand to its next milestone.

How you can build a teaser page right now

Are you ready? We’re about to get real technical here but bear with me. I’m going to walk you through creating a to-die-for teaser page. In my experience creating websites, I prefer to use The Divi Builder as well as WPBakery. I’ll be using The Divi Builder on WordPress for this tutorial, but feel free to use the website design platform that works for you.

Step One: Create a new webpage

The first thing you need to do is log into your website and navigate to the “Pages” section on the left-hand side. Once you’re there, select “Create a New Page”. Name your page, but remember that this is the public name for your page, so make it a good one! Try something simple to start off like, “Coming Soon – (Your Brand’s Name)”.

Step Two: Select ‘Blank Page’

On the right-hand side of the page, navigate to the “Page Attributes” section. Once you’re there, select the “Template” drop-down menu and click on “Blank Page.” This is an extremely important step in creating your teaser page. Without changing your page to “Blank Page,” anyone who visits your site would be able to click your menu and head over to your protected content.

Step Three: Choose visual editing

Located just under the heading portion of the page, click on the purple button labeled “Use The Divi Builder.” Once the Divi Builder is activated, click on the blue button labeled, “Use Visual Builder.” You should be directed to a simulation of the page we’re about to build!

Step Four: Choose a background image, video or color

Your teaser page should have one section that encompasses the entire page. Teaser pages should be simplified and direct visitors only to what they need, much like a landing page!

The most engaging teaser pages create an inspiring visual for their users. You can begin to craft your visual expression through a photo, video, or background color. Since you may not have a video or image handy with you, check out unsplash, pexels, and videvo for royalty free images and videos!

You can add your image, video, or background color by clicking the settings tab of the section.

Step Five: Add a heading

We’re halfway there! Next, add a row to your section that will be used to house your main heading. This heading needs to be big and bold–just like your brand. When you’re creating a heading, use action phrases that excite your visitors and lead them to your contact form/CTA.

Pro tip: Make sure your heading is labeled as an H1 heading. That gives search engines, like Google, a clear notifier that this heading is the most important.

Step Six: Add subtext copy

The subtext, below your main heading, gives users a little more information about what they’re getting into. Netflix gives us the perfect example of the benefits of subtext below the main header.

Notice that the subtext just briefly expands on the main header in a concise sentence that incorporates nearly everything Netflix does.

Step Seven: Add a contact form

Create another row right below your header and subtext. This will be reserved for your contact form. The contact form will be your best bet for collecting those invaluable email addresses. My best advice is to keep it simple: name and email only. However, if your brand needs a little more information, feel free to add more fields for visitors to input their information.

My favorite contact forms to use include Bloom and Contact Form 7. Adding more fields runs the risk of losing email leads half-way through the form, so tread those waters very carefully!

Step Eight: Add copy for your button

Every form needs a button right by its side! Like we touched on earlier, you’ll want to create copy for your button that reflects your purpose and your brand’s voice. Here are some examples of buttons that pair well with your goal:

  • Goal: Email subscription; Button text: Sign Me Up!
  • Goal: Download Ebook; Button text: Start Reading
  • Goal: Sign up for a webinar; Button text: Save My Spot!
  • Goal: Reserve a product; Button text: Get My (Product)

Step Nine: Put the ribbon on top

By now, most of your teaser page has come together. Anything missing? Can you make it even better?

Before you publish your teaser page, go through an intense quality assurance process. That means reading, re-reading, and re-reading again.

Pro Tip: Ever heard of Grammarly? Grammarly is your high school English teacher’s best friend. In just a few seconds, Grammarly scans your copy, identifies spelling and grammar mistakes, and suggests the best way to remedy the issue.

After you’ve made sure your copy is in check, onto the design portion! Test out your page on both desktop and mobile. When Google first sees your new page, it will first test it in a mobile browser, so make sure everything is mobile-compatible.

Step Ten: Evaluate and reconsider

You’re done right?? Not exactly. With anything on your website, there’s always room for improvement. Launch your teaser page and direct some traffic to it by posting about your new site ~ coming soon ~ on social media. Now’s the time to let your tribe know exactly what to expect out of your new site.

If you’re having trouble coming up with a concise way to communicate to your tribe about your new site, take a look at this sample:

“Hey Fam! I’m in the process of making my very own website – chock-full of (the purpose for your site) for (your target audience). Sign up on my site to get (your call to action/offer). Check back soon for more where that came from at”

How’d it go for you?

Wow! I hope that was a lot of useful information to help your brand on its way to the mountaintops of success. A teaser page is the first step to creating a beautiful new website. How do I know? I was literally right where you are in your branding journey just a few months ago! Take a look at my first ever teaser page, and see what MyModernBrand has evolved into now!


That’s all from me for now, friends!

I’ll catch you on the social scene! @themadernmami


Spread the love
mmb_devHow to Make The BEST Teaser Page for a New Website
Subscribe to Veronica's weekly letter "From V to You" so you can grow your business and personal brand as she shares what's working for her behind-the-scenes.