How to Add a Parallax Effect to Any WordPress Theme

Parallax Effect—a web design trend where a background image scrolls slower than foreground content and helps in making your website unique than other websites. The effect adds depth to the background images and makes them feel more interactive. You can add a parallax effect on landing pages, long-form content, sales pages, or homepage of a business website. It is a great and unique way to highlight different sections on a lengthy page and the good news is you can add a parallax effect to any WordPress theme.

Not all themes have a built-in parallax effect, and you may not want to use a page builder to create custom page layouts just to get the parallax effect.

Having said that, let us show you how to easily add a parallax effect to any WordPress theme without any complications.

Add a Parallax Effect to Any WordPress Theme using Plugin

Using a plugin to add a parallax effect to any WordPress theme doesn’t require you to add any code to your WordPress theme. It is easier and beginners are suggested to use this method.

First of all, you need to install and activate the plugin—Advanced WordPress Backgrounds. After activating the plugin, you need to edit the page or post where you want to add a parallax effect. You will be able to see a new “Advanced WordPress Backgrounds” button on your WordPress dashboard.

Advanced WordPress Background button. Image Source: WP Beginner

You need to click on the new Advanced WordPress Backgrounds button and it will bring up a popup where you can change different settings for the background you want to add.

Firstly, select an image as your background type and then check the stretch option.

Stretch option. Image Source: WP Beginner

Now, click on the “Select Image” button to upload or select an image you want to use. You need to ensure that you are using a large image, or else it will appear pixelated. After that, you need to enable Parallax by choosing a parallax type. There are a number of styles available for you to experiment with. The most used parallax effect is the scroll.

Click on the Insert button to continue. The plugin will now add a shortcode inside your WordPress post editor. It will look something like this:

[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]

You need to replace Your content here with your own content and then save your page.

You can now visit your website to see it in action.

Preview of your website. Image Source: WP Beginner

Now, let’s look at how to easily add a parallax effect with CSS.

Add a Parallax Effect to Any WordPress Theme with CSS

This method requires you to have a fair knowledge of HTML/CSS as well as how WordPress themes work.

Firstly, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting Media > Add New page. After you’ve uploaded the image, you need to copy the image URL by editing the image in WordPress media library.

copy the image URL. Image Source: WP Beginner

Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or child theme.

 <div class="parallax">
 <div class="parallax-content">

 Your content goes here...

 </div>
 </div> 

Now, you need to add the following custom CSS to your WordPress theme.

.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;
} 
Remember to replace the background image URL with your own background image. You can now save your changes and visit your website to see the parallax effect in action.
Add Parallax Effect to Any WordPress Theme with CSS. Image Source: WP Beginner

Note that you might need to adjust CSS to work with your site’s layout.

That is it. You can now easily add a parallax effect to any WordPress theme without breaking your website. Have anything to say? Let us know through the comments.

 

Reference: WP Beginner 

1 thought on “How to Add a Parallax Effect to Any WordPress Theme”

Leave a Reply

Your email address will not be published. Required fields are marked *