Source: https://divicake.com/blog/divi-scrolling-screenshot-effect/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Add a Scrolling Screenshot Effect in Divi with Custom CSS By Divi Cake·3 March 2025·Updated 19 August 2026·4 min read How to Add a Scrolling Screenshot Effect in Divi with Custom CSS We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Add a Scrolling Screenshot Effect to Your Divi Site](https://divicake.com#add-a-scrolling-screenshot-effect-to-your-divi-site) - [Steps to Create a Scrolling Screenshot Effect in Divi](https://divicake.com#steps-to-create-a-scrolling-screenshot-effect-in-divi) - [Step 1: Add a Code Module in Divi](https://divicake.com#step-1-add-a-code-module-in-divi) - [Step 2: Add Custom CSS to the Code Module](https://divicake.com#step-2-add-custom-css-to-the-code-module) - [Step 3: Save and Preview](https://divicake.com#step-3-save-and-preview) - [Final Thoughts](https://divicake.com#final-thoughts) A scrolling screenshot effect in [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-scroll-effects/). 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](https://divicake.com/blog/how-to-add-custom-css-to-divi/), keeping your site fast and efficient. This method is an [easy way to improve the presentation of website designs](https://divicake.com/blog/key-elements-of-modern-web-design/), 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](https://divicake.com/blog/divi-theme-builder-overview/) and navigate to the section where you want the effect. - Click Add Module and select [Code Module](https://divicake.com/blog/divi-modules/#9_Code:~:text=Table%20of%20Contents-,9.%20Code,-The%20Code%20module) from the list. Divi Builder interface with a Code Module added to create a scrolling effect inside a monitor-style frame. 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:
Scrolling Screenshot
HTML code inside a Divi Code Module to create a scrolling effect within a monitor-style frame, including a container, scrolling image, and stand elements. 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); } Custom CSS code applied in a Divi Code Module to style a scrolling effect inside a monitor-style frame, including a scrollable container, hover animation, and monitor stand design. Adding Custom CSS for the Scrolling Effect in Divi Read More: [Make a Horizontal or Vertical Scroll Section/Page in Divi](https://divicake.com/blog/divi-horizontal-vertical-scroll/) ### 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. Live preview of the scrolling effect in Divi, showing a monitor-style frame with a hover-activated scrolling animation. Previewing the Scrolling Effect in Divi ## Final Thoughts Adding a scrolling screenshot effect in [Divi](https://divicake.com/go/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](https://divicake.com/blog/divi-scroll-down-hover-effect-guide/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/) [ Why Web Designers Use Divi Theme to Build Better Websites Blogging7 min read ### Why Web Designers Use Divi Theme to Build Better Websites Design agencies pick Divi for its visual builder, reusable layout packs, and faster client handoff. Here is what Divi for web designers changes day to day. 14 April 2026](https://divicake.com/blog/why-web-designers-use-divi/)