Recently one of our readers asked us how to add parallax effect to any WordPress theme?

The Parallax effect is a popular trend these days on the web where a background image scrolls more slowly than foreground content.

In this tutorial, we will show you how to easily add parallax effect to any WordPress theme.

But, if you've never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

But back to why we are here.

How to add parallax effect to any wordpress theme e1567702269161

What is a parallax effect?

The Parallax Effect is a modern web design technique where the background element scrolls more slowly than the foreground content. This effect adds depth to the background images and makes them interactive.

Discover our 25 WordPress themes with parallax to create a website

The Parallax effect can be used on landing pages, sales pages, or the home page of a business website. It's a great way to highlight different sections on a long page.

Many premium WordPress themes have a built-in parallax effect on their homepage. You can also use the parallax effect with most plugins WordPress visual creation of pages.

However, not all WordPress themes have a built-in parallax effect, and you may not want to use a visual constructor of pages just for parallax effect.

Let's take a look at how to easily add the parallax effect to any WordPress theme.

Method 1: Add the parallax effect to any WordPress theme using a plugin

This method does not require adding any code to your WordPress theme. It's easier and recommended for most users.

The first thing you need to do is to install and activate the plugin Advanced WordPress Backgrounds. For more details, check out our step by step guide on how to install a WordPress plugin.

After activating the plugin, you need to edit the page where you want to add the parallax effect. You will notice the new button "Advanced WordPress Backgrounds»On the visual editor toolbar.

Add adavanced wordpress background

Clicking on it will bring up a pop-up window where you can change various background settings that you want to add.

First of all, you need to select an image as the background and then check the option " Stretch».

Advanced wordpress window background

Then you have to click on the button Select Image To download or select an image you want to use. Make sure you use a large image otherwise it will appear pixelated.

After that, you have to activate the effect Parallax By choosing a type of parallax effect. There are a number of styles available that you can experiment with. The most common parallax effect used is scrolling.

Click on the button Insertion to continue.

The plugin will add a shortcode on your publisher. It will look 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]

Replace " this content By your own content, then save your page.

You can visit your website to see it in action.

Parallax effect on wordpressMethod 2: Add the "Parallax" effect to any WordPress theme with CSS

This method requires you to have some knowledge of "HTML / CSS" as well as how WordPress themes and plugins work.

First, you need to upload to your WordPress media library, the image you want to use for the parallax effect by visiting the " media> Add new ».

Go further by discovering How to organize the media on your WordPress blog

After uploading the image, you need to copy the image url by editing the image in the WordPress media library.

Copy the image url to wordpress

Then you need to add the following HTML code in the page where you want to display the parallax effect. You can also add this HTML code to your WordPress theme or your child theme.

div class = "parallax"> Your content here ...

Then you need to add the following custom CSS code 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 URL of the background image with your own image.

You can now save your changes and visit your website.

Wordpress parallax effect example

Here is ! Now you can add the parallax effect to your WordPress website.

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WooCommerce Donation

Accept through this extension donations on your WooCommerce website with amounts specified by customers. This will allow them to give as much as they want. Each donation can be presented as any usual product of WooCommerce


Woocommerce donation plugin

If the customer skips the cart page or goes directly to the checkout without making a donation, a link will appear above the checkout page so that they can donate.

Each step of using WooCommerce Donation is explained in a documentation with screenshots. Just activate the plugin and you will find the "Add donation" field on the cart.

Download | Demo Web hosting

2. LinkedIn More

LinkedIn Plus is a WordPress plugin that allows you to present your LinkedIn profile on your blog. It also works for multi-author blogs. It adds Follow and Share buttons to your publications, pages or WordPress widgets.Linkedin plus LinkedIn wordpress plugin

It's a great way to add all the LinkedIn features to your blog and validate your brand with consumers. It gives you the ability to customize its appearance, configure settings and activate other advanced options to promote your profile to potential recruiters or employers. 

Download | Demo | Web hosting

3. YouTuber

YouTubeR is a unique WordPress plugin, which allows you to upload YouTube videos from your website and easily embed YouTube videos, playlists and channels to your website.

Youtuber youtube wordpress plugin

With this plugin, you have the opportunity to create exceptional video galleries on your website.

Its other features are: the possibility of easily upload videos to YouTube from your WordPress website, integration easy videos, playlists and YouTube channels to your website, support for Visual Composer, the infinite scrolling in playlists, excellent caching, responsive layout, detailed documentation and more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

That is all! We hope it has been of great help. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

And if you have any suggestions or remarks, leave them in our section Comments.

... 

6 shares
Share3
tweet
Save3