Photo Stack (Gutenberg)
Arrange photos like a scattered pile for a personal feel.
Overlapping photos placed freely, each with its own position, size, rotation and depth, with idle motion, hover effects, fan-out, mouse parallax, frames and captions.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Photo Stack (Gutenberg) — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
General
| Setting | What you can set |
|---|---|
| Idle motion | Text |
Stage
| Setting | What you can set |
|---|---|
| Width (px) | 200–1600 |
| Shape | 6/5, 1/1, 4/3, 3/2, 16/9 or 4/5 |
| Default photo width (% of the stage) | 10–100 |
| Position | left, center or right |
Motion
| Setting | What you can set |
|---|---|
| One cycle (seconds) | 1–90 |
| Stagger the photos | On / off |
| On hover | none, straighten, fly sm, fly, scale sm, scale, scale inverse sm or tilt |
| Bring the hovered photo to the front | On / off |
| Fan out on hover | On / off |
| Mouse parallax | On / off |
| Follow the pointer over | stage or window |
Frames and captions
| Setting | What you can set |
|---|---|
| Captions | below, overlay, hover or none |
| Frame | polaroid, border or none |
| Corners (px) | 0–40 |
| Shadow | On / off |
| Frame | Colour |
| Captions | Colour |
| Thin border | Colour |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- Photos are placed with sliders, not by dragging on the canvas.
- Fan-out needs a pointer; on touch screens the stack stays put (taps follow photo links).
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Works well with: Carousel, Device Scroll, Filterable Gallery.