Creating Inline Scroll Reveals with Divi

Last Updated on September 16, 2022 by 6 Comments

Creating Inline Scroll Reveals with Divi
Blog / Divi Resources / Creating Inline Scroll Reveals with Divi

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to create beautiful inline scroll reveals using the DJ Layout Pack. This is a great way to draw attention to one specific column container on your website, without having to add it to your page multiple times. We’ll add a cool hover/release effect to the technique that will help visitors hold on to the column container and drop it whenever they feel like it. You’ll be able to download the JSON file for free as well!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

scroll reveals

Mobile

scroll reveals

Download The Inline Scroll Reveals Layout for FREE

To lay your hands on the free inline scroll reveals 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 newsletter 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.

Let’s Start Recreating!

Create New Page Using DJ Layout Pack’s Home Page

Add New Page

For this use case tutorial, we’re going to use one of the DJ layouts. Start by creating a new page, giving your page a title and switching over to Visual Builder.

scroll reveals

Upload DJ Homepage

Continue by uploading the DJ homepage layout to your page.

scroll reveals

Add Higher Z Index Value to Each Section on Page

Add Higher Z Index to Hero Section

We’re going to make one specific column fixed and allow it to show through wherever we want. The opposite is true as well; we want to hide it wherever we don’t want it to show up. To do that, we’re going to give each section on the page (besides the one the column is located in, which is section #2 on the page) a higher z index value. Start by opening the hero section and increase the z index in the visibility settings.

  • Z Index: 2

scroll reveals

Copy Z Index

Once you’ve added the z index, you can copy it.

scroll reveals

Paste to Other Sections on Page Except Section #2

And paste it onto all the other section on the page, except for section #2 (the section that contains the column that we’ll transform into an inline scroll reveal).

scroll reveals

Change Section #2

Place Column Content in Separate Rows

Change Row Column Structure

Let’s start modifying the second section, starting with the column structure of the row.

scroll reveals

Duplicate Row

Continue by cloning the row.

scroll reveals

Delete Modules in Rows

Remove the Text and Button Modules in the first row and the Audio Modules in the second row.

scroll reveals

Modify Row #1 in Section #2

Remove Some Audio Modules (to Fit Smaller Screen Sizes)

In the upcoming steps, we’re going to make the column containing the Audio Modules fixed. Now, to make sure the column fits the viewport height of smaller screen sizes, we’ll need to remove some Audio Modules.

scroll reveals

Add Bottom Margin to Row

Continue by opening the row settings, going to the design tab and adding some bottom padding. We’ll need this space to allow the column to reveal on scroll later on the tutorial.

  • Bottom Margin: 700px

scroll reveals

Open Column Settings

Time to start transforming the column into an inline scroll reveal! Open the column settings.

scroll reveals

Hover Box Shadow

Then, go to the design tab and change some box shadow values on hover.

  • Box Shadow Blur Strength: 150px
  • Shadow Color: rgba(0,0,0,0.55)

scroll reveals

Hover Transform Scale

Increase the size of the column on hover as well by modifying the transform scale values.

  • Bottom: 110%
  • Right: 110%

scroll reveals

Default Main Element

To make the column fixed, we’re going to add a few lines of CSS code to the main element of the column.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

scroll reveals

Hover Main Element

Make sure you add the fixed position CSS line to the hover main element as well. This will prevent the column from flickering.

position: fixed;

scroll reveals

Default Z Index

Now, in normal circumstances, we want the module to appear below all page content. To make sure that happens, we’re going to change the z index of the column.

  • Z Index: 0

scroll reveals

Hover Z Index

On hover, however, we want the column to overlap all page content. As soon as someone releases the column, it’ll fall back in its place behind all page content. Change the z index on hover accordingly:

  • Z Index: 10

scroll reveals

Modify Row #2 in Section #2

Add Top Padding to Column

For aesthetic purposes, we’re going to open the column in the second row of section #2 and add some custom top padding.

  • Top Padding: 80px

scroll reveals

scroll reveals

Add Custom Bottom Margin to Sections Throughout Page

Locate Section

Open Section Settings

Now that we’ve modified the inline scroll reveal column, we have to create some space for it to show up. We’ve done that for the row it’s located in already (700px bottom padding), but we’ll allow the column to reveal on other spots on the page as well. Open the section settings of the following section:

scroll reveals

Add Bottom Margin

Go to the spacing settings and add some bottom margin. Adding bottom margin will create empty space on the page that’ll allow the low z index column to show up.

  • Bottom Margin: 700px

scroll reveals

Locate Section

Open Section Settings

Open the following section next:

scroll reveals

Add Bottom Margin

And add some bottom margin here too.

  • Bottom Margin: 700px

scroll reveals

Remove Excess Section Padding

Remove Section #2 Bottom Padding

Now, the only thing that’s left for us to do is optimizing the way our design matches the inline scroll reveal. Open the second section on the page and remove the bottom padding.

  • Bottom: 0px

scroll reveals

Locate Section

Open Section Settings

Open the following section settings next:

scroll reveals

Remove Bottom Padding & Add Top Padding

Add some top padding and remove the bottom padding.

  • Top Padding: 100px
  • Bottom Padding: 0px

scroll reveals

Locate Section

Open Section Settings

On to the last section. Open the section settings.

scroll reveals

Remove Top Padding

Remove the top padding and you’re done!

  • Top Padding: 0px

scroll reveals

Preview

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

Desktop

scroll reveals

Mobile

scroll reveals

Final Thoughts

In this post, we’ve shown you how to create inline scroll reveals with Divi and the DJ Layout Pack. This is a great way to add interaction to your website. We hope this tutorial inspires you to create your own fixed inline scroll reveals as well! If you have any questions or suggestions, make sure you leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi Carousel Module 2.0

Divi Plugin Highlight: Divi Carousel Module 2.0

Posted on November 3, 2024 in Divi Resources

Carousels are a great way to interactivity to your website. With the Divi Carousel Module 2.0 plugin, you can create carousels for just about any type of content. Showcase client testimonials, images, logos, team members, and more with this intuitive tool. Read on to learn about its features, how...

View Full Post

6 Comments

  1. Thanks for the ready to download file ! Great work !

    • You’re welcome, Benoît! Glad to hear you’ve enjoyed the tutorial. 🙂

  2. That is a killer one! Awesome! Thank you, Donjete!

    • Glad you’ve enjoyed the tutorial, Elisandro! 🙂

  3. Thank you for clarifying everything in detail.

    • You’re welcome, Varun! Thanks for the comment. 🙂

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today