Parallax effect is often used by website owners to make their websites look more appealing. Most WordPress page builder plugins, including Divi Builder, have a default feature to add a parallax effect so that you don’t need to install an extra plugin to add one. In this post, we will show you how to add a parallax background on your WordPress site using Divi Builder.
Divi Builder, as you might have known, is a popular page builder developed by Elegant Themes which you can install on any WordPress theme. It allows you to add a parallax effect to any element. Be it a section, column, or module.
In case you have no idea yet about what the parallax effect is. In the context of web design, the parallax effect refers to a behavior where the background moves at a slower pace than foreground. Here is an example of the parallax effect.
Adding a Parallax Background in Divi Builder
One thing you need to know before we get started. There are two parallax effect types offered by Divi Builder:
- True Parallax: Just like the name suggests, this style creates a slightly slower scrolling movement of the background than the other elements on the page as we mentioned above.
- CSS: This style creates a fix background image in place while the foreground elements scroll normally.
To add a parallax background in Divi Builder, first, edit the element (section, column, or module) you want to add the parallax background to by clicking the gear icon which appears when you hover your mouse over the associated element.
On the appearing settings panel, open the Background block under the Content tab. Click the Image tab and select an image you want to use as the background.
Once your image is uploaded, enable the Use Parallax Effect option and then select the style you like on the Parallax Method dropdown. Don’t forget to click the green checklist icon to apply the change.
That’s it. Once you are done editing your page/theme builder template, you can publish/edit your page.
The Bottom Line
Parallax background is one of the built-in features available in Divi. You can use it to give an animation touch you design to make it more appealing to users. Just be aware that adding an animation effect — including parallax — might cause your page a heaver to load. So, only add animation effect with the right portion.
