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.
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.
So much to see... 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, all WordPress themes doesn't offer a built-in parallax effect and you might not want to use a visual page builder just for a 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.
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».
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.
Method 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.
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.
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 appearance and to optimize the handling 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.
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 which 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 WordPress posts, pages or widgets.
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 WordPress Plugin unique platform, which allows you to upload videos to YouTube from your website and easily embed YouTube videos, playlists and channels on your website.
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.
- How to fix "Unable to write to disk" error on WordPress
- How to become a successful blogger and make money with WordPress
- How to publish your articles by email on WordPress
- How to become a successful blogger and make money with WordPress
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.
...
