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.
Last updated
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.
Last updated
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.
By default, you'll get the below design-
To configure the content of your Flipbox block, switch to the ‘Content’ tab.
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:
Left To Right
Bottom To Top
Right To Left
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.
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.
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.
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.
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.
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:
Color
Gradient
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.
Switch to the ‘Style’ tab to customize 'Typography', 'Spacing', 'Border', and 'Color Setting' for the block.
Under this tab, color options are available for Text and Background. You can also set opacity from here.
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.
Under this tab, options for font family, font size, font-weight, and line height are available for the Front Title separately.
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.
Under this tab, options for font family, font size, font-weight, and line height are available for the Front Subtitle separately.
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.
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.
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 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.
