Adding website screenshots to Divi
Website screenshots will often come in a very awkwardly long image size, so when adding them to your website you will need to restyle them in some way. The most common way is to restrict the height of the image window and add a scrolling option.
The Divi Layouts page on this site displays many long screenshot images which use a simple scrolling effect to allow users to scroll 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 whilst the automatic scrolling was a cool feature, being able to control the scroll manually was a better UX.
This post will show you how you can add automatic or manual scrolling with a fixed height image and showcase your screenshots without taking up undless screen real-estate.
<- Automatic image scrolling
Manual image scrolling ->
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
How to create automatic scrolling screenshots
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.
.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*/ }
Watch how the automatic scrolling is set up here;
How to create manual scrolling screenshots







Add screenshot using an Image module
Each image can be added as an 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
width: auto;
height: 250px;
overflow-x: hidden;
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.