Divi Layouts scrolling screenshots tutorial

Recreate the Divi Layouts gallery scrolling screenshots

The Divi Layouts page on Divi Theme Examples got a makeover recently and I have been asked a few times about how I created the scrolling screenshots that allow users to hover over the image and preview the full page. When looking for layouts to add to the Divi Layouts collection i came across a set of Divi layouts from Creatives Pad which had this cool scrolling effect. It was perfect for being able to preview the layouts without having to open up the live demo. So, with a little help from Ron from Creatives Pad this is what we created;

How to create the scrolling Layout screenshots

Step 1. Create your screenshots

The images in my layout page are 230px wide by any height. For creating these I found that the Joxi full page screen capture for Chrome worked best to grab the full page and then resizing in Photoshop. Scroll down the page before starting the capture so any animations are triggered. Sites with parallax may not capture properly, but retrying often helped.

Step 2. Add a row with 4 columns (3 if you have a sidebar)

In the text module you need to;
1. Go to the Custom CSS tab and add scrollme as the CSS class.
2. Go to the Advanced setting tab and upload your image as the background image
3. Save

Step 3. Add this custom CSS into your Divi Theme options

.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, which 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*/
}

Step 4. (Optional) Add the top icon

In the Divi Layout page i also added an icon to the top of the scrolling screens. If you want to add this you will need to upload an image (230px x 35px in this example) and add it into the content box of the text module. To make it sit over the top edge of the screenshot like the example you will need to add a style to the image that sets a negative margin of 15px. Your code for this will look like;

<img style="margin-top: -15px;" src="http://yourURLhere.png" alt="alt text" width="230" height="35">

Watch how it’s done here