---
title: "How to Add a Vertical Flip Box in WordPress?"
url: https://nexterwp.com/docs/add-a-vertical-flip-box-in-wordpress/
date: 2024-12-09
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Flip-Box-in-WordPress_-1024x519.jpg
word_count: 305
---

# How to Add a Vertical Flip Box in WordPress?

## Key Takeaways

- Flipbox block in Nexter Blocks adds a Vertical Flip Type for top-to-bottom cards, and the free Freemium edition includes Horizontal and Vertical flip plus Grid/Carousel layouts, Icon/Image/SVG front content.
- Flipbox card rotates around its horizontal axis on hover, with the top face lifting to reveal the bottom face, while icon type, back button, and background behave the same as horizontal flip.
- Vertical and Horizontal are the only flip directions, and a fixed Box Height helps when front and back content differ in length and the box resizes during the flip.

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](https://nexterwp.com/docs/add-a-flip-box-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-flipbox/)

## 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.

![A vertical flip box at rest, front side showing](https://nexterwp.com/wp-content/uploads/2026/09/flipbox-vertical-fe-front.webp)

![The same box flipped vertically to show its back side](https://nexterwp.com/wp-content/uploads/2026/09/flipbox-vertical-fe-back.webp)

## 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.

## Related Docs

- [Flipbox feature guide](https://nexterwp.com/docs/add-a-flip-box-in-wordpress/)- [Flip box carousel](https://nexterwp.com/docs/create-a-flip-box-carousel-in-wordpress/)- [Animated Service Boxes](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)