Effects · Gutenberg
Vertical Scroll Image block for WordPress
Display a tall or wide image in a fixed-height container. Hover to scroll through the full image vertically or horizontally. Perfect for showcasing app screenshots, infographics, or long designs.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display a tall or wide image in a fixed-height container. Hover to scroll through the full image vertically or horizontally. Perfect for showcasing app screenshots, infographics, or long designs.
Inspector panels on this block: Image, Scroll Behavior. Those titles come from index.js, not from a shared template.
Behavior controls: “Scroll Direction” options: Vertical ↕, Horizontal ↔; “Trigger” options: Hover, Auto (loop); “Style — Shadow” options: None, Small, Medium, Large.
Where to find it
Gutenberg inserter → Effects → search “Vertical Scroll Image” (block name `blockenberg/vertical-scroll-image` in block.json). Style it in the sidebar after insert.
How to use Vertical Scroll Image block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Vertical Scroll Image”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Image. Set “Show Caption”, “Show Scroll Hint Label”, “Scroll Direction”, “Trigger”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Show Scroll Hint Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Scroll Direction | Select control; the chosen value is saved on the block. Options: Vertical ↕; Horizontal ↔. block.json default: vertical. Saved as `scrollDirection`. |
| Trigger | Select control; the chosen value is saved on the block. Options: Hover; Auto (loop). block.json default: hover. Saved as `scrollTrigger`. |
| Scroll Duration (s) | Numeric range control in the inspector. Range 1–15. block.json default: 4. Saved as `scrollDuration`. |
| Container Height (px) | Numeric range control in the inspector. Range 150–800. block.json default: 420. Saved as `containerHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Style — Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: md. Saved as `shadowSize`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1400. block.json default: 800. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–150. block.json default: 48. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–150. block.json default: 48. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. block.json default: #f9fafb. Saved as `bgColor`. |
| Image Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Caption Text | Color control in the inspector. block.json default: #6b7280. Saved as `captionColor`. |
| Label Text | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Display a tall or wide image in a fixed-height container. Hover to scroll through the full image vertically or horizontally. Perfect for showcasing app screenshots, infographics, or long designs — that is the job of Vertical Scroll Image, not a generic content block.
- Use it when you need the editor control labeled “Show Caption”, which exists on this block’s inspector.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Vertical Scroll Image block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Vertical Scroll Image”. It sits under Effects. After insert, open Image and set “Show Caption”, “Show Scroll Hint Label”, “Scroll Direction”, “Trigger”.
What makes Vertical Scroll Image different from other Blockenberg blocks?
Display a tall or wide image in a fixed-height container. Hover to scroll through the full image vertically or horizontally. Perfect for showcasing app screenshots, infographics, or long designs. Inspector labels on this block include “Show Caption”, “Show Scroll Hint Label”, “Scroll Direction”, “Trigger”.
Is the Vertical Scroll Image Gutenberg block free?
Yes. Vertical Scroll Image ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Vertical Scroll Image to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Scroll Behavior).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Vertical Scroll Image from the Gutenberg inserter.