Splash Pages

6 Clever Splash Page Examples to Use For Your Site

A splash page is one of the most obvious ways to get a website message across to your visitors. But, they only work when done well. What does "done well" look like? This guide shares six splash page examples you can replicate on your website.

You likely have calls-to-action in several high-touch pages of your website: sidebar, the sticky bar, your home page hero, etc. Each is designed to capture a visitor’s email address, drive them towards a sale—or both.  

But sometimes, you need something slightly more obvious to capture a website visitor’s attention. Something that overtakes the whole window and screams "look at me!"

A splash page does precisely that. 

Unsure on where to start? Don’t worry. In this guide, we’ll walk you through what a splash page looks like (and what to include on one), followed by six incredible examples (plus templates) you can draw inspiration from.

What is a splash page?

A splash page is a full-page overlay that appears when a visitor gets to a certain point on your website. They can load immediately, after a few seconds, or when their mouse hovers over the exit button of their browser. 

It’s called a splash page because the overlay appears to "splash" all over the page, muting out text on the page they’re actually viewing. The overlay becomes the front and center—demanding a visitor’s attention and giving them something to do next.

What is a splash page used for?

Because a splash page is so versatile, you can use the same format for any business goal—from diverting people to a specific page, through to showcasing a special offer that prompts a quick purchase. 

Here are some example use cases:

  • Verify a visitor’s age before accessing age-restricted content
  • Divert people to a location sub-site
  • Show booking availability for a product demo 
  • Highlight personalized product recommendations 
  • Nudge people to download a lead magnet (like an ebook) in return for their email address

...the list goes on.

Splash page or overlay popup? 🤔

In practice, there's very little difference between splash pages and overlay popups.

If you want to get technical, perhaps a splash page covers everything in view while the original page can still be seen behind a popup (even if it's darkened or blurred). But generally speaking, both are designed to draw attention by overtaking the entire browsing window.

The best way to create this effect in ConvertFlow is by using an overlay popup.

Just set it to max-width in the CTA's main settings:

Set popup to max-width

Then, toggle the "Expand to Window Height" switch to on in the outer container settings:

Expand container to full window height

You could even run a split test between the two styles to see which one converts best for you:

ConvertFlow splash page vs. popup split test

Either way, the reality is that there are only subtle differences between these two types of call-to-action.

6 splash page examples

Now that we know what splash pages can be used for, you might be questioning how real brands use them. We pulled six of the best splash page examples from around the web to show you what they look like when done well.

1. Gymshark location-based splash page

If you have multiple versions of your site that are personalized for each country you sell in, it’s not uncommon for visitors to enter the wrong URL—like .com instead of .co.uk.

This example from Gymshark shows how to use a splash page to direct people to the correct location sub-site:

Getting people on the right location of your site is crucial.

Suppose you delay the splash page and wait until they’re viewing a product or category page. In that case, potential customers will see different currencies from the one they’re buying in—creating friction and moving them closer to the exit button.

Instead, make sure they’re on the correct version as soon as they land on your home page.

2. Empathy Wine age verification splash page

Here’s a great example from Empathy Wines that shows how splash pages can be used to prevent underage visitors from accessing age-restricted content:

To access its online wine store, people are asked to verify their age. The splash screen takes up the entire page to prevent minors from viewing it before their age is verified.

3. Spreadsheeto segmentation splash page

Not all splash pages have to direct people elsewhere (or make sure they’re eligible to browse your site). You can also use splash pages to collect more information about your users and use that to segment and personalize future messages.

Take this example from Spreadsheeto:

The splash page asks one simple question of its visitors: "How good are you at Excel?" Each of the three options then directs people to a personalized landing page.

It’s also worth noting that this splash page appears as soon as visitors demonstrate an intention to leave the page. It’s a slick way of convincing them to stick around and move towards a personalized product page.

4. Conversion Gods lead capture splash page

Here’s another splash page that appears when showing an intent to leave the page. Conversion Gods’ home page immediately turns into a splash page with the words “Woah there!” stopping users in their tracks before hitting the close button:

What’s interesting about this splash page example, though, is its use of social proof. The ebook offer is much more enticing because people know it contains the techniques used to generate $100 million for other brands like theirs.

5. Zara location-based splash page

Here’s another excellent example that shows how to use splash pages to direct people to the correct version of your website.

Type Zara’s website into your browser, and the first thing you see isn’t their selection of clothes. It’s a splash page that asks for your language and location:

From there, you’re taken to a version of the site that's localized to your region. Getting people shopping in their own currency and language like this right from the beginning can be crucial to bottom-line conversions.

6. The Protein Works discount splash page

Have you ever purchased a product because a discount code was available? If so, you’re in good company. It’s estimated that 88% of consumers use coupon codes when shopping online.

This ecommerce splash page example from The Protein Works shows how to use them effectively:

It offers new customers a £10 off coupon. But there’s a catch: the visitor has to hand over their email address in return for the discount. It’s one of the most effective ways to build your email list and incentivize visitors to purchase.

In truth, this example is probably very much in the overlay popup category—rather than a splash page.

But, it conveys our point above on how close together these two styles can be. Set the popup to max height and width, and you've got the same CTA but without the original page being visible in the background at all.

Splash page templates

The days of having a developer or designer create a custom splash page for your website are long gone. Inside ConvertFlow, you’ll find a template library of popups that you can quickly turn into full-page splash screens.

Simply choose a popup template and customize it with your colors, fonts, and special offers. You'll also be able to control the trigger (exit, time delay, scroll-point, etc.) and set the pages and targeting conditions to use 🙌

You can then either set a specific width with light or dark backdrop (like a traditional popup):

ConvertFlow height and backdrop theme controls

Or, set it to max-width and height to cover the browser window entirely:

Turn an overlay popup into a splash page in ConvertFlow

Here are a few popup templates you can use to get started:

About the author

Elise Dopson

Contributor, ConvertFlow
home icontwitter iconlinkedin icon

Elise is a writer at ConvertFlow, and expert in B2B marketing. She's been featured in publications like ConversionXL, HubSpot, CoSchedule, Content Marketing Institute, Databox, and more. You'll usually find her cooking up some high-quality content for the ConvertFlow blog or campaign library.