Some comparisons run down the frame rather than across it — a roof, a facade, a long before-and-after of a room shot from the doorway.
Vertical mode wipes the before image from top to bottom instead of left to right.
For every Before After setting in one place, see the Before After feature guide.
Before You Start
- Edition: Pro — the Before After block needs Nexter Blocks Pro.
- Block to enable: Before After, switched on under Nexter > Blocks in your WordPress dashboard.
Steps
- Add the Before After block and set Mode to Vertical.
- Set both Select Before Image and Select After Image.
- Open Separator Option and switch Separator Line on — vertical mode needs this, see the note below.
- Optionally set a Separator Icon and a start position.
Vertical mode needs a separator to work. Measured on published pages: with Separator Line off and no Separator Icon — the defaults for a new block — the vertical slider stays frozen at its start position and the browser console reports a script error. Switch Separator Line on, or set a Separator Icon, and it tracks the pointer correctly. This is a known bug and has been reported to the development team.
How It Behaves
- Once a separator line or icon is present, the before image is revealed from the top down as the pointer moves — measured on a published page, the before panel went from 120px tall near the top to 680px near the bottom.
- The comparison follows vertical pointer movement, not horizontal — moving sideways across a vertical block does nothing.
- Everything else behaves as in Horizontal mode: the same image pair, the same labels, the same On Mouse Hover behaviour.
Limitations
- A vertical block with no separator line and no separator icon does not move at all — measured, it stays at its start position and the browser console reports a script error. Reported to the development team; switching the separator line on is the workaround.
- Horizontal mode is not affected by this and works with no separator at all.
- Give both images the same dimensions. Measured with a 1200×800 before and a 900×900 after, the widget takes the after image’s size, so a mismatch crops or letterboxes the comparison.
- Both images are required. With only one set, the block prints “Please select a Before images & After Image” on the page instead of the comparison — measured on a published page.
Troubleshooting
The vertical slider is stuck and will not move
Switch Separator Line on under Separator Option, or set a Separator Icon. Measured: with neither, a vertical block never moves; with either, it tracks the pointer normally.
It only responds when I move the mouse up and down
That is correct for this mode — vertical mode follows vertical movement. Use Horizontal mode if you want a left-to-right wipe.
I see a script error in the browser console
That is the same known issue — it appears when a vertical block has no separator icon. Setting a Separator Icon clears it, and it has been reported to the development team.
