Select Page

Divi’s Built-in Parallax feature and how to use it

Hello all, welcome to my blog where I share tricks and hacks about visual & web design stuff in general, this is a response to the amazing people who were asked me to write a step by step guide article over the Facebook for the particular parallax effect that I used in this example above. so there you have it. let’s get started.

 

When it comes to visual builders for WordPress environment, Elegantthemes Divi on top of the list whether its modern, newest features or the support that Elegantthemes offers, they’re on top of the list. the one thing separates Divi from the rest is that the amazing community that exists over the Facebook and the Elegantthemes blog.

 

 

So what is parallax effect?

Well, in terms of web design Parallax effects are “a modern web design element that can be used in a number of ways to enhance the user experience which gives the joyful, pleasing experience to the people who use and visit your website”. check Apple’s parallax example here and the way they’ve taken advantage of it, how informative is that! it just stunning. Divi has amazing built-in Parallax feature that can help you to achieve several effects and if you’re a tech savvy you could play around with custom CSS stuff that could be taken to a whole new level.

But in this specific example, we’re going to look at how we can achieve some liner parallax effect by just using the built-in features in Divi. when you take a close look at the example below you might notice one thing is that the images are moving from bottom to the top and if you’re a keen eye you might notice as well that there is one specific element remains consistent across all the slide, which is the frames that covered the subject(the women). 

it wouldn’t be possible to come up with that works seamlessly without the help of that particular point of reference. this gets us to the next question how do I get that frame exact in the same position? well. it’s all about thinking and planning. I tend to keep that frame in the same position across all the image while I prepare the assets and also the all the image that Used here having the same width & height. it may seem like a bit of complicated thing but when you see it in action you might wonder how the heck I haven’t noticed that in Divi builder? well, let’s get started.

01. The First Section

This is the video section & the section specs. are as shown in the image below.

02. The Second Section

This is a full-width section which contains two following things full-width image module & a full-width header. (the section specs are just default) & module specs are as shown in the image below.

03. The Third Section

This is a normal section and repeated/copied four times. and all of them having the different image slides but same specs as shown in the image below. 

The Conclusion

I’m sure that this is just only an example and your particular needs will vary. but I hope you’d get some ideas in general least where to get started with. but if it’s still unclear! no problems. I’ve bundled together the whole thing into a JSON file that you could just drag and drop to any page in the Divi builder to examine this effect further. so there you have it. be sure to visit back for more Divi and design stuff in general. if you have questions/clarifications feel free to ask in the comments below. I’d love answers them all. see you next time.

 

Pin It on Pinterest