booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Modern Flip Box

Modern Flip Box

Preview Widget
Preview Widget
Getting Started
Front Area Content
Back Area Content
Settings
Container & Icon Styling
Front & Back Areas Design

More Widgets

• Fancy Icon Box
• Hover Info Box
• 3D Card Flip
• Perspective Card
Play Video

# Getting started

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.

Front Area Content

In the front area content section you can define all the elements available in the front side of the modern flip box widget.

  • Icon Type : Choose if u want to use an icon, an image or none of the two..
  • Image/Icon : Upload an image or select an icon from our extensive icon libraries..
  • Front Title :  This title will appear on the front side of the widget.You can type a text hat gives a global insight about the information or service you are showcasing.
  • Front Sub-heading : This sub heading will be displayed on the front side of the widget.You can use it to give more details about the topic in your title.

Back Area Content

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.

  • Back Title :  You can use this title to display a text that will give a general information about the back side content.
  • Back Content : A description to give more details about the main topic of the back side. 

Settings

This section will be used to change the behavior of the flipping effect.

  • Flip To : Choose the direction of the flip animation.
  • Enable Smooth Effect :  Enable this to change the back side appearance animation to a more smoother effect.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.

Styling

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...

  • Container Styling

-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.

  • Icon Area Styling

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.

Front & Back Areas Design

Under the styling tab, you will find the different sections to separately style both sides of the widget

  • Front Area

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.

  • Back Area

The back area is the invisible hidden section that contains the title & content text.Once the user hovers the widget it will be displayed.

  • Front Area & Back Area Styling Sections

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.

  • Front & Back Backgrounds Styling Sections

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.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Morocco our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

HELPFUL LINKS

About Us

Documentation

Blog Articles

Video Tutorials

Request Support

GET INVOLVED

Feedback

Bug Report

Submit Design

Privacy Policy

Terms & Condition

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020