How to Create a Beautiful ColumnColliding Hero Section on Scroll with Divi

How to Create a Beautiful Column-Colliding Hero Section on Scroll with Divi

Divi’s scroll effects bring a ton of new design possibilities to the websites you create. The subtle interactions you choose to add can really help elevate the overall look and feel of your website. It all gets even better as soon as you synchronize scroll effects. In this tutorial, we’ll specifically handle creating a beautiful column-colliding hero section on scroll. The hero section design merges two different columns on scroll, which in turn helps emphasize the copy. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Now that we’ve gone through all the steps, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

column-colliding hero section

Download The Column-Colliding Hero Section Layout for FREE

To lay your hands on the free column-colliding hero section layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Recreate Hero Section Section Layout

Add New Section

Background Color

Start by adding a new section to the page you’re working on. Open the section settings and change the background color.

  • Background Color: #f4f2f7

column-colliding hero section

Spacing

Remove all section’s default top and bottom padding too.

  • Top Padding: 0px
  • Bottom Padding:

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top