FlipBox
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.
General
Number of Flip Boxes - Select 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 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 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 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 button.
Background Type - This dropdown has two options:
Color
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.
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 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.
Spacing
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 front and back side 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.
Last updated
