Card Flip Widget

A custom widget with many adjustable content and design features. This widget uses an animated 2-sided card to display an image or icon as well as Title and Description text, along with an optional Link.

To add a Card Flip Widget to a Page:

  1. Open the Widgets menu
  2. Search for "Card Flip"
  3. Drag and Drop the Card Flip Widget on to the page
  4. Add content and adjust features as desired.
    • Add cards as needed under the Card List
    • The Content includes Image or Icon, front/back Title and Description, and optional Link. 

Optionally, a user can add a "Designed Section" that already contains a Flip Card Widget.

By Default the card will show an Image on the Front, but it can be switched to instead show icons. The Front Settings contains an Option to "Show Image," when disabled, it will display the option to "Show Icon." It is not possible to show both (it is one or the other, or neither).

If placing more than one Card Flip Widget on the same page, be sure to set each of the Widgets' Unique IDs to be different.


Content Options

In addition to adjusting the number of Cards and their content, there are also several adjustable content options.

#

Title

Settings

1.

Front Settings

Show Header
Show Body
Show Image/Icon
Show Front Title
Show Front Description

2.

Back Settings

Show Link
Select Link Type (Standard/Button)
Show Back Title
Show Back Description

3.

General Settings (Animation Settings)

Flip Direction
Flip Speed
Perspective Size

4.

Responsive Settings (# of Columns)

Desktop View
Tablet View
Mobile View

Design Options

There are many options that may vary based on content settings. Most design options are standard items you may find with other widgets like adjust Font Size and Color etc.

#

Title

Settings

1.

Card

Rounded Corners
Space Between Cards

2.

Front

Header: Background and Height
Body: Background, Padding, Title and Description
Description: Background, Padding, Title and Description

3.

Back

Background

Padding

Title and Description

4.

Link Styling (If displaying a link)

Background

Link Position

Text Style

Padding and Borders

Text and Background on Hover


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.