How to add manual or automatic scrolling screenshots in Divi

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.

How to create website screenshots

There are a number of ways to create full-page screen captures but my preferred tool is the Joxi full page screen capture for Chrome which will talke 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.

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*/
}

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.

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;