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.
<- Automatic image scrolling
Manual image scrolling ->
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.
- Add a text module into your rows column
- In your text module, go to the Advanced settings tab, CSS IDs & Classes, and add a Custom CSS class of scrollme
- 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.
[php].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*/ }[/php]
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.
- Add an Image module into the rows column
- In your text module, go to the Advanced settings tab > Custom CSS > Main Element and add the following CSS
[php]width: auto; height: 250px; overflow-x: hidden;[/php]
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
Craig,
This is a great tutorial. i love the effect.
I was just wondering why you pulled this technique from the Divi theme Examples website.
Did it prove too much trouble than it was worth?
I can’t find it on the website now so I guess you made an exec decision to get rid of it.
Many Thanks
Regards Mark
whilst this looks cool and works well for particular situations for previewing the full page screenshots its more user friendly to be able to scroll up and down as needed.
Could you modify this so that the screenshot appears on a device (monitor, phone, tablet, etc.) and simulates viewing on that device?
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-scrollable-text-preview-tablet-with-divi
This is great, and works much better than the JSON provided by elegant themes. Thank you!!
I have had a few comments from my site viewers though that they don’t like that some screenshots scroll faster than others.
I understand that the speed is determined by image height, but some of our images are very tall, so the scroll effect is awkwardly fast.
Is there any way to make the scroll speed consistent no matter the height of the image?
Thanks
i guess an easy way would be to have a 2nd css rule … so scrollme2 would be used for those really tall images and would have a longer transition…. there is probably a smarter way to do it too!
That’s a good Idea, I’ll likely go that route. Thanks!
Hi, really appreciate this tutorial. Only question – I would like to change the way, how the automatic scrolling works. I would like to have there only manual scrolling – up and down, not automatic. Is it possible to tweak it somehow?
Thanks
I have updated the posts for manually scrolling too, which just takes a few lines of CSS in an image module.
Hi Craig, thank you for this tutorial, this is brilliant and straight to the point!
One question though, do you know if there’s a way to customize the scrolling bar using CSS?
Thanks again!
should be able to use this https://www.divithemeexamples.com/how-to-add-a-custom-scrollbar-in-divi/ so you would have something like
/* Style the scrollbar track */
.scrollme::-webkit-scrollbar-track {
background-color: #f1f1f1;
}