How To Easily Add a Parallax Effect to Any WordPress Theme

Do you want to add Parallax effect to your WordPress Theme? Parallax effect is a modern website design technique where the foreground content scrolls faster then the background element. This effect adds depth to the background images and makes them feel collective. This article will help you to add a parallax effect to any WordPress theme.

What is a Parallax Effect?

In a website design word parallax is a technique where background images move at different speed slower than the foreground images. The goal is to create an illusion of depth in a 2D environment. You can use parallax effect on landing pages, longform content, or homepage of a business website. This effect is mainly used for adding highlight to different sections on a long page.

There are many premium website themes that come with built-in parallax effect on their homepage. This effect can also be used in most WordPress page builder plugins as well. In the gaming world, the parallax effect has been around since 1980s, but web designers just began to incorporate the effect widely in 2011 using HTML5 and CSS3.

Now, let us see how to easily add a parallax effect to any WordPress theme without any complications.

Method 1: Add Parallax Effect Using a Plugin

This method is easier and suggested for most users. It doesn’t require you to add any code to your WordPress theme

Steps to be followed:

  • Install and activate the Advanced WordPress Backgrounds plugin. For more details read our guide on How To Install a Plugin in WordPress.
  • After the plugin is activated, edit the page or post where you want to add the parallax effect. You will see the new ‘Advanced WordPress Backgrounds’ button in the visual editor.

wpbackground

  • Tap on this button, and a popup menu will show up on your screen where you can change different settings for the background you want to add.
  • Select an image from here as your background type and check the ‘stretch’ option.

awbpopup

  • Next, click on the ‘Select Image’ button to upload or select an image you want to use. Just make sure that you are using a large image neither it will show pixelated.
  • Now, enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. Scroll is the commonly used parallax effect.
  • Click on the Insert button to continue.

A new shortcode will be added inside your WordPress post editor. It will look something like this:

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

 

  • Replace ‘Your content here’ with your own content and then save your page. Visit your website to see it in action.

Method 2: Add Parallax Effect to Your WordPress Theme Using CSS

To use this method you should have understanding of HTML/CSS.

Steps to Add parallax effect using CSS:

  • Visit Media > Add New page to upload the image you want to use for parallax effect to your WordPress media library.
  • After uploading the image, copy the image URL by editing the image in WordPress media library.

copier-lurl-de-limage-sur-WordPress

Advertisement
  • Add the given below HTML code into the page or post where you want to show the parallax effect.
1.<div class=”parallax”>

2.<div class=”parallax-content”>

3.

4.Your content goes here…

5.

6.</div>

7.</div>

 

Add the below given custom CSS code to your WordPress theme.

 1.         .parallax {

Advertisement

2.          background-image: url(“http://example.com/

3.          wp-content/uploads/2017/08/my-background-image.jpg”;

4.          height: 100%;

5.          background-attachment: fixed;

6.          background-position: center;

7.          background-repeat: no-repeat;

8.          background-size: cover;

9.          margin-left:-410px;

10.         margin-right:-410px;

Advertisement

11.         }

12.         .parallax-content {

13.         width:50%;

14.         margin:0 auto;

15.         color:#FFF;

16.         padding-top:50px;

17.         }

  • Replace the background image URL with your own background image.
  • Save your changes and visit your website to see it in action.

exemple-effet-parallaxe-wordpress

Read Also:

Install WordPress Theme 

Best WordPress Themes for crossfit

Advertisement

FINAL THOUGHTS

That’s it. You can now very easily add a parallax effect to any WordPress theme without losing your website. We hope that this article helped you to add a parallax effect to any WordPress theme.

Still unable to add a Parallax effect to any WordPress Themes, you can talk to our WordPress Technical Support Team to get instant help and support. Dial + 1 844 275 0975(Toll-Free). So feel free to contact us as we are always avalaible to help you in resolving your any issue related to WordPress.

Read our Popular Blogs:

 

 



Leave a Reply

Call Now