How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Feb 9, 2020 | Everything Divi for WordPress

Floating elements within a section can provide an effective and unique way to reveal content as the user scrolls down the page. With Divi, you can float elements simply by giving them a fixed position using the built-in position options available. And when you combine the fixed elements with static elements, animation, and parallax, your content will come alive!

In this tutorial, we will show you how to float elements (images and a blurb module) within a section in Divi to create a beautiful, dynamic scrolling effect!

Let’s get started!

Sneak Peek

Here is a quick look at the floating elements design we will build.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Download the Layout for FREE

To lay your hands on the designs from this tutorial, 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!

To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.

NOTE: You will need to deploy the wireframe view mode and restore the default Z Index of the Middle section if you want to use the Divi Builder in visual mode to edit the items.

Let’s get to the tutorial, shall we?

What You Need to Get Started

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”. After that, you will have a blank canvas to start designing in Divi.
  4. In order to use the same images used on this tutorial, you can click here to download the images from the Candy Shop Layout Pack.

Creating a Section with Three Columns

Let’s get things going by creating a three-column row.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-1 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Then update the row settings as follows:

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-2 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Open the settings for column 1 and adding the following padding:

  • Padding: 10vw Top, 5vw Bottom

This will help stagger the layout of the images a bit and add some height to our column.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-3 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Open the settings for column 2 and add the following Z Index:

  • Z Index: 12

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-4 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

This will make sure the blurb module we will add to the middle column will stay above all other content on the section.

Adding the Images with Static and Fixed Positions

The next step will be to add the floating images to our left and right columns. Four of the images will keep their static (default) position but we will give two of them a fixed position. This will help give the illusion that some are floating.

Image #1 (static)

Add a new image module to column 1.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-5 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload an image to the module.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-6 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the following design settings for the image:

  • Width: 200px
  • Module Alignment: right
  • Blur: 2px
  • Transform Translate (Y): -58px
  • Transform Translate (X): 63px

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-7 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Image #2 (Fixed)

Add a second image module under the first in column 1.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-8 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload a new image to the module.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-9 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the design settings for image #2 as follows:

  • Width: 200px
  • Position: Fixed
  • Location: Top Left
  • Vertical Offset: 7%
  • Horizontal Offset: 5%

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-10 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Image #3 (Static)

Add a third image under the second in column 1.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-11 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload a new image to the module.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-12 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the design settings for the image as follows:

  • Width: 300px
  • Module Alignment: Right
  • Transform Translate (Y): 179px
  • Transform Translate (X): 128px

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-13 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Image #4 (Static)

Add a fourth image module to column 3.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-14 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload a new image to the module.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-15 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the design settings for image #4 as follows:

  • Width: 200px
  • Module Alignment: Left
  • Blur: 4px
  • Transform Translate (Y): -9px
  • Transform Translate (X): -30px

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-16 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

The blur effect helps to give the illusion that the image is farther away.

Image #5 (Fixed)

Next, add a new image module under image #4 in column 3.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-17 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload a new image to the module as follows:

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-18 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the design settings for image #5 as follows:

  • Width: 200px
  • Position: Fixed
  • Location: Bottom Right
  • Vertical Offset: 7%
  • Horizontal Offset: 5%

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-19 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Image #6 (Static)

Add the sixth and final image under image #5 in column 3.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-20 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Upload a new image to the module.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-21 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Update the design settings for image #6 as follows:

  • Width: 300px
  • Module Alignment: Left
  • Transform Translate (Y): 62px
  • Transform Translate (X): -122px

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-22 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Adding the Blurb with a Fixed Position

We are ready to add the final piece of content to our section. This will be the main featured blurb that will also be in a fixed position.

Add a blurb module to the middle column (column 2).

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-23 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Then update the content of the blurb as follows:

  • Title: Sweet Deal

Then add the following HTML to the body under the text tab:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p> <a href="#">Learn More</a>

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-24 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Add an image to the blurb.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-25 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Design the blurb by updating the following settings:

  • Background Color: #ffffff
  • Text Alignment: Center
  • Title Font: Concert One
  • Title Text Color: #0a2d61
  • Title Text Size: 50px
  • Body Font: Concert One
  • Body Text Size: 20px
  • Body Line Height: 1.8em
  • Link Font Syle: TT
  • Link Text Color: #ff3d97
  • Link Text Size: 20px
  • Link Letter Spacing: 5px
  • Width: 400px
  • Padding: 30px top, 30px bottom, 30px left, 30px right

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-26 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

  • Rounded Corners: 10px
  • Box Shadow: see screenshot
  • Box Shadow Blur Strength: 80px

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-27 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Then finally give the blurb a fixed position with a central location.

  • Position: Fixed
  • Location: Middle/Center

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-28 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Creating a Mock Top and Bottom Section

Add a new regular section under the current section.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-29 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Give the section a background color.

  • Background Color: #4DB9FF

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-30 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Then give it some height so that we can have enough room to scroll through our section with the floating elements.

  • Height: 100vh

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-31 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Duplicate the mock section and move the duplicate to the top of the page so that our main section with the floating elements becomes the middle section.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-32 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Final touches to the Middle Section

To finish off the design, we will add another layer of movement by adding a parallax background to the section. And we will also need to hide the overflow. But the main problem is that our fixed elements are still showing above the top and bottom sections. To fix this, we need to give our section a -1 Z Index.

  • Background Image: insert image
  • Use Parallax Effect: YES
  • Parallax Effect: True Parallax
  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden
  • Z Index: -1

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-33 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

NOTE: Once you give the section a Z Index of -1, the visual builder in desktop view mode may not work correctly. Therefore you may need to deploy wireframe view mode to edit the section further.

Additional Animation for Static Elements

Use multi-select to select the four static images and then update the element settings with the following animation settings:

  • Animation Style: Slide
  • Animation Direction: Up
  • Animation Duration: 4000ms
  • Animation Starting Opacity: 100%

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi-34 How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

This will add the floating effect of the images when they come into view on scroll.

Final Result

Here is the final result.

how-to-float-elements-within-a-section-to-create-a-dynamic-scrolling-effect-in-divi How to Float Elements within a Section to Create a Dynamic Scrolling Effect in Divi

Final Thoughts

Floating an element in Divi only requires a few clicks to give it a fixed position and then using the offsets to put it in the exact place you want it to stay fixed within your browser. Then you can use Z Index to ensure the fixed elements only are visible on a specific section. Once the basic setup is done, you can improve the scroll effect by adding additional static elements, parallax background, and animation to make the section come to life. I hope this inspires you to get a little creative with your next Divi build.

If you want to take this section to a whole new level, check out our new Scroll Effects which are now built-in to Divi.

I look forward to hearing from you in the comments.

Cheers!


Source

eHost managed wordpress hosting



We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.