“Flip Box Widget” allows you to create a responsive content box with flip animation for your WordPress websites. The widget looks like a regular content box with an image or icon on the front, but when the visitor hovers over it, the backside of the box displays with an awesome transition effect that can contain a call to action button. It looks very attractive and can earn attention from your website visitors. There are unlimited possibilities to showcase this widget with many options for customization and styling for both the front and back sides.
Let’s look at each of the options in the “Flip Box Widget” below.
Install Flip Box Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Flip Box”
- Hover over the widget in the search results and click install
- Add your “Flip Box” widget to any Elementor Page
General Settings #
Height
Border Radius
Trigger
- Hover
- Mouse Click
- Trigger Button
Effect
- Flip
- Flip Alternative
- Slide
- Push
- Swap
- Fade
- Zoom In
- Zoom Out
- Zoom In/Out
Effect Direction
Choose the flip animation direction for the flip box
- Left
- Right
- Up
- Down
Duration
Set the animation duration in milliseconds.
Add 3D Depth
The content box's elements will gain the 3D perspective by selecting yes.
Front Panel Settings #
Icon
Choose or Upload any custom icon to display on the front panel of the flip box.
Title
Type title for the front panel of the flip box.
Description
Type description to display on the front panel of the flip box.
Front Trigger Button
Choose or Upload icon for the trigger button.
Back Panel Settings #
Icon
Choose or Upload any custom icon to display on the back panel of the flip box.
Title
Description
Type description to display on the back panel of the flip box.
Button Text
Type any custom text for the button.
Button Link
Set any custom link to the button.
Layout Settings #
Show Fade Overlay
Show Front Icon
Show/Hide the front panel icon.
Show Front Title
Show Front Text
Show/Hide the front panel text.
Show Back Icon
Show/Hide the back panel icon.
Show Back Title
Show Back Text
Show Back Button
Show Back Trigger Button
Front Panel Styling #
Set any background color, gradient, or image for the front panel. Style the positioning, alignment, padding, and overlay for the front panel.
Front Icon Styling #
Style the icon size, color, wrapper size, background color, border radius of the front panel icon in this section.
Front Typography Styling #
In this section, style the color, typography, text-shadow, and spacing of title and text for the front panel.
Front Trigger Styling #
Set the trigger size, color, horizontal and vertical positioning, and spacing for the front panel trigger.
Back Panel Styling #
Set any background color, gradient, or image for the back panel. Style the positioning, alignment, padding, and overlay for the back panel.
Back Icon Styling #
Style the icon size, color, wrapper size, background color, border radius of the back panel icon in this section.
Back Typography Styling #
In this section, style the color, typography, text-shadow, and spacing of title and text for the back panel.
Back Button Styling #
Set the button padding, color, spacing, border, typography, etc. for the back panel button.
Back Trigger Styling #
Set the trigger size, color, horizontal and vertical positioning, and spacing for the back panel trigger.
Overlay Styling #
Usage Examples #
Here are some live use cases for the flip box widget.
