Flip Box

Create beautifully animated content that flips on hover with the Gutenberg Flipbox block. You can display icons and images with additional content on the front and back sides of a box.

How To Add The Flip Box Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Flip Box or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get the below design-

How To Configure The Flipbox Block #

To configure the content of your Flipbox block, switch to the ‘Content’ tab.

General #

Number of Flip Boxes – Select the number of flip boxes to be displayed.

Height – Set the height of the flip-box from here.

Flip Style – Choose the direction in which the flip box block should flip when hovered. Following options are available for this setting:

1. 1.Left To Right
2. 2.Bottom To Top
3. 3.Right To Left
4. 4.Top To Bottom.

Transition Speed – Select the speed with which the flip-box flips.

Select Front for settings of the front of the box and Back for settings of the back of the box.

Toggle Buttons (Front) – Display or Hide Icon, Title, Subtitle by using the provided toggle buttons when Front is selected.

Toggle Buttons (Back) – Display or Hide Icon, Title, Subtitle, and back button by using the provided toggle buttons when Back is selected.

Front Content Settings #

Here you will find 3 separate settings for all 3 boxes – FlipBox 1 Settings, FlipBox 2 Settings, and FlipBox 3 Settings depending on how many boxes are currently displayed.

These settings contain the following options:

Title – Setting a title to display on the front of the box.

Content – Setting the content to be displayed on the front of the box.

Back Content Settings #

This option appears when the ‘Back’ setting is selected in General Tab.

Here you will find 3 separate settings for all 3 boxes – FlipBox 1 Settings, FlipBox 2 Settings, and FlipBox 3 Settings depending on how many boxes are currently displayed.

These settings contain the following options:

Title – Setting a title to display on the back of the box.

Content – Setting the content to be displayed on the back of the box.

Front Icon Settings #

Here you will find 3 separate settings for all 3 boxes named Flip Box 1, FlipBox 2 and Flip Box 3 depending on how many boxes are currently displayed. Select Icon for 3 boxes separately.

Icon Size – Increase or Decrease the size of icons.

Icon Color – Set the color for icons from here.

Back Icon Settings #

Here you will find 3 separate settings for all 3 boxes named Flip Box 1, FlipBox 2 and Flip Box 3 depending on how many boxes are currently displayed. Select Icon for 3 boxes separately.

Icon Size – Increase or Decrease the size of icons.

Icon Color – Set the color for icons from here.

Back Button Settings #

This option appears when the Back setting is selected in General Tab.

Border Radius – Set the border radius of the back button for corner roundness.

Horizontal Padding – Set the horizontal spacing for the button.

Vertical Padding – Set the vertical spacing for the button.

Text Color – Choose the normal or hover option to set the color of the text inside the button.

Background Type – This dropdown has two options:

1. 1.Color
2. 2.Gradient

Background Image #

Select a background image to be displayed in the Front or Back depending on which setting is selected in General Options. You can also set opacity from here.

How To Style The Flip Box Block #

Switch to the ‘Style’ tab to customize ‘Typography’, ‘Spacing’, ‘Border’, and ‘Color Setting’ for the block.

Front Color Settings #

Under this tab, color options are available for Text and Background. You can also set opacity from here.

Back Color Settings #

This option appears when the Back setting is selected in General Tab.

Under this tab, color options are available for Text and Background. You can also set opacity from here.

Front Title Typography #

Under this tab, options for font family, font size, font-weight, and line height are available for the Front Title separately.

Back Title Typography #

This option appears when the Back setting is selected in General Tab.

Under this tab, options for font family, font size, font-weight, and line height are available for the Back Title separately.

Front Subtitle Typography #

Under this tab, options for font family, font size, font-weight, and line height are available for the Front Subtitle separately.

Back Subtitle Typography #

This option appears when the Back setting is selected in General Tab.

Under this tab, options for font family, font size, font-weight, and line height are available for the Back Subtitle separately.

Back Button Typography #

This option appears when the Back setting is selected in General Tab.

Under this tab, options for font family, font size, font-weight, and line height are available for the Back Button separately.

Spacing #

The Spacing tab offer options to customize the spacing for Top, Bottom, Left, and Right.

Margin – Set the Top and Bottom margins for the block.

Padding – This option allows you to select the Front or Back tab and set the values of Top, Bottom, Left, and Right padding for the Front and Back sides of the box.

Border #

Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it

Border Width – Set the width of the border from here. This option appears if you set the border style.

Border Radius – You can give border-radius to the boxes from here.

Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.