A flip box reveals a second layer of content on hover, without adding a click or a popup.
The Flipbox block builds a front face and a back face into one card, useful for team bios, feature cards, and portfolio pieces.
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, then choose Grid or Carousel from Select Layout.
- Pick Horizontal or Vertical from Flip Type.
- In the Front Side tab, set an Icon Type — None, Icon, Image or SVG — and a Main Title.
- In the Back Side tab, add a Description and, optionally, enable Button for a call to action.
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.
How It Behaves
| Front content | Confirmed on the live front end |
|---|---|
| Icon | Renders a font icon from the icon library — measured. |
| Image | Renders an <img> in place of the icon — measured. |
| SVG | Renders an inline animated SVG object that draws in on hover. |
| Back Button | Only appears when the Button toggle is enabled — measured on, and confirmed absent when off. |
Grid shows every card at once; Carousel renders the same front/back cards inside a Splide slider with its own arrows and dots, measured with a 5-card set.
Limitations
- No fifth icon-type option beyond None, Icon, Image and SVG.
- 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.
- Carousel-only controls (Pause On Hover, Center Mode) need Pro; the layout and flip mechanics themselves do not.
Troubleshooting
The card doesn’t flip on hover
Confirm the Flipbox block is switched on under Nexter > Blocks, and that the page isn’t caching an old render — hard refresh after any content change.
The box resizes and pushes content below it when it flips
Set a fixed value in Box Height so the front and back faces share one height.
My back button isn’t showing
Enable the Button toggle in the Back Side tab — it’s off by default.
