A left-to-right flip suits most cards, but a question-and-answer or before-and-after pairing often reads better rotating top to bottom.
Flip Type in the Flipbox block includes a Vertical option for exactly that.
For every Flipbox setting in one place, see the Flipbox feature guide.
Before You Start
- Edition: Freemium — Grid/Carousel layouts, Horizontal/Vertical flip, and Icon/Image/SVG front content all work in the free Nexter Blocks. Pause On Hover and Center Mode in the carousel need Nexter Blocks Pro.
- Block to enable: Flipbox, switched on under Nexter > Blocks in your WordPress dashboard.
Steps
- Add the Flipbox block and choose a layout from Select Layout.
- From Flip Type, select Vertical.
- Add front and back content as usual, then check the card on the page.
How It Behaves
- The card rotates around its horizontal axis on hover, top face lifting to reveal the bottom face — measured on Docker QA, front and back both rendered correctly.
- Everything else about the card — icon type, back button, background — behaves identically to the horizontal flip type; only the rotation axis changes.
Limitations
- Vertical and Horizontal are the only two flip directions; there is no diagonal or 3D-corner flip.
- Front and back content that differ a lot in length can make the box resize when it flips, shifting whatever sits below it. Set a fixed Box Height when that happens.
Troubleshooting
The flip direction didn’t change after I selected Vertical
Confirm you set Flip Type to Vertical on the specific card block you’re viewing, then hard refresh the front end — some browsers cache the flip transform.
The card jumps instead of rotating smoothly
Set a fixed Box Height if front and back content differ significantly in length; a resizing box during the flip can look like a jump.
