WPKube

How to Use a Parallax WordPress Theme Effectively

I’m on the fence with this headline.

Actually, the story I really want to tell you is how not to look stupid when using a parallax theme on a WordPress site.

“What?! How come?!” – you might ask.

After all, parallax themes are the hottest thing on the market right now. So how is it even possible to look stupid when using such a theme?

Well, despite all the advantages that good parallax WordPress themes give us, it’s still easy to make some common mistakes when working with them, and end up looking quite silly as a result of it.

So in this post, we’re going through those mistakes and sort out the misconceptions around parallax WordPress themes. More specifically, you will learn:

But first, let’s cover the basics just to make sure everyone’s on the same page:

What’s parallax anyway?

In case you’re not entirely familiar with the concept, here’s a cool origin story (courtesy of Unleashed Technologies):

The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay.

Fast forward 20 years or so, and this concept has been adopted by web designers to create the same illusions of depth … on websites.

In simple terms, a well-implemented parallax effect makes it look like there’s another layer in the background that’s much further away from the visitor’s – the person’s looking at the screen – position.

Need an example? Check out the live demo of one of our free WordPress themes (I’m actually going to use this theme as an example when presenting different concepts in this post).

(Of course, the screenshot alone doesn’t quite showcase the parallax’s main trait.)

What’s parallax useful for?

Mainly, is it just eye candy?

Some could argue that it is, but let’s not miss one huge benefit that using this type of design brings us.

This benefit is that it gives additional focus to the elements that are in the foreground.

Consider this quick gif example. It presents a simple scrolling experiment:

Looking at the page, the visitor – in this case, you – expects certain behavior from the page itself. For instance, as they scroll down, they expect the page to shift along predictably revealing new blocks of content one by one. However, once they stumble upon a parallax block, they get the impression that the background remains still despite the scrolling.

This gets their attention. And the element that gets the attention in particular is what’s in the foreground. It’s the only element that’s different on the page, hence it must be important.

This makes parallax elements potentially effective at presenting calls to action or other elements that play an important role for the page’s conversion and business goals.

How to use parallax WordPress themes – the shortcuts

As great as they are, and as much as we’d like it to be true (considering our own parallax theme), such themes are not perfect for all websites, and sometimes you’re better off just going with a traditional blog-like theme.

However, if what you’re building is a business site, or a business blog with a custom homepage then parallax themes can indeed take things from good to great.

There’s probably a lot that could be said here regarding different strategies and possibilities, but let’s put all of those aside and focus on just the simple approaches – some parallax shortcuts, in you will.

Parallax blocks can be used very effectively for two purposes:

Let’s start with the former:

Branding with parallax themes

One of the main challenges on the early stages of site building is how to make the site stand out from the crowd and convey a unique brand across the marketplace.

Back in the day, the logo and the header took care of this task, with the rest of the page having much less impact.

A more modern approach calls for hero images near the header, subscription forms, and various types of backgrounds. Parallax effects are perhaps the next iteration of that.

Quite simply, they allow you to pick whatever a quality image for your background and make it a central element that sets the site apart from the competition.

See these quick comparisons, done with the same theme:

Additionally, the side benefit you get is that parallax also helps you overcome one of the biggest issues with popular WordPress themes. What’s that? Well, once a theme gets popular and is used on a large number of sites, many of those sites look very much alike. Hence, losing their unique branding. With parallax themes, the sole presence of a big image in the parallax background makes this a non-issue.

Calls to action with parallax themes

The other thing parallax WordPress themes are great at is presenting a call to action.

Like I mentioned a couple of paragraphs above, parallax blocks do an exceptional job at grabbing the visitor’s attention.

But again, your background plays a huge role here.

First of all, it should be a detailed enough background to make the parallax effect visible. In an extreme scenario, if you were to use a solid color background then it wouldn’t appear as if it was moving when scrolling. So you need details.

That being said, you can’t have too much detail, otherwise the background will start getting attention instead of the foreground. (This issue and more we’ll cover in the next section in this guide.)

The shortcut is to pick an image that’s in opposition to what’s displayed in the foreground. For example, using bright foreground elements? Get them on top of a dark background, and vice versa.

See this example:

Okay, with the how-to out of the way, it’s about time to get to the top mistakes made when building sites with parallax themes:

[Mistake] Using the wrong image in the background

This is by far the most serious mistake. With the wrong image in the background, you not only miss out on the aforementioned benefits that parallax brings you, but you’re also making the content on the page not easily readable.

Here are the individual problems with images on parallax themes:

Using a background that’s not high-quality enough

Let’s take the obvious out of the way. These days, whatever image you use in the background has to be of high quality.

First of all, it needs to be Full HD (at least), which means 1920 pixels wide (the height depends on the theme you’re using).

Then, it also can’t be pixelated or have any other visual flaws that are clearly visible to the naked eye.

Lastly, the aspect ratio of the image can’t be distorted.

Using a solid-color background

As I said before, using a solid-color background renders the whole parallax effect not visible. You need detail to make the effect happen.

Using obvious stock images

The point of a parallax section is to make your website unique and stand out from the crowd – to make it specific to your brand.

Stock images don’t help with that. Instead, they make your site look plain, and boring.

How to fix this? Use your own images. Or use stock images that no one else uses.

Using people’s faces

A person’s face is the biggest attention grabber of them all. However, it grabs attention onto itself, so the visitor doesn’t look at the foreground much.

Avoid people’s faces when picking your background image. And especially if they’re looking directly at the camera.

Using images with too much detail

Your foreground will be fairly detailed by itself – considering the text you’ll place there, maybe a button, etc. So if your background is detailed as well, you’ll make the whole block unreadable.

The solution is to use background images that are only a little detailed.

[Mistake] Not putting focus on the parts that matter

If you’re dealing with a page that needs to present a call to action then using parallax for anything other than that call to action element is a waste.

Simply, parallax is highly visible, so if it’s used for something else other than the call to action, it will overpower the call to action and lower your conversion rates.

How to fix this? Use parallax for calls to action only, not for other eye-candy elements.

[Mistake] Not minding mobile viewing

These days, most modern WordPress theme designs are responsive. In simple terms, this means that they scale automatically as the browser window changes size. A great feature, that’s for sure.

But it also introduces some issues for parallax blocks.

Mainly, if you’re using an image that’s simple in its center part – the part beneath the foreground – but detailed on the sides, then as this image scales, your foreground can lose its readability.

To avoid this, you need to test how your parallax block behaves on different screen sizes and make sure that it looks okay on all of them.

Conclusion

Overall, parallax WordPress themes are a great new trend. They introduce a unique branding and conversion optimization opportunities that were not available just a couple of years ago.

That being said, building a quality website using parallax effects requires some trial and error, mainly in the background selection department. I hope this guide will help you get through all of that in a jiffy!

Oh, and don’t forget to check out our newest parallax theme – the one I used for demonstration here. It’s called Parallax One and it’s a fully fledged theme. It has all the functionality you’d expect from a premium theme, but … we’re making it available for FREE.

No strings attached. Here’s the link again.