The Modern Flip Box is a great widget that you can use to display content on your web page.This widget has two sides (front and back) with icon and text that flips when the user hovers over the element.You can fully customize both sides with your own content and style.
You can find the options down below.
In the front area content section you can define all the elements available in the front side of the modern flip box widget.
In this section you can define all the elements available in the second side of this widget : The back side.
The back side will be hidden and will be only bedisplayed when the user hovers over the widget.
This section will be used to change the behavior of the flipping effect.
Under the styling tab section, you will have the full control over the styling & design of all the modern flipbox widget elements and sides.You can change the typography, sizes, colors, backgrounds...
-Min Height : Change the container height.This will affect both the front and back sides of the widget.
-Border Radius : Change container border radius if you want to create a more rounded shape.
Control everything about your icon, and change the image settings if you are using that instead.
-Icon and background size : Control the icon size and the background size to create a unique design.
-Colors : Customize the icon color scheme using either a solid or gradient color with the possibility to control the direction of the gradient.The background color can also be changed.
-Borders & Shadows : Control border for your icon & apply custom box shadows.
-Rotation & Margins : Rotate the icon and icon background and control the icon area margins.
Under the styling tab, you will find the different sections to separately style both sides of the widget
The front area is the default visible section that contains the icon/image, title & sub-heading, once the user hovers over the widget it will turn to hidden.
The back area is the invisible hidden section that contains the title & content text.Once the user hovers the widget it will be displayed.
Customize the styling for the front and back areas elements and control the positioning of your content.
-Content Alignement : Control the vertical and horizontal alignement for the content.
-Typography & Text Color : Customize everything about text.From the font family to letter spacing, you have full control on the text properties.You can also change the text color with the use of solid or gradient color.
-Shadows & Margins : Add a text shadow and control the margins according to your needs.
This section will be used to style the background for the front and back areas.
-Background Type & Colors : You can either upload an image to use as a background or use colors instead.Solid and gradient colors are both available with the addition of having full control on the gradient behavior.
-Overlay : You can enable an overlay and customize its color to create fancy designs.
-Borders & Shadows : Control border for your icon & apply custom box shadows.
-Container padding : Control the each container inner space.