The Flip Box widget lets you design animated boxes that flip to show the reverse side when a visitor hovers over them.
Adding Flip Box widget
- Find the Flip Box widget under the Elementos section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
Content tab
Front
This tab manages the content displayed on the front side of the flip box.
-
Graphic Element: You can select None, Image, or Icon to include a graphical element on the front of the flip box.
If an Image graphic element is chosen, select or upload an image and adjust its size from thumbnail to full, or specify a custom size.
If an Icon is chosen, pick an icon from the Font Awesome library and select the View: Default, Stacked, or Framed. For a Stacked or Framed view, choose the Shape: Circle or Square. - Title & Description: Select the title and description to display on the front of the flip box.
Back
This tab manages the content displayed on the back side of the flip box.
- Title & Description: Select the title and description to display on the back of the flip box.
- Button Text: Specify the text displayed inside the button.
- Link: Define the URL the button points to, choose whether to open the link in a new tab, and set custom attributes for the link element.
- Background: Choose the background for the back side of the flip box.
Settings
- Height: Adjust the height of the flip box.
- Border Radius: Set the border radius of the flip box to round its corners.
- Flip Effect: Choose from flip effects such as Flip, Slide, Push, Zoom in, Zoom out, or Fade.
- Flip Direction: Determine whether the flip box flips right, left, up, or down.
- 3D Depth: Activate the 3D animation effect for the flip box.
Style tab
Front
- Padding: Add padding to the content area of the front of the flip box.
- Alignment: Choose to align the flip box content to the left, right, or center of the flip box.
- Vertical Position: Align the flip box content to the top, center, or bottom of the flip box.
- Border Type: Set a border to the entire flip box.
-
Image settings:
Spacing: Control the space between the image and the title.
Size: Specify the size of the image.
Opacity: Adjust the opacity of the image.
Border Type: Choose a border style for the image: None, Solid, Double, Dotted, Dashed, or Groove.
Border Radius: Control the border radius of the image border. -
Title settings:
Spacing: Control the space between the title and description.
Text Color: Choose the color of the title.
Typography: Set the typography settings of the title. -
Description settings:
Text Color: Choose the color of the description.
Typography: Set the typography settings of the description.
Back
Note:
You can find the same settings as in the Front section which can be applied to the back side of the Flix Box widget.
Button settings
- Size: Select a size for the button (extra small, small, medium, large, and extra large).
- Typography: Customize the typography of the button text.
- Text Color: Choose the text color of the button.
- Background Color: Select the color that fills the background of the button.
- Border Color: Pick the color of the border surrounding the button.
- Border Type: Choose the style of the border, such as Solid, Double, Dotted, Dashed or Groove.
- Border Width: Specify the thickness or width of the border surrounding the button.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.