Native Divi 5 ModuleFree

Divi Flip Card

Reveal extra content with an interactive flip.

Why use the Divi Flip Card module?

A card can only say one thing at a time. The Divi Flip Card module gives the same square two sides, so the short version and the full version share one spot on the page.

That card is the live module. Hover it, or tab to it, and it turns over.

Hover this card

TRY IT

Hover this card

TRY IT

That is the whole idea. One square, two faces, and a turn between them. Every card further down this page is the same module with different settings.

What you get out of it

Two messages, one spaceA headline that pulls people in, and the detail behind it, without a second section.Ten animations, not oneFlip, diagonal, slide, push, fade, zoom in, zoom out, rotate 3D, open up and shake.Both faces are yoursIcon or image, title, subtitle and description on the front and on the back.In the free plugin and in ProThe same module ships in Divi Torque Lite and Divi Torque Pro. Native on the Divi 5 engine, not a Divi 4 shim.

Everything the Divi Flip Card module does

Every option below ships in the free plugin, and in Divi Torque Pro.

Ten animation types, from flip to rotate 3DFour directions for flip, slide and pushOptional 3D depth on the flip animationRotate 3D runs vertically or horizontallyIcon, image, or no media on either faceTitle, subtitle and description per faceOptional button on the back faceColor, gradient or image background per faceIcon color, size, background and radiusCard radius and box shadowAnimation duration from 0 to 3000msCard height set per breakpointHorizontal and vertical alignment per faceSeparate padding for each face and its contentCards are focusable, so they turn on keyboard focus

See the Divi Flip Card in action

Every card below is the live module, not a picture of one. Hover any card, or tab to it, and it turns over.

Two faces, one footprint

LAYOUT

Two faces, one footprint

LAYOUT

The front carries the hook. The back carries the detail. Both sit in the same square, so the long version never costs you a second section.

Get the free plugin

Every layer is yours

DESIGN

Every layer is yours

DESIGN

Set a color, a gradient, or a photograph on each face on its own. The front and the back never have to look like the same card.

Get the free plugin

Ten different ways to turn

MOTION

Ten different ways to turn

MOTION

Flip, diagonal, slide, push, fade, zoom in, zoom out, rotate 3D, open up and shake. Pick the one that suits the page, then set how long it takes.

Get the free plugin

Ten animations, the first five

Flip, diagonal, rotate 3D, open up and push. Every card here is the same module with one setting changed.

Flip

01

Turns on its own axis.

Flip

01

The card turns on its axis like a page. Switch on 3D depth and the turn gains real perspective.

Diagonal

02

Sweeps in from a corner.

Diagonal

02

The back face sweeps in from a corner. Choose the left corner or the right one.

Rotate 3D

03

Turns like a display cube.

Rotate 3D

03

The card turns like a display cube, vertically or horizontally, with your own color on the flank.

Open Up

04

The front lifts like a lid.

Open Up

04

The front lifts away like a lid, and the back is already waiting underneath it.

Push

05

Pushes the front aside.

Push

05

The back face pushes the front out of the frame. It can arrive from any of the four edges.

Ten animations, the last five

Slide, fade, zoom in, zoom out and shake. That is the full set of ten.

Slide

06

Slides across the front.

Slide

06

The back face slides across and covers the front. Four entry edges, the same as push.

Fade

07

Dissolves into the back.

Fade

07

The front dissolves into the back. The quietest of the ten, and the safest on a busy page.

Zoom In

08

Grows from the middle.

Zoom In

08

The back face grows out of the middle of the card until it fills the frame.

Zoom Out

09

Shrinks toward the middle.

Zoom Out

09

The front shrinks away toward the middle and leaves the back standing behind it.

Shake

10

Shakes once, then settles.

Shake

10

The card shakes once, then settles on the back face. Worth using sparingly.

Product Designer

DESIGN TEAM

Product Designer

DESIGN TEAM

Team pages are the classic use. The photograph earns the attention, and the biography arrives without sending anyone to a second page.

Lead Engineer

PLATFORM

Lead Engineer

PLATFORM

Every field on the back is separate from the front, so a long biography never stretches the card out of line with its neighbours.

Support Lead

CUSTOMER TEAM

Support Lead

CUSTOMER TEAM

Cards hold one fixed height, so a row of profiles stays even no matter how much text sits on the back of each one.

Menu and product cards

A photograph does the selling. The detail waits on the back, in the same square.

Seasonal figs

STARTERS

Seasonal figs

STARTERS

Menu cards are a natural fit. The photograph sells the dish, and the description arrives on the back without crowding the grid.

Cake and coffee

PASTRY

Cake and coffee

PASTRY

The back face takes a title, a subtitle, a description and a button, so a full listing fits inside the same square.

Fresh limes

BAR

Fresh limes

BAR

Every card holds one fixed height, so a menu grid stays even however long the descriptions run.

Table grapes

SIDES

Table grapes

SIDES

Give each card its own animation, or keep one across the whole menu for a calmer page.

Icon cards that end in a button

The back face can carry a call to action. These fronts use an icon chip, built from the icon background and radius settings.

Icon, image, or nothing

MEDIA

Each face takes its own media setting.

Icon, image, or nothing

MEDIA

Give the icon its own color, size, background and radius, and you get a chip like the one on the front of this card.

Get the free plugin

Set the pace

TIMING

Every card decides how fast it turns.

Set the pace

TIMING

Animation duration runs from 0 to 3000 milliseconds. Slow it down for a hero card, speed it up for a dense grid.

Get the free plugin

Reachable by keyboard

ACCESS

Not a mouse-only trick.

Reachable by keyboard

ACCESS

The card is focusable, so it turns on keyboard focus as well as on hover. Nothing on the back is out of reach.

Get the free plugin

One card, four directions

The same flip animation with the direction setting changed. Slide and push take the same four edges.