Divi Builder has a built-in feature to add a parallax background. However, the parallax effect offered by Divi Builder tends to limit. You can’t even select any parallax effect at all. The only option offered by Divi Builder about parallax is the parallax method (true parallax or CSS). Fortunately, Divi Builder offers custom position and scroll effects. You can combine these two features to create a more stylish parallax effect. In this example, we will show you how to create a zoom parallax background by making use of those features.
The idea is by using the Image module and set the position to absolute. When you set the position of a module to absolute, there will be no actual space created on the page for the associated module. Simply put, you can think of it as a floating module on top of other elements that take up the actual space. You can make use of this concept to use the Image module as the background of a section. While to add the zoom effect, you can use the scroll effects.
Creating a zoom parallax background in Divi Builder
To get started, add a new regular section by clicking blue plus button on the canvas area. Insert a row and select the one-column structure.
Open the section settings panel by clicking the gear icon on the section handle (the blue handle). Once the section settings panel opens, go to the Advanced tab and open the Visibility block. Set the Horizontal Overflow and the Vertical Overflow to Hidden.
Next, open the row settings panel by clicking the gear icon on the row handle (the green handle). On the row settings panel, go to the Design tab and open the Sizing block. Set the Gutter Width to 1, Width to 100% and Max Width to 100%.
Next, you can add the modules to the row. You can add any module you like. Once done adding and editing the modules, add one more module — the Module image — and place it at the top. You can switch to the Wireframe View mode to ease your job.
Open the Image module settings panel by clicking the gear icon on the Image module handle. On the Content tab, open the Image block and remove the default image handler if it exists.
Still on the Content tab, open the Background block. On the Background block, click the image tab and select the image you want to use as the background by clicking the plus button. Enable the Use Parallax Effect option and set the parallax method to CSS.
Go to the Design tab and open the Sizing block. Enable the Force Fullwidth option.
Also on the Design tab, open the Spacing block and set the top padding and the bottom padding to about 30% (you can tailor the value according to the content on the section).
Next, go to the Advanced tab and open the Position block. On the Position option, set to Absolute. On the Location option, set to top-left.
Lastly, open the Scroll Effects block. Since we want to create a zoom parallax, click the Scaling Up and Down tab on the Scroll Transform Effects section and enable the Enable Scalling Up and Down option.
On the Set Scalling Up and Down section, set the starting scale to about 150%, the mid scale to 150% and the ending scale to 100%. This settings will create the zoom out effect. To create a zoom in effect, you can set the ending scale below the starting scale and the mid scale.
Here is the zoom parallax effect we created.
