Splash Pages: A Quick & Easy Guide

Nowadays, it’s not enough to reel in visitors to your site, you also need to ‘wow’ them as soon as they hit your home page. After all, there are likely thousands of other sites offering similar services or content to yours, so why should they take notice?

Splash pages are an elegant solution to this problem. They can act as calling cards, or even help you increase conversions if used properly. In this article, we’ll explore the concept of splash pages in modern web design. Next, we’ll introduce you to some examples of different splash pages, before teaching you how to replicate them using Divi.

Let’s dig in!

What a Splash Page Is

Simply put, a splash page is a section of your site that visitors see before entering the main version. They’re usually heavy on the visuals, possibly with a Call To Action (CTA), and act as a conduit to the rest of the site. Here’s an example of a modern-looking splash page, courtesy of L’Avenir Dental Clinic:

While splash page usage has declined somewhat (partially due to User Experience (UX) concerns), they do offer some great benefits such as:

1. Drawing the attention of your visitors to a particular message or design element.
2. Enabling you to communicate critical information to your viewers.
3. Providing an opportunity to increase your conversions by presenting them with prompts to subscribe, or similar.

Although their prominence has waned, the concept of a splash page has evolved to incorporate full-screen headers these days, as they can provide many of the same benefits as standalone splash pages.

That being said, traditional splash pages are still viable for some applications such as:

1. Creating a beautiful visual prelude to the rest of your site.
2. Posting legal disclaimers for websites that require them (think adult content or gambling).
3. Choosing your preferred language.
4. Sharing important news with your visitors (although we don’t encourage this route unless it’s truly important).
5. Prompting users to subscribe to a mailing list, thus driving conversions (be aware of the UX considerations though).
6. Offering premium membership access to your membership site or course by setting up a paywall using a plugin.

With that out of the way, let’s explore some outstanding examples together, and find out what sets them apart from the rest.

6 Examples of Awesome Splash Pages

For this section, we’ll focus on splash pages with exceptional design, outstanding usability, or both. As we alluded to, many splash pages are presented as full-screen headers. Let’s kick things off with an example to highlight this modern take on splash pages.

1. CoLofts

The CoLofts website showcases a full-screen header with a muted background that highlights its logo. For all intents and purposes, this header acts as a splash page. It’s there for purely aesthetic reasons, and the only navigational function it includes leads further down to the rest of the page.

2. Make It Perfect

Our next example – Make It Perfect – showcases a retro trend in splash pages. It includes a loading bar, which feature rarely on modern websites these days, and with good cause. Average internet speeds have gotten faster and our patience worn thinner with long loading times. Ideally, this site wouldn’t need it, but the loading bar is still an attractive take from a bygone era.

3. Ape Unit

This splash page (courtesy of Ape Unit) offers a good mix of usability and design. In fact, you could say the entire main page is a succession of splash pages leading to various case studies. If you’re a design professional, take note – this is one of the most unique portfolios we’ve run into lately.

However, it’s not without its drawbacks – a lot of people could potentially be more comfortable using a traditional navigation system. In our opinion, merely adding a hamburger menu would improve the site’s usability.

4. Labcase

Labcase is one of the rare websites that do animated splash pages properly. Firstly, you’re greeted with the site logo, then you’re shown a very concise summary of what the product is, before moving onto the rest of the site.

On paper, this doesn’t sound like the best of designs, but it works. Everything – from the minimalist logo, to the fonts they use, and the timing of their animation – hits the spot. Animated splash pages don’t offer any benefits from a usability standpoint, but if done right, they can look great.

5. Harbr Co.

In other cases, such as Harbr Co., designers have opted to take the concept of animated splash screens one step further by using background videos. When put together with full-screen headers, background videos make for very attractive splash pages. The biggest downside to this technique is that you may drastically increase your loading times if your videos aren’t optimized.

6. friiio

As far as we’re concerned, the best modern splash pages need to offer a good mix of usability and design. Due to this, we’re big fans of websites that take the concept of splash pages, and mix them with traditional navigational methods such as calls to action and links to other sections of your site – much like friiio.

We’ll admit, the above example isn’t a traditional example of a splash page. However, that’s not necessarily a bad thing. It’s clearly inspired by the splash pages of old, but adjusted to include modern web design trends. Consider this type of hybrid design for your next project if you enjoy the aesthetic of splash pages, but are also a big fan of keeping things usable.

How to Build a Splash Page Using Divi

Divi includes a predefined Splash Page layout, which can save you some time when creating one. To load it, create a new post in your WordPress dashboard, then enable the Divi Builder. Next, click on Load From Library:

From here, choose the Splash Page layout by clicking on Load:

The Divi Splash Page layout consists of a Divi Blurb module – which uses the Divi logo by default – and three separate Text modules. There’s also a CTA at the bottom (which should lead to your home page) and two dividers, which we can ignore for now:

When seen live, it should look like this:

All it takes is a few minor changes to make it your own (using the options with the module’s settings). It’s the perfect way to deliver relevant information before the home page:

On the other hand, if you’re fond of a more modern-looking splash page, simply create a Fullwidth Section using the Divi Builder, and add a Fullwidth Header module:

The Fullwidth Header module includes settings to make it full screen, add a scroll down button, and an overlying logo – all of the elements you need to create a modern splash page:

Conclusion

Splash page usage has lessened in recent years, and they’re definitely not a perfect fit for every website. Despite that, web designers have managed to turn the concept on its head, reimagining the splash page’s role in modern web design.

How you choose to implement your splash page is up to you, but if you’re using Divi, take note of the following steps:

1. Check out the predefined Splash Page layout that ships with Divi, and tweak its settings to perfection.
2. Alternatively, use the Fullwidth Header module, turning on the Fullscreen and Scroll Down button options, then adding a logo.

How important are splash pages for your website? Subscribe and share your thoughts with us in the comments section below!

Article thumbnail image by RedlineVector / shutterstock.com.