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.

    Do not just click on the widget. This will place the widget in a random location. Be sure to drag it to the desired location. 

  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. When the Show Image option is selected, Show Icon will not be visible.

When disabled, it will display the option to Show Icon.


It is not possible to display both an image and an icon.


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.


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.


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.