Flipping Boxes

Preview:  https://demo.wocode.com/flipping-boxes

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site and place it where you would like the boxes to appear.
• In most cases, the widget can be left at the default full width. However, if you need to resize it, the width may be adjusted with the blue grab handle in the bottom right.
• Height is adjusted in the Design section of the widget options.
• This widget is intended to display boxes in a horizontal format within a row. If you would like to create a gallery style layout, place multiple widgets in stacked rows.

CONTENT SETTINGS

• Unique ID: If you use multiple widgets on the same page, be sure to use unique IDs for each widget.
• Column Settings: This opens a menu with additional options:
  • Columns: This sets the number of columns (desktop).
  • Mobile Columns: This sets the number of columns to be displayed on mobile.
• Boxes / List Items: This is where you will add all of the content that displays on the front and back side of the boxes.
  • Front Side: The front side content includes image, title text and description text.
  • Back Side: The back side content includes image, title text and description text. It also includes a linked button. The button can be enabled or disabled using the “Button” toggle.
  • Enter button text and button link using the Button Link and Button Label fields in the Back Side options.
• Animation Settings: This opens a new menu with additional options:
  • Animation Type: Use this to choose from 4 different animation styles.
  • Animation Speed: Sets the amount of time for the transition duration (front transition to back and vice versa)

DESIGN SETTINGS

Box Height Settings:

• Height: This sets the height of all flipping boxes. Use this setting to contain all content within the boxes.
• Box Horizontal Spacing / Box Vertical Spacing: These settings set the spacing between the boxes, and above/below the boxes, respectively.

Front Box Styling / Back Box Styling:

There are numerous options that allow you to style all of the content on each side of the boxes. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, we will share a few notes:

• The background color of the boxes may be set with the Background option.
• There are separate Title and Description text styling options for both front and back sides. This means that text may be different on the front and back if desired.
• Horizontal Inner Padding / Vertical Inner Padding: These values set the padding for the content within the boxes. Note that these padding options differ from the spacing options in the Box Height section. These inner padding options allow you to size content within the boxes. Low values make content appear larger. For full frame images, use padding values of zero.

TIPS AND NOTES

• Image shape: it is very important to consider the shapes of the images you use in the boxes. For a consistent look, use images of the same shape on the front side of all cards.
• Content Positioning: You may note that even when using the same shape images on front and back, that the image positions are different. For example, the images on the back of your cards are higher than they are on the front. This is caused when a button is used on the back of the card. The widget automatically centers all of the content on both the front and the back, causing a shift created by the space added from the button.
• Creating Consistent Content Positioning: Considering the content shift explained in the point above, you may make adjustments to content in order to keep content consistent from front to back. There are a few options:
  • No button: You may consider not using a button on the back side. This will keep content in the same place (assuming the same amount of text is used)
  • Adjusting content to match: if you wish to use a button but want to keep content consistent front to back, you may also consider adjusting the amount of text. For example, using less text on the back than the front may account for the space added by the button.