Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How To Add A Parallax Effect To Any WordPress Theme

91 / 100

WordPress beats most website builders when it comes to themes. It has themes for all kinds of content. But how cool would it be to add a parallax effect to the theme? Pretty impressive, right. When the background items move slower than the front ones is what is known as the parallax effect. Before moving to the methods, let us look at where and when you should use the following effect.    

how to add parallax effect in wordpress

What is a Parallax effect?

Parallax is a technique that can be used to make your WordPress themes more exciting and interactive. The background pictures move in a way that adds meaning to it and doesn’t let the foreground content go unnoticed.

Parallax effect can alleviate UX of a WordPress site and decrease bounce rate too. Check out how to add Parallax to your WP website here. Click To Tweet

It can be used in creating homepages of various websites, mainly company sites, and sales pages. This effect can organize the section on the pages where you have to fit a lot of information. Different WordPress themes come with the parallax theme and can be used in page builder plugins.                                   

You might not find it in the non-premium themes and would not be comfortable using the page builders. Therefore here are the three methods that will work great for those who do not have the premium versions. 

img 5fa103dfdc4ad

The two best methods to install the parallax effect on WordPress.

Method 1: Inserting the parallax effect through CSS

This method works great for those who understand HTML well and know how WordPress themes are added. 

The first step is to select and add the picture you want for the parallax effect. Then go t0 WordPress media library from the Media and then click on Add New Page. 

Once the image is up there, copy the URL of that image by selecting the WordPress media library’s editing option.                                                    

Then add the HTML on the page and insert it wherever you need the effect to be shown, or you can directly add the HTML in WordPress theme or child theme.

Your content goes here…

CSS stylesheet editor in WordPress

The next step is to add the custom CSS given below to your WordPress site.

.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;
}

You are almost there. Now exchange the background URL with the background image of your choice and save the changes. The layout can be adjusted according to the needs of your CSS.                                       

Now open your website and see the magic. 

Method 2: Inserting the Parallax effect to WordPress via Plugin

This easy to use method does not use any code to get started. First,  install the Advanced WordPress backgrounds and set up the plugin.   

Advanced WOrdPress Backgrounds plugin

You can do it by clicking on plugins and then add plugins in the plugin directory. Once you open the page, click on search plugins, type the one you are looking for and then download it.

The next step is to edit the content page where you are supposed to add the parallax effect.

add parallax to WordPress website

You will get the new “Advanced WordPress Backgrounds” icon button under the visual editor’s heading. 

Select the same, and then you will be able to change the settings in the background you chose for the effect. For that, select a picture you want as your background, then select the stretch option. 

The next step is to select the picture and upload it. 

Use the image that fits in the background size-wise, or else it will look blurry. Once you are through with all the above steps, you can enable the parallax from the option of parallax type. You will get various options to choose from. The style, colors, etc. will be different in all the effects. 

edit AWB shortcode

Choose the style you want and click on the insert button. 

Next, a code will be added to your WordPress editor through your plugin, just like the one given below:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]
Your Content Here
[/nk_awb]

And you are done. Now go back to your website and check out the effect.                  

Accessibility of a Parallax effect

Parallax is compatible with a lot of devices but mobiles. Parallax is a motion-based effect, and the visuals might not be as clear on the phones. The main reason for the same is that it works on the swipe navigation, and parallax does not support it.

Scroll navigation works excellent for effect, as it is smooth, and the results do not jitter on the screen. Of course, all of it also depends upon the style you choose from the parallax section. 

If you like our article, then also check out:

How to make an Educational WordPress website from Scratch – The Ultimate Guide (2020)

A Beginner’s guide for choosing a WordPress Hosting Service (2020)

Conclusion

Here we come to the end of our article. Parallax is a great addition to WordPress, and you need to have the built-in feature to use it. We discussed two methods above, and both of them are highly effective. Adding the effect to your website can make it an interesting one and make sure that not a lot of clutter is created on your screen.

It organizes the information correctly and makes it appealing to the audience. Parallax is worth adding to your WordPress themes and makes it more beautiful. If you found this article helpful, let us know in the comments section below. 

And make sure you follow WP Uber for the latest updates on themes and plugins.

WP Uber is a WordPress management agency that provides detailed site health reports and customized security solutions for WordPress sites.

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!