See the Flip Box block live on the demo site (opens in a new tab)

Adding the block#

1. Open a page or post in the block editor and click the “+” (Block Inserter) button.
2. Search for “Flip Box” and click it.
3. The block is added with sample front and back content. Select it to open its settings in the right sidebar.

Settings overview#

All settings are in the block sidebar, split into three tabs:

Tab	What you control there
General	Animation, front and back text, icons or images, and the button
Design	Colors, typography, icon style, alignment, borders, and padding for each side
Advanced	Background, spacing, transform, and extra CSS classes. See Common Advanced Settings

Many panels have a Front / Back switch at the top. Choose a side first, then change its settings. Each side is styled separately.

General tab#

Flip Box Layout#

Setting	Description
Animation Type	Flip turns the card over like a playing card. 3D Cube rotates the box like the side of a cube.
Flip Direction	Direction of the flip: Top, Bottom, Left, Right, Diagonal Left, Diagonal Right, Diagonal Left Inverted, Diagonal Right Inverted.
3D Depth Effect	Adds perspective depth so the front content looks like it floats above the card during the flip.
Shake On Flip	Adds a small shake when the flip finishes.
Flip Speed (in ms)	How long the flip takes, in milliseconds. Default is 700. A lower value is faster.

Flip Box Content#

Choose Front or Back, then fill in:

Setting	Description
Title	Heading text for the selected side.
Content	Body text for the selected side.

Flip Box Elements#

Setting	Description
Element Type	What to show above or next to the title: None, Icon, or Image. Set it separately for Front and Back.
Icon	Shown when Element Type is Icon. Click the icon to open the icon library and search for one.
Image	Shown when Element Type is Image. Upload or pick an image from the Media Library.
Show Button	(Back side) Adds a call-to-action button to the back card.
Button Text / Button Url	Label and link for the button.
Button Icon, Icon Position, Show Icon On Hover	Adds an icon to the button, places it Before or After the text, and can show it only on hover.

Design tab#

Global Styling#

Styles that apply to both sides at once.

Setting	Description
Content Width	Maximum width of the text area inside the card (px, %, em, rem, vw…).
Color → Title / Content	Default title and content colors for both sides.
Typography	Font family, size, appearance (weight/style), letter spacing, decoration, letter case, and line height. Use the Title / Content switch to pick which text you are styling.

FlipBox Style#

Switch between Front and Back to style each card on its own.

Setting	Description
Heading Level	HTML tag for the title (H1–H6). Choose a level that fits your page structure, which helps SEO.
Title Color / Content Color	Text colors for this side. These override Global Styling.
Background Color	Card background. Use a solid color or a gradient.
Typography	Font settings for the title or content of this side.

FlipBox Image/Icon Style#

Setting	Description
Color	Icon color.
Icon Size	Icon size.
Image Width	Width of the image, when Element Type is Image.
Icon Placement	Where the icon or image sits next to the text: Top, Left, or Right.
Style Icon	Turn this on to put the icon inside a shape.
Display Shape Border / Shape	Choose a Square, Circle, or Hexagon shape, with an optional border.
Shape Background Color / Shape Border Color	Colors of the shape behind the icon.

FlipBox Content Alignment#

Setting	Description
Content Alignment	Horizontal text alignment: left, center, or right.
Vertical Alignment	Positions the content at the top, center, or bottom of the card.

FlipBox Border#

Setting	Description
Border	Border width, style, and color. Set all sides together or each side separately.
Radius	Rounds the card corners.

FlipBox Padding#

Setting	Description
Padding	Space between the card edge and its content, for the selected side.

Advanced tab#

Contains the shared Background, Spacing, Transform, and Additional CSS Class(es) panels. See Common Advanced Settings.

Tips#

• Keep the front short (icon and title) and put the details and button on the back.
• Use the same Heading Level on both sides so your heading structure stays consistent.
• Both sides automatically use the height of the taller side, so the box keeps its size during the flip.
• The flip is triggered by hover. On phones and tablets, most browsers trigger it when the visitor taps the box.