5 Steps To Create A Smooth Scrolling Parallax Website with Divi

2 weeks after I posted this short Divi customization tutorial Elegant Themes released Divi 2.1, containing more One-Page functionality including smooth anchor scrolling and smooth mouse scrolling. Of course parts of this guide can be used for any other website as well.

I think it’s safe to say that everyone who knows about WordPress and Premium WordPress Themes is aware of Elegant Themes‘ existence. As I’m writing this, they have 243,989 members and that number rises on a daily basis. This “WordPress Theme Club” is famous for periodically releasing high quality themes for a very low yearly price (or even an even more interesting life-time fee). This is perfect for web designers, but is also worth it when you are just looking for a single theme for your blog.

Divi, their latest installment, is a jaw-dropping project that is constantly being updated and improved, currently at version 2.4. I use this theme on quite number of sites already, including the one you’re looking at now, my business website (which will also be the main example for this small tutorial), some client’s websites and I’m also working on some new niche sites that make use of this powerful template. Getting to know Divi is quite easy, especially because they built a lightning-fast custom page builder that provides all the elements you need to build you very own modern website. However, there are always things to improve because, you know, you can’t argue about taste and for my Strapless Media website I needed some additional functionality. This 5-step tutorial (which is actually about 40 steps, but divided into 5 subjects) tells you how to create a very elegant, smooth scrolling parallax website using the Divi theme. All in just a matter of minutes.

What on earth is parallax?

In scientific terms, parallax is simply a visual displacement of an object’s position, viewed from different lines of sight. In internet terms it simply means that you can have your page’s background or other elements behave (move) differently from the foreground when you scroll through the page. Awwwards made a list of fantastic parallax scrolling websites last year, have a look at Boy-Coy.com to get an idea of what it means.

What is smooth scrolling or smooth parallax scrolling?

To get a perfect sense of the displacement and different behaviors of backgrounds/elements when you scroll down a page, smooth scrolling really helps. Without a smooth scrolling setup, scrolling with your mouse wheel or even on tablets or smartphones can be jittery and not very elegant.

Divi’s parallax functionality

The basic parallax options in Divi are pretty awesome. For each “section” that you place (basically a row that can contain different columns and content) you can choose a different background and if it’s parallax or not. In the latest version of Divi you can even choose whether it’s just a “fixed” CSS or a “true” parallax background. In this tutorial I will cover the true parallax setting.

Press the NEXT button above or below to get started