6 Clever Splash Page Examples to Use For Your Site

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:

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

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

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

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:

See full page

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:

See full page

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:

See full page

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:

See full page

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:

See full page

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:

See full page

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.

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):

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

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