Skip to content
StoreDocsSupport
Get Divi Torque

Advanced Flip Card

Advanced Flip Card shows one side of a card and turns to the other side when a visitor hovers over it. Its one job is to fit two sets of content, such as a summary and the details, into a single card.

How to add the Advanced Flip Card module

  1. Open the Visual Builder and add a section and row.
  2. Search for "Advanced Flip Card" and add the module.
  3. Fill in the Front Side and Back Side groups, then pick an Animation Type in the Settings group.

Content

Front Side group

  • Media Type: None, Icon (default) or Image.
  • Select Icon: Shown when Media Type is Icon.
  • Upload Image and Image Alt Text: Shown when Media Type is Image.
  • Front Title, Front Sub Title and Front Description: The front text. The description is a rich text field.

Back Side group

  • Media Type: None, Icon (default) or Image.
  • Select Icon: Shown when Media Type is Icon.
  • Upload Image and Image Alt Text: Shown when Media Type is Image.
  • Back Title, Back Sub Title and Back Description: The back text.
  • Use Button: Off by default. Adds a button to the back side.
  • Button Text: Default "Click Here". Shown when Use Button is on.
  • Button link: The link URL and target for the button.

Settings group

  • Animation Type: Flip (default), Flip Diagonal, Flip Shake, Push, Slide, Fade, Zoom In, Zoom Out, Rotate 3D or Open Up.
  • Animation Direction: Up, Right (default), Down or Left. Shown for Flip, Push and Slide.
  • Animation Direction (diagonal): Right (default) or Left. Shown for Flip Diagonal.
  • Animation Direction (Rotate 3D): Vertical or Horizontal (default). Shown for Rotate 3D.
  • Divider Flank Color: Default #dddddd. Shown for Rotate 3D.
  • Use 3d Animation: Off by default. Shown for Flip.
  • Animation Duration: Default 600ms.
  • Height: Height of the card. Default 300px.

Design

Front Side and Back Side groups

Each group has the same settings.

  • Content Alignment: Left, Center (default) or Right.
  • Content Vertical Alignment: Start, Center (default) or End.
  • Padding: Default 30px on all sides.
  • Content Padding: Default 0px on all sides.
  • Background: Default #efefef.

Front Media and Back Media groups

  • Position: Left, Center (default) or Right.
  • Padding: Default 0px on all sides. Shown for images.
  • Icon Color: Shown for icons.
  • Icon Size: Default 60px.
  • Height and Width: Size of the image.
  • Background and Border: Options for the media element.

Text groups

Front Title, Front Subtitle, Front Description, Back Title, Back Subtitle and Back Description each have font settings. The subtitle and description groups also have a Spacing Top setting, default 0px.

Button group

  • Spacing Top: Default 15px.
  • Button options: Divi's standard button settings.

Border and Box Shadow groups

  • Border: Border and radius options for the card. Default width is 0px.
  • Box Shadow: Standard box shadow options.

FAQ

How does the card flip?

The flip is driven by CSS hover selectors, and the module renders the front and back side together in the page.

Does Advanced Flip Card work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module with the same name. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

Why can't I see the Animation Direction setting?

Direction and 3D settings depend on the Animation Type. For example, Use 3d Animation appears only for Flip and Divider Flank Color only for Rotate 3D.