Flip Box

The Flip Box Widget is a powerful and interactive Elementor element that allows you to display two sides of content — front and back — with smooth 2D or 3D flip animations. This widget is ideal for showcasing team members, features, services, and more in an engaging way.

🧩 How to Enable the Widget

1. Go to your WordPress dashboard.
2. Navigate to Topper Pack > Widgets.
3. Toggle the switch to enable the Flip-box widget.
4. Once enabled, it will be available inside the Elementor editor under the Topper Pack section.

🧩 How to Use the Flip Box Widget

1. Open a page in Elementor.
2. Search for Advanced List Item.
3. Drag the widget into your section.
4. Begin customizing!

⚙️ Content Options

Button Styles

Choose from predefined button styles. Each style controls the appearance of the button that appears on the back side.

• Available options: Style One, Style Two, etc.

Choose Type

Set the flip trigger type:

• Hover – Flip on mouse hover.
• Click – Flip when the box is clicked.

⚠️ Note: If you select “Click,” the box link option will not work.

Flip Animation

Select a transition animation between the front and back content. Supported animations include:

• Zoom In/Out, Flip Horizontal/Vertical
• Slide (Left, Right, Up, Down)
• Rotate (X, Y, Z)
• 3D effects like Prism, Cylinder, Helix, Carousel, Accordion, and more
• Fancy effects: Celestial Swirl, Gravity Bounce, Shatter Effect, Origami Fold, Door Open, etc.

🪞 Front & Back Content

Front Content

• Content Type: Choose “Content” or “Saved Template”
• Icon Type: None, Icon, or Image
• Title: Add your heading (supports HTML tags like H2, H3)
• Description: Add brief text describing the front side

If you Selected Content

Same configuration options as the front, allowing different content and styles.

Button Enable

Toggle to display a button on the back side. Configure:

• Button Text – Label for your button
• Link – Where the button redirects (e.g., https://your-link.com)

🔗 Link Settings

Choose how your Flip Box behaves when clicked:

• None – No linking
• Box Link – Entire box becomes clickable
• Title Link – Only the title is linked

If “Click” is chosen in “Choose Type,” these options won’t apply.

🎨 Style Settings

Layout Style

Adjust the layout and spacing for the whole flip box.

Front Content Style

Customize typography, color, spacing, and hover states for:

• Title
• Description
• Button

Back Content Style

Similar customization options for the back side.

Back Button Style

Set the button typography, colors, margin, padding, hover effects, and more.