How to Fan Out Images on Scroll to Promote an Image Gallery in Divi

Last Updated on September 17, 2022 by 9 Comments

How to Fan Out Images on Scroll to Promote an Image Gallery in Divi
Blog / Divi Resources / How to Fan Out Images on Scroll to Promote an Image Gallery in Divi
Play Button

Knowing how to fan out images with Divi and its scroll effects can be a subtle and impressive design element to help promote an image gallery on a landing page. The idea is to engage users as they scroll down the page by fanning out images like a hand of playing cards.

In this tutorial, we are going to create a clean section layout for promoting an image gallery that includes a collection of images that fan out on scroll. You can use any images you want with this design and it would be a nice addition to any landing page.

Sneak Peek

Here is a quick look at the design weโ€™ll build in this tutorial.

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 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.

Subscribe To Our Youtube Channel

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Letโ€™s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

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.

Part 1: Creating the Layout and Mock Content

For this first part of the tutorial, we are going to build the section layout with a two-column row that has a title and a button in the left column. In the second part, we will add the fan-out images to the right column.

Section Settings

Before we add anything to the layout, update the settings for the default section as follows:

  • Padding: 10vw top, 10vw bottom
  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

fan-out images on scroll

Adding the Row

Next, add a new row with a two-thirds one-third column structure.

fan-out images on scroll

Row Settings

Then update the row settings with a custom background image. Iโ€™m using one from the Stationery Shop Landing Page Premade Layout. After that update the following:

  • Background Image Size: Actual Size
  • Background Image Position: Top Left
  • Max Width: 900px

fan-out images on scroll

Adding the Text Module to Create the Title

Once the row is ready, add a new text module to column 1 to create the title.

fan-out images on scroll

Text Content

Add the following H1 Heading to the body content:

<h1>Our Gallery</h1>

fan-out images on scroll

Text Settings

Then update the text settings as follows:

  • Heading Font: Bellefair
  • Heading Text Alignment (tablet and phone): right
  • Heading Text Size: 150px (desktop and tablet), 110px (phone)

fan-out images on scroll

Adding the Button

Under the text module, add a new button module.

fan-out images on scroll

Button Text

Update the button text with โ€œView Galleryโ€.

fan-out images on scroll

Button Settings

Under the design tab, update the following:

  • Alignment (tablet and phone): right
  • Button Text Size: 14px
  • Button Text Color: #ffffff
  • Button Background Color: #121212
  • Button Border Width: 0px
  • Button Letter Spacing: 3px
  • Button Font: Montserrat
  • Button Font Style: TT
  • Margin: 7vw top

fan-out images on scroll

Part 2: Creating the Images with the Fan-Out Scroll Effect

In this second part of the tutorial, we will create the images with the fan-out scroll effect. We will start with the middle image. Iโ€™m using the images from the Fashion Gallery Page Premade Layout. They should be all the same size for a consistent design. The ones Iโ€™m using are 400px by 600px.

Creating the Middle Image

Add a new image module to the right column.

fan-out images on scroll

Then upload an image to the module.

fan-out images on scroll

Image Settings

Update the max width and margin for mobile displays as follows:

  • Max Width (tablet and phone): 200px
  • Margin (tablet and phone): 0px left

fan-out images on scroll

Creating the Middle Right Image

To create the second image (or middle right image), duplicate the first image module.

fan-out images on scroll

Image Settings

Then open the settings for the duplicate image module and update the following:

Position
  • Position: Absolute

fan-out images on scroll

Transform Origin
  • Transform Origin: bottom center

fan-out images on scroll

Scroll Effects

Under Horizontal Motion, update the following:

  • Enable Horizontal Motion: YES
  • Starting Offset: 0 (at 20%)
  • Mid Offset: 0.5 (at 50%)
  • Ending Offset: 0.5 (at 100%)

fan-out images on scroll

Under Rotating, update the following:

  • Enable Rotation: YES
  • Starting Rotation: 0 deg (at 20%)
  • Mid Rotation: 20 deg (at 50%)
  • Ending Rotation: 20 deg (at 100%)

fan-out images on scroll

Creating the Right Image

To create the third image that will fan out to the far right, duplicate the second image we created.

fan-out images on scroll

Update Scroll Effects

Under Horizontal Motion, update the following:

  • Mid Offset: 1
  • Ending Offset: 1

fan-out images on scroll

Under Rotating, update the following:

  • Mid Rotation: 40 deg
  • Ending Rotation: 40 deg

fan-out images on scroll

If you havenโ€™t noticed, we are essentially increasing the horizontal offset by 0.5 increments and the rotating offset by 20-degree increments with each image. This will create equal spacing between the images. And because the scroll effect animation is based on the bottom-center transform-origin, it will give the impression that the images are fanning out like a hand of playing cards.

Label Images In Layers Box

Before we create the last two images, letโ€™s update the labels of the current images so that we donโ€™t get confused.

fan-out images on scroll

Creating the Middle Left Image

To create the middle left image, we can duplicate the middle right image.

fan-out images on scroll

Then drag it above the middle image to the top of the column.

fan-out images on scroll

You can update that image label as well.

Update Scroll Effects

Open the settings for the middle left image and update the following scroll effects:

Under Horizontal Motionโ€ฆ

  • Mid Offset: -0.5
  • Ending Offset: -0.5

NOTE: All we are doing is changing the offset value to a negative.

fan-out images on scroll

Under Rotatingโ€ฆ

  • Mid Rotation: -20 deg
  • Ending Rotation: -20 deg

fan-out images on scroll

Creating the Left Image

Finally, letโ€™s create the final left image by duplicating the right image and dragging it to the very top of the column.

fan-out images on scroll

You can also update the label as well.

fan-out images on scroll

Update Scroll Effects

Open the settings for the left image and update the scroll effects:

Under Horizontal Motion:

  • Mid Offset: -1
  • Ending Offset: -1

fan-out images on scroll

Under Rotatingโ€ฆ

  • Mid Rotation: -40 deg
  • Ending Rotation: -40 deg

fan-out images on scroll

Column 1 Z Index

Right now the images in column to will overlap the content in column 1. To change this, open the settings for column 1 and update the z index as follows:

  • Z Index: 10

fan-out images on scroll

Adding New Images and Filters

Now, all we need to do is update each of the images with new/different ones.

fan-out images on scroll

For a unique effect, add the following filters to all the images (using multiselect) except the right image.

  • Saturation: 20%
  • Opacity: 85%

fan-out images on scroll

Result

Here is the result so farโ€ฆ

Rotating the Column

To change the design a bit, we can rotate the collection of images by rotating the parent column.

To do this, open the settings for column 2 and add the following transform option:

  • Transform Rotate Z Axis: 40 deg

fan-out images on scroll

Final Result

Here is the final result.

Desktop

Tablet

Phone

fan-out images on scroll

Final Thoughts

In this tutorial, we learned how to fan-out images using Diviโ€™s scroll effects, but you donโ€™t have to stop there! You can easily use this same technique to fan-out any collection of modules (Iโ€™m thinking blurbs). I limited the offset distance with each imageโ€™s scroll effects so the design isnโ€™t really functional (ie. you canโ€™t really see every image in its entirety). But, you can increase the offsets to make the images more visible if you want.

I look forward to hearing from you in the comments.

Cheers!

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

9 Comments

  1. My images don’t fan. I’ve gone over the directions twice and don’t see where I’ve made a mistake. Any possible suggestion as what might be wrong?

    • Never mind. It’s an Edge browser thing. It works on Chrome.

  2. This looks really nice. Love the presentation of images. Question: how does this look/work on mobile?

    • I tested it here on my site. Scroll down a bit and you will see it. I havenยดt used my own photos yet though.

      • Thanks, John-Arild.

  3. I m just seen the blog regarding Divi and looks perfect for optimized gallery images. A good tool for word press sites.

    • I agree, James. Thanks for the comment.

  4. Perfect Timing on this one! I was just looking at my family blog and thought I needed to spruce up the gallery pages on there. Definitely going to try this out on a few new galleries.

    • Great to hear, Brad!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today