Create animated boxes with the 10Web Flip Box premium widget to increase interactive aspects of your website and keep you visitors interested.
The Content Tab
General
Flip Effect: Choose a motion effect (Flip, Slide, Push, Zoom In, Zoom Out, Fade) by clicking on the dropdown menu.
Flip Direction: Choose the direction ((Up, Down, Left, Right) to which you want the motion effect to go to.
3D Depth: Click the toggle to activate a 3D effect. This option is only available for the Flip motion.
Front
Content Section
Graphic Element: Choose from to have an image, icon, or none on the front of your flip box.
Icon: If you have chosen Icon for your graphic element, click on the dropdown menu to choose from the list of available icons.
View: If you have chosen Icon for your graphic element, click the view dropdown menu to choose the look of your icon.
Image: If you have chosen Image for your graphic element, click on the image box to insert an image.
Image Size: If you have chosen Image for your graphic element, click on the image size drop down menu to adjust the size of your image.
Title & Description: Fill in the title and description that will be on the front of your flip box.
Background Section
Background Type: Choose between Classic(solid) and Gradient background types.
Classic Type
Color: Adjust the background color by clicking on the color tile.
Gradient Type
Color: Gradient will give you two color tiles. Adjust the colors as needed.
Location Bar Gradient: Adjust the location of each color in the box.
Gradient Type: From the dropdown menu choose from circular or linear gradients.
Angle/Position: Choose the angle or position of the gradient.
Back
The back side of the flip box can be edited the same way as the front side with the exception of having a button and not having the graphic elements.
Content Section
Button Text: Enter the text you want to show on the button.
Link: Enter the link to which your button should redirect to.
Link Options: Click on the gear icon next to the link field to open the options. Choose to open the link on a different page and to add no follow or not.
The Style Tab
General
Height: Adjust the height of your flip box.
Border Type: Option to apply a border to the box.
Width: If a border has been applied, adjust the border width.
Color: If a border has been applied, customize the color of the border.
Border Radius: Use the slider to round the edges of your flip box.
Front
Text Width: Adjust the width of your text relative to the box.
Alignment: Horizontally align the text to the left, center, or right of the box.
Vertical Alignment: Vertically align the text to the top, middle, or bottom of the box.
Icon
Spacing: Adjust the spacing of the icon relative to the text.
Primary & Secondary Color: Customize the colors of the icon.
Icon Size: Adjust the size of the icon.
Icon Padding: Adjust the padding of the icon.
Icon Rotate: Option to rotate the icon 360 degrees.
Border Radius: Adjust the border radius of the icon for rounded edges.
Title & Description
Title Spacing: Adjust the spacing of the title relative to the description.
Text Color: Customize the colors of both the title and the description.
Typography: Customize the typography settings for both the title and the description.
Back
The back side of the flip box can be edited the same way as the front side with the exception of styling options for the button and no graphic elements.
Button
Size: From the drop down menu, choose a button size starting from extra small to extra large.
Typography: Customize the typographical settings of the button text.
Normal/Hover: Option to apply a hover to the button or not. Change the color of the background, the border, and text upon hover.
Text & Background Color: Click on the color tile to customize the text and background color.
Border Type: Option to apply a border to the button. Choose from: solid, double, dotted, dashed, groove, and none.
Border Radius: Adjust the radius of the border to give curvature to the button edges.
The Advanced Tab
In the advanced tab, adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.
Next Up: Testimonial Carousel