DiviGrid · Scroll Image for Divi 5
Scroll Image: a whole page in a small frame
Show a tall screenshot, menu or poster inside a frame of any height. On hover it scrolls from top to bottom, bottom to top or sideways, at the speed you set. Add a badge, a title and a hover icon.
Hover the browser and the phone
●●● towerline.studio
Use case 01 · Web design studios
Northfold Studio
Three recent websites, shown top to bottom. Hover a window and the whole page scrolls past, the way a client would see it.
●●● lumen.co
Lumen · lighting shop · 6 s scroll
●●● crumb.bakery
Crumb · cookie bakery · 6 s scroll
●●● ridgeline.travel
Ridgeline · trekking trips · 6 s scroll
Use case 02 · SaaS & apps
See the whole tour before you sign up
Ledgerly puts its full landing page in one card. This one starts at the bottom, on the price, and scrolls up to the headline.
Bottom to top · 8 s · "Live preview" badge top left · 600px frame
●●● app.ledgerly.io
Use case 03 · Mobile apps
Fresh, delivered in an hour
The Fresh grocery app, screen by screen. Each phone scrolls through one full screen when you hover it.
Two DG Scroll Image modules in phone frames (Divi Groups) · 30px rounded screens · 4 s scroll
Hover a phone
Use case 04 · Restaurants & cafés
Harbour Kitchen
The whole menu, starters to drinks, on one card that reads itself. Slow enough to choose your fish.
Top to bottom · 9 s · cream offset shadow from the module's Box Shadow setting
Hover the menu
Use case 05 · Email & newsletters
Show the email, not a thumbnail
Daily Grind's autumn newsletter, at full length. A brown layer and a magnifier appear on hover while the email scrolls.
Overlay colour + Divi icon on hover · "Template" badge top right · title and text under the frame from the module
Autumn blend launch
Sent to 18,400 readers · 52% opened
Use case 06 · Festivals & events
THE FULL LINE-UP, ONE POSTER
Lakeside Weekend prints one tall poster for all three days. On the site it sits in a short frame and scrolls on hover.
Top to bottom · 7 s · pill-shaped frame (200px corners) · 6px dark border
Hover the poster
Use case 07 · Travel & tours
Wide views, small frames
Open Horizon Tours shows each trip as a panorama that pans sideways on hover, with the price on a badge.
Canyon rim walk
5 days · camping under the stars
Fjord towns
7 days · boat and harbour inns
Blue ranges
6 days · ridge hiking
Left to right and right to left · 5 s · title (H3) and text from the module · price badge top right
Use case 08 · Outdoor & adventure
Three ranges, three days
Summit Line's trip page: one thin strip per day, each one panning the other way. A long view in very little height.
170px-high strips · 8 s · alternating directions · badge left centre · square corners
Use case 09 · Photographers
Portrait shots in landscape frames
Iris Vale keeps a tidy grid of equal frames. Tall photos start at the bottom and rise into view on hover.
Bottom to top · 4 s · light overlay with a magnifier icon · mono titles
Dolomites, 6am
Monday desk
Studio still
Use case 10 · Magazines & blogs
Seven ways to cross a river
The Weekend Review teases its long read with the whole article in a frame. Ten seconds to skim twelve minutes of reading.
Top to bottom · 10 s · hairline border from a 1px box shadow · "12 min read" badge bottom left
Hover the article
Scroll Image Demo
View Our Recent Work
Top To Bottom
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Bottom To Top
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
We Give Shine To Your House
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
DiviGrid
Our Creative Design
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Organic Food
Show Your Creative Photography Skill
Left To Right
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Right To Left
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Show Your Work In Attractive Way
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Some Of Our Best Work
Every scrolling frame above is one module
Scroll Image comes with DiviGrid, together with all our other Divi modules.