Flip Box (Divi)
A two-sided card for Divi 5. Thirteen transitions, four triggers, a 3D tilt, design presets and a full Design tab for each side. Hover the cards (or tab to them); click cards have a real button. Each card is labelled with the settings that make it.
1. 3D effects
Flip turns the card, Flip with depth lifts the content off the face, Cube turns a box, Fold away swings the front off its edge.
Effect: Flip
Flip
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Flip with depth
Flip with depth
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Cube
Cube
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Fold away
Fold away
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Doors open — left and right, or top and bottom — and the same effects with a springy easing.
Doors · left and right
Doors: left & right
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Doors · top and bottom
Doors: top & bottom
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Flip · easing springy, 900 ms
Springy flip
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Cube · strong in-out, 1400 ms
Slow cube
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
2. Reveal effects
The back is uncovered on top of the front. The circle grows from where the pointer came in.
Effect: Circle from the pointer · Preset: Gradient
Circle from the pointer
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Wipe · Preset: Gradient
Wipe
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Slide over · Preset: Gradient
Effect: Push · Preset: Gradient
Push
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
3. Fades
Cross-fades with a zoom or a blur — gentle, and the only thing reduced-motion visitors see for every effect.
Effect: Zoom in · Preset: Dark
Zoom in
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Zoom out · Preset: Dark
Zoom out
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Fade · Preset: Dark
Fade
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Effect: Blur · Preset: Dark
Blur
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
4. Directions
Cube in all four directions. Flip, Cube, Fold away, Wipe, Slide and Push take a direction.
Cube · Direction: To the left
To the left
Cube, one direction each.
You turned it to the left
The back sits on the next side of the box.
Cube · Direction: To the right
To the right
Cube, one direction each.
You turned it to the right
The back sits on the next side of the box.
Cube · Direction: Up
Up
Cube, one direction each.
You turned it up
The back sits on the next side of the box.
Cube · Direction: Down
Down
Cube, one direction each.
You turned it down
The back sits on the next side of the box.
5. Triggers
Hover with a 600 ms flip-back delay; click (a real button — Enter, Space, Escape to return); automatic every 2.5 s, staggered by 1.25 s; once when scrolled into view.
Flip On: Hover · delay 600 ms
Hover
Leave and it waits 600 ms before turning back.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Flip On: Click · Cube
Click or tap
Works on touch screens and with the keyboard.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Flip On: Automatically · every 2.5 s
Every 2.5 seconds
Pauses while the pointer or focus is on it.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Flip On: Scrolled into view · 0.4 s
Scrolled into view
Turns once, when half of it is visible.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
6. Design presets
A starting look for both sides; the Design tab overrides any of it. Photo, Glass and None are below.
Preset: Clean
Clean preset
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Preset: Gradient
Gradient preset
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Preset: Dark
Dark preset
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Preset: Outline
Outline preset
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Photo uses a background image on each side (Front Box → Background); Glass is made for dark sections; None starts from nothing.
Preset: Photo · background images
Harbor Hoodie
Warm, soft, made to last
Brushed inside, recycled polyester outside. Free returns for 60 days.
Preset: Glass
Glass preset
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Preset: None · Wipe
None — from scratch
No background, no shadow: the card takes the column’s look.
Your own look
Style every part in the Design tab.
7. Content
Image media with two buttons; a number with a feature list and dividers; a cube with a badge, eyebrow, subtitle, list and two buttons.
Media: Image · round · 2 buttons
Maya Okafor
Say hello to Maya
Twelve years designing products people love to use. Based in Lisbon.
Media: Number · list with dividers · Slide up
Badge · eyebrow · subtitle · list · Cube up
Lisbon & Sintra
Tiled streets, palaces and the Atlantic.
From €389
- Return flights
- Boutique hotel in Alfama
- Sintra day trip
- Airport transfers
8. Shapes & sizes
Circle shape; circle with a zoom; aspect ratio 4:5; aspect ratio 16:9 — the card keeps its proportions at every width.
Shape: Circle · Flip
Circle
A perfect circle.
Round and round
Both sides stay round.
Shape: Circle · Zoom in
Circle zoom
Zoomed in
Zoom in on a circle.
Aspect ratio 4:5 · Push up
Portrait 4:5
Aspect ratio 4:5.
Tall card
Same shape on every screen.
Aspect ratio 16:9 · Wipe right
Wide 16:9
Wide card
Aspect ratio 16:9.
9. 3D tilt & glare
The card leans toward the pointer with a glare; max angle 8°, 15°, and 20° with no glare. Off on touch screens and for reduced motion.
Tilt · 8° · glare
Tilt 8°
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Tilt · 15° · scale 1.06 · glare .35
Tilt 15° · scale 1.06
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
Tilt · 20° · no glare
Tilt 20°, no glare
Help from people who know the product inside out.
A real person, in minutes
Chat, email or a call — whichever suits you. Median first reply: 4 minutes.
10. Product drops
A finished shop design: Photo preset with product photos, a price badge, a push effect and a Design-tab button.
Studio Tee
$29
- Organic cotton
- Printed in Porto
- Free returns
Ninja Tee
$34
- Organic cotton
- Printed in Porto
- Free returns
Summit Hoodie
$69
- Organic cotton
- Printed in Porto
- Free returns
11. Team
Doors open on a tilted card; each back has two buttons.
Maya Okafor
Hi, I’m Maya
Design lead. Ask me about process, people and coffee.
Priya Raman
Hi, I’m Priya
Product lead. Ask me about process, people and coffee.
Lena Fischer
Hi, I’m Lena
Marketing lead. Ask me about process, people and coffee.
Tom Becker
Hi, I’m Tom
Support lead. Ask me about process, people and coffee.
12. Pricing on a click
Click cubes: the price in front, what’s included on the back. Keyboard: Tab to the card, Enter to turn, Escape to go back.
per month
For side projects. Click to see more.
Starter includes
- 3 projects
- 5 GB storage
- Email support
per month
For growing teams. Click to see more.
Pro includes
- Unlimited projects
- 100 GB storage
- Priority support
- Analytics
per month
For the whole company. Click to see more.
Business includes
- Everything in Pro
- SSO & audit log
- Dedicated manager