A scrolling screenshot effect in Divi is a great way to display long web pages, app previews, or interactive content in a compact, engaging format. Instead of showing a static image, this effect creates the appearance of scrolling within a framed section, making it perfect for showcasing website designs, landing pages, or product demos.

In this tutorial, we’ll guide you through the process of creating a monitor-style frame in Divi with a smooth scrolling effect. Using a combination of HTML and custom CSS, you’ll be able to add this interactive feature seamlessly to your site. Whether you’re highlighting a full webpage or a specific section, this method helps present your content in a visually appealing way without overwhelming the layout.

Add a Scrolling Screenshot Effect to Your Divi Site

A scrolling screenshot effect is a useful way to showcase full-length web pages, templates, or design previews in a compact, interactive format. Instead of displaying a tall, static image, this effect keeps the content inside a fixed frame with smooth scrolling. Here’s why it’s worth adding to your Divi site:

• Showcase Full Web Pages – Present long-form content, landing pages, or templates without taking up too much space.
• Enhance Visual Appeal – Add a modern, interactive touch that makes your website previews more engaging.
• Keep Layouts Clean – Avoid cluttering your design with oversized screenshots by displaying them in a scrollable frame.
• No Extra Plugins Needed – Achieve this effect with simple custom CSS, keeping your site fast and efficient.

This method is an easy way to improve the presentation of website designs, product features, or lengthy content without compromising the overall layout.

Steps to Create a Scrolling Screenshot Effect in Divi

Follow these simple steps to add a scrolling screenshot effect inside a monitor-style frame in Divi.

Step 1: Add a Code Module in Divi

• Open the Divi Builder and navigate to the section where you want the effect.
• Click Add Module and select Code Module from the list.

Adding a Code Module in Divi for a Scrolling Effect

• Inside the Code Module, paste the following HTML to create the structure for the scrolling effect:

<!-- Full monitor container -->
<div class="screen-wrapper">
    <!-- Larger screen with scrolling image -->
    <div class="scroll-container">
        <img src="Replace this with YOUR-IMAGE-URL" alt="Scrolling Screenshot">
    </div>
    <!-- Monitor stand -->
    <div class="screen-pole"></div>
    <div class="screen-stand"></div>
</div>

Adding HTML Structure for the Scrolling Effect in Divi

Replace “YOUR-IMAGE-URL” with the URL of the image you want to use. Ensure the image is tall enough for the scrolling effect.

Step 2: Add Custom CSS to the Code Module

Now, go to the Code Module settings, switch to the Advanced tab, and paste the following CSS into the Custom CSS section:

/* Wrapper to hold the screen and stand together */
.screen-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 40px auto;
}

/* Monitor frame */
.scroll-container {
    position: relative;
    overflow: hidden;
    height: 400px;
    max-width: 600px;
    border-radius: 20px;
    border: 12px solid #222;
    background: #000;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}

/* Image inside the container */
.scroll-container img {
    display: block;
    width: 100%;
    min-height: 800px;
    transform: translateY(0);
    transition: transform 4s linear;
}

/* Scroll on hover */
.scroll-container:hover img {
    transform: translateY(calc(-100% + 400px));
}

/* Scroll indicator */
.scroll-container::after {
    content: "\2193"; /* Downward arrow */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 12px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hide arrow icon on hover */
.scroll-container:hover::after {
    opacity: 0;
}

/* Monitor stand */
.screen-pole {
    width: 25px;
    height: 50px;
    background: #333;
    border-radius: 5px;
    margin-top: 15px;
}

.screen-stand {
    width: 120px;
    height: 20px;
    background: #222;
    border-radius: 10px;
    margin-top: 8px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

Adding Custom CSS for the Scrolling Effect in Divi

Read More: Make a Horizontal or Vertical Scroll Section/Page in Divi

Step 3: Save and Preview

After adding the HTML and CSS, save the changes and preview your Divi page. Hover over the arrow indicating the scrolling effect to see it in action.

Previewing the Scrolling Effect in Divi

Final Thoughts

Adding a scrolling screenshot effect in Divi is a simple yet effective way to showcase long pages without overwhelming your layout. Whether you’re displaying website previews, templates, or detailed content, this technique keeps your design clean while making the information easily accessible.

With just a bit of HTML and custom CSS, you can create a smooth scrolling effect without relying on extra plugins. Try it out on your Divi site and see how it enhances your presentation.

Got questions or need adjustments? Drop a comment below—we’re here to help!

Read More: Adding a Scroll Down Hover Effect in Divi Website – Step-by-Step Guide