How to add scrolling images in Divi

Adding a scrolling mage to your Divi website is a great way for designers to display a tall image without taking up a large amount of screen real estate.

The most common way is to restrict the height of the image window and add a scrolling option that is controlled by the user.

The Divi Layouts page on Divi Theme Examples displays many long screenshot images which use a simple scrolling effect to allow users to scroll the image up or down manually to see the image within the fixed height window.

The scrolling on these images was previously automatically activated on hover, but I decided that while the automatic scrolling was a cool feature, being able to control the scroll manually was a better UX.

This post will show you how to add both automatic and manual image scrolling using a fixed-height image window on your Divi website.

How to create automatic scrolling images in Divi

The following images will automatically scroll down as you hover over them and scroll back up again as you move the mouse off the image. This is a cool-looking effect but has the disadvantage of lacking full control of how the image scrolls. This can be a good effect in certain situations but consider if the user will want to stop and control the scroll themselves.

Step 1. Add screenshot using a Text module

For each screenshot, you will need to add a Text module that will have the image applied as the module background.

1. Add a text module into your rows column
2. In your text module, go to the Advanced settings tab, CSS IDs & Classes, and add a Custom CSS class of scrollme
3. In your text module, go to the Content setting tab > Background section and upload your image as the background image

Step 2. Add custom CSS

You will then need to add some custom CSS to target any text modules that have the scrollme class added.

The following custom CSS can be added into a number of places in Divi so choose which is best suited for your own website. If you are unsure then you can add it into the Divi > Theme Options > Custom CSS area in your WordPress dashboard.

.scrollme:hover {
-webkit-transition: background-position 4s linear 0s;
-moz-transition: background-position 4s linear 0s;
transition: background-position 4s linear 0s;
background-position: center bottom;
/*The 4s is the time it takes for the image to scroll from start to finish
This is why the longer screenshots scroll faster*/
}
.scrollme {
min-height: 250px;
display: block;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
-webkit-transition: background-position 1.5s ease-out 0.5s;
-moz-transition: background-position 1.5s ease-out 0.5s;
transition: background-position 1.5s ease-out 0.5s;
/*The ease-out 0.5s is the delay before the scroll return to the original position*/
}

How to create manual scrolling images

The following images will scroll manually when the user uses the scrollbar attached to the image. This gives the user full control to scroll to any section of the image and stop the scroll when needed. This is a better option that the automatic scroll I the user will likely want to have greater control of the image scroll.

Add a scrolling image using a Divi Image module

Each image can be added in a Divi Image module that is then customized using a few lines of CSS code within the module.

1. Add an Image module into the rows column
2. In your text module, go to the Advanced settings tab > Custom CSS > Main Element and add the following CSS

   width: auto; height: 250px; overflow-x: hidden;

How to create website screenshots

There are a number of ways to create full-page screen captures but my preferred tool is the Go Fullpage screen capture tool for Chrome which will take a full-screen image with a single click.

• Scroll down the page before starting the capture so any animations get triggered and page elements are loaded
• Websites with parallax images may not capture properly, but re-running the capture often helps.
• Download from Joxi as a PNG file and resize the image for Divi in Photoshop or photo optimization software