Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

image accordion for elementor
ai-seo
the-style-is-candid-image-photography-with-natural__87017

Flip Box for Elementor (Free & Easy to Use)

Flip Box Widget” allows you to create a responsive content box with flip animation for your WordPress Elementor websites for free. 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.

Elementor Flip Box Tutorial Video (Step by Step Guide)

Add a Free Flip Box to Elementor

This widget requires Unlimited Elements Free version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Flip Box”
  3. Hover over the widget in the search results and click install
  4. Add your “Flip Box” widget to any Elementor Page
Add a Free Flip Box to Elementor

General Settings for Elementor Flip Box

General Settings for Elementor Flip Box
1

Height

Set the height of the widget.
2

Border Radius

Set the border radius of the flip box.
3

Trigger

Use any of the given options to trigger the animation
  • Hover
  • Mouse Click
  • Trigger Button
4

Effect

Select any flip effect from the given options
  • Flip
  • Flip Alternative
  • Slide
  • Push
  • Swap
  • Fade
  • Zoom In
  • Zoom Out
  • Zoom In/Out
5

Effect Direction

Choose the flip animation direction for the flip box

  • Left
  • Right
  • Up
  • Down
6

Duration

Set the animation duration in milliseconds.

7

Add 3D Depth

The content box's elements will gain the 3D perspective by selecting yes.

Front Panel Settings for Elementor Flip Box

Front Panel Settings for Elementor Flip Box
1

Icon

Choose or Upload any custom icon to display on the front panel of the flip box.

2

Title

Type title for the front panel of the flip box.

3

Description

Type description to display on the front panel of the flip box.

4

Front Trigger Button

Choose or Upload icon for the trigger button.

Back Panel Settings for Elementor Flip Box

Back Panel Settings for Elementor Flip Box
1

Icon

Choose or Upload any custom icon to display on the back panel of the flip box.

2

Title

Type title for the back panel of the flip box.
3

Description

Type description to display on the back panel of the flip box.

4

Button Text

Type any custom text for the button.

5

Button Link

Set any custom link to the button.

Layout Settings for Elementor Flip Box

Layout Settings for Elementor Flip Box
1

Show Fade Overlay

Choosing yes will show fade overlay when flip box turns to the back side panel.
2

Show Front Icon

 Show/Hide the front panel icon.

3

Show Front Title

Show/Hide the front panel title.
4

Show Front Text

Show/Hide the front panel text.

5

Show Back Icon

Show/Hide the back panel icon.

6

Show Back Title

Show/Hide the back panel title.
7

Show Back Text

Show/Hide the back panel text.
8

Show Back Button

Show/Hide the button on the back panel
9

Show Back Trigger Button

Show/Hide the back side trigger button

Front Panel Styling for Elementor Flip Box

Set any background color, gradient, or image for the front panel. Style the positioning, alignment, padding, and overlay for the front panel.

Front Panel Styling for Elementor Flip Box

Front Icon Styling for Elementor Flip Box

Style the icon size, color, wrapper size, background color, border radius of the front panel icon in this section.

Front Icon Styling for Elementor Flip Box

Front Typography Styling for Elementor Flip Box

In this section, style the color, typography, text-shadow, and spacing of title and text for the front panel.

Front Typography Styling for Elementor Flip Box

Front Trigger Styling for Elementor Flip Box

Set the trigger size, color, horizontal and vertical positioning, and spacing for the front panel trigger.

Front Trigger Styling for Elementor Flip Box

Back Panel Styling for Elementor Flip Box

Set any background color, gradient, or image for the back panel. Style the positioning, alignment, padding, and overlay for the back panel.

Back Panel Styling for Elementor Flip Box

Back Icon Styling for Elementor Flip Box

Style the icon size, color, wrapper size, background color, border radius of the back panel icon in this section.

Back Icon Styling for Elementor Flip Box

Back Typography Styling for Elementor Flip Box

In this section, style the color, typography, text-shadow, and spacing of title and text for the back panel.

Back Typography Styling for Elementor Flip Box

Back Button Styling for Elementor Flip Box

Set the button padding, color, spacing, border, typography, etc. for the back panel button.

Back Button Styling for Elementor Flip Box

Back Trigger Styling for Elementor Flip Box

Set the trigger size, color, horizontal and vertical positioning, and spacing for the back panel trigger.

Back Trigger Styling for Elementor Flip Box

Overlay Styling for Elementor Flip Box

Select the background color or image for overlay and set the background overlay opacity

Overlay Styling for Elementor Flip Box

Usage Examples for Elementor Flip Box

Here are some live use cases for the flip box widget.

Free Flip Box for Elementor with Products and Services 

Free Flip Box for Elementor with Custom Image Backgrounds

Free Flip Box for Elementor with Custom Image Backgrounds

Thank you for exploring the Flip Box Widget for Elementor! With its smooth animations and engaging design options, this is the best Flip Box Widget for Elementor, helping you create interactive content with ease. We hope it enhances your designs and user experience. If you have any questions or need assistance, feel free to reach out.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!