Using the Parallax Effect on Your WordPress Website

Over time, even the most stylish website can start to feel a little stale. The ideal balance is to keep things interesting visually, without avoiding a complete redesign. 

Using a parallax effect can add a lot to your website’s aesthetics. It can help your visual elements to stand out while also breaking up your text-based content. You may even notice that visitors stay on your site a bit longer due to increased engagement.

In this guide, we’ll talk about what the parallax effect is and some things to keep in mind when adding it to your site. Then we’ll walk you through how to add this modern feature with or without using a plugin. Let’s go!

What is the Parallax Effect?

The parallax effect, or parallax scrolling, is when the background moves slower than the foreground’s content as a user scrolls through a web page. This contrast in speed creates an illusion of depth and movement. 

Web designers often use this visual effect on different sections of their site, including home pages, landing pages, or any place where there are sections that could be broken up. It can be especially beneficial on one-page websites, as the novelty can encourage users to keep scrolling through the related content.

Considerations When Adding Parallax Effects

The parallax scrolling effect can add a lot to your WordPress site, but when done incorrectly, it can take away from User Experience (UX). Accessibility can undoubtedly be impacted by this feature, as it can make reading difficult.

When creating a parallax effect, you’ll want to choose your background image carefully. Of course, you’ll want high-quality images, but you don’t want to use anything too distracting.

Select Parallax WordPress Themes

One way to get this trendy visual effect is to select a WordPress theme that comes with a parallax feature. There are a variety of accessible themes available that will enable you to add parallax scrolling quickly and easily:

• Create: This theme includes several templates that incorporate a beautiful parallax effect. It’s also a sound choice for building an eCommerce site.
• Divi: Divi is a popular WordPress theme and page builder. This theme has plenty of niche demos with built-in parallax scrolling if you’d prefer to import demo content.
• Stockholm: Stockholm is a flexible theme that comes bundled with a selection of premium plugins. You may want to have a look at this theme if you’re building an online portfolio, as its simplicity keeps the focus on your content. 

Of course, there are many more themes to choose from. However, these provide plenty to begin with, and also offer power in other areas too.

How to Add the Parallax Effect to Your WordPress Site (With and Without a Plugin)

Even if your theme doesn’t have built-in parallax, you can still add it to your site yourself. We’ll show you how to do this with or without a plugin and break down both methods’ steps.

Using WordPress Parallax Plugins

Using a plugin to add parallax scrolling is pretty straightforward. You’ll install a plugin, configure your settings, and you’re all set. Let’s run through these steps in more detail.

1. Download a Parallax Plugin

There are a few plugins that can add parallax scrolling, but we recommend using Advanced WordPress Backgrounds (AWB). This is a free WordPress parallax plugin that enables you to use images or video for your backgrounds:

To download the plugin, navigate to Plugins > Add New and search for ‘Advanced WordPress Backgrounds’ as you would for any other.

Once it’s activated, you can move onto actually creating your parallax background.

2. Select An Image

Here, navigate to the post or page where you’d like the parallax effect to appear. AWB has its own Block, which you’ll use to select your image and position the animated effect on the page:

In the Block menu, select the image or video you’d like to use as your background from the Media Library. You can also use a solid color as a background if an image isn’t appropriate for the application.

3. Enable Parallax and Select Parallax Type

While you’re in the Block menu, you’ll find options for the visual effect’s behavior:

Here, you’re able to choose to have the background image’s scale and opacity change as the user scrolls, rather than a more traditional parallax effect. This gives you greater control over how the effect displays on your website.

Finally, you can elect to toggle the parallax option off for mobile devices, which tend to rely on swiping rather than scrolling for navigation (not to mention a potential affect to page load speeds).

4. Toggle the ‘Mouse Parallax’ Feature

Toggling on mouse parallax will add an effect that can be controlled by moving the mouse, rather than scrolling. As with other versions of this effect, you can adjust the size and speed, which determine the duration and intensity of the effect:

If you have a one-page website, you may want to take advantage of this feature. Mouse parallax can create some fascinating visual effects with a little experimentation. 

Adding Parallax to WordPress Using CSS

If you’d rather not use a plugin, you can add parallax using CSS. You’ll upload your background image, then add a bit of code to your site. Here’s how to get the job done!

1. Upload Image to Your WordPress Media Library

From the WordPress dashboard, click on Media > Add New. This will bring you to the Upload New Media page:

Click on the Select Files button and find the image you’d like to use for your background on your computer. Next, click Open and wait for the upload to complete.

Once you’ve uploaded your image, locate it in the media library by navigating to Media > Library from the WordPress dashboard. Once you’ve found your image, click on it and find the File URL in the window that opens:

Click on the Copy URL button to copy the link. Next, we’ll add some code to your site.

2. Add HTML into Page/Post

Next, you’ll add the following HTML into the page or post where you want the parallax effect to appear. If you’re using the Block Editor, you can add this code using a Custom HTML block. However this could also be placed in the Text Editor for Classic Editor users:

<div class="parallax">

<div class="parallax-content">

Your content here

</div>

</div>

You’ll want to replace the “Your content here” placeholder text with whatever content you’d like and save your work.

However, you won’t see much on the front end yet as we still have one more step – adding Cascading StyleSheets (CSS) code to your theme.

3. Add CSS to Your Theme

Finally, you’ll add some custom CSS to your theme using either the Theme Editor or the built-in CSS editor – it won’t matter which option you choose.

Add the following CSS to your theme, replacing the background image URL with the one you copied earlier:

.parallax { 

background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");

height: 100%;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

margin-left:-410px;

margin-right:-410px;

}

.parallax-content {

width:50%;

margin:0 auto;

color:#FFF;

padding-top:50px;

}

Make sure you save your changes, then check the front end. You should now be able to see your parallax effect in action – all without plugins!

Customize Your Site With WP Engine

Using a parallax effect is an effective way of engaging your users. Whether you use it to break up the copy on a sales page or to make your one-page website into an immersive experience, parallax is a trend that may be worth your time.

In this post, we went over what the parallax effect is and some things to think about before including it on your site. Then we showed you a few ways to implement the scrolling effect on your WordPress website.

WP Engine is all about enabling you to delight your customers. Check out WP Engine’s managed WordPress hosting Plans, which can help you create memorable experiences for your website visitors.