Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a parallax effect to any WordPress theme.
What is a Parallax Effect?
Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the background images and makes them feel interactive.
However, 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 for a parallax effect.
Let’s take a look at how to easily add parallax background effect to any WordPress theme.
Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin
This method doesn’t require you to add any code to your WordPress theme. It is easier and recommended for most users.
Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor.
Clicking on it will bring up a popup where you can change different settings for the background you want to add.
First, you need to select an image as your background type and then check the ‘stretch’ option.
Next, you need to click on the ‘Select Image’ button to upload or select an image you want to use. Make sure that you are using a large image otherwise it will appear pixelated.
After that you need to enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. The most commonly used parallax effect is 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
Replace ‘Your content here’ with your own content and then save your page.
You can now visit your website to see it in action.
Method 2: Add Parallax Effect to Any WordPress Theme with CSS
This method requires you to have a fair understanding of HTML / CSS as well as how WordPress themes work.
First, 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 uploading the image, you need to copy the image URL by editing the image in WordPress media library.
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.
Your content goes here...
Next 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;
Don’t forget to replace the background image URL with your own background image.
You can now save your changes and visit your website to see it in action.
Note: You may need to adjust CSS to work with your site’s layout.
We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the most wanted WordPress tips, tricks, and hacks.
The post How to Add a Parallax Effect to Any WordPress Theme appeared first on WPBeginner.