Flip Box

The Flip Box Widget in Animation Addons for Elementor is a pro feature. To use this widget, make sure the plugin is properly installed and activated on your website. While you can browse both free and pro widgets using the filtering options, please note that the Flip Box Widget is available exclusively in the pro version.

Introduction

The Flip Box Widget in Animation Addons adds interactive flip boxes with hover effects, perfect for showcasing content with dynamic appeal.

Key Use Cases for the Flip Box Widget:

• Create interactive flip boxes to showcase features, services, or portfolios.
• Customize design and hover effects to match your website’s style.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Flip Box Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Flip Box Widget in the list.
• Toggle it on to enable the widget.
• The Flip Box Widget is now ready to use!

How to Add Flip Box Widget in Elementor:

• Open the page where you want to add the Flip Box Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Flip Box Widget.”
• Drag the widget to your desired section.
• The Flip Box Widget is now ready for customization!

How to Configure Flip Box Widget

• In the Elementor panel, search for the “Flip Box Widget.”
• Drag and drop the widget into your desired section.
• From the widget settings, configure the front and back content of the flip box. Add elements such as icons, headings, descriptions, and buttons to create an engaging interactive experience.
• Choose your preferred flip direction and animation effect to define how the flip transition appears on hover.

Use the available content and style options in the Elementor panel to customize the widget’s layout, typography, colors, borders, and more—ensuring it aligns seamlessly with your site’s overall design.

Configuring Flip Box Widget : A Step-by-Step Guide

Once the Flip Box Widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

Within the Content section of the Flip Box Widget, you’ll find three primary customization panels: Flip Box, Settings, and Button.

Flip Box

This panel allows you to define content for both the front and back sides of the flip box.
Key customization options include:

• Content Type: Choose between icon, image, or custom content.
• Icon Type: Select from various icon libraries.
• Icon: Upload or choose an icon.
• Title: Add a title for each side and set the appropriate HTML tag.
• Content: Insert content using the visual editor, media uploader, or code editor for flexibility in formatting.

Settings

Control the overall behavior and presentation of the flip box:

• Flip Box Type: Choose the animation direction (e.g., horizontal or vertical flip).
• 3D Depth: Enable or disable 3D flipping effects.
• Height: Set a fixed or responsive height for the box.
• Link Type: Define if the entire box or just the button will act as a clickable link.

Button

Customize the optional call-to-action button located on the back side of the flip box:

• Style & Hover Style: Choose button design styles for normal and hover states.
• Text & Link: Add button text and destination URL.
• Icon Options: Add an icon, choose its position (before or after text), define direction, and set icon spacing for alignment and spacing control.

Style Settings

The Style section of the Flip Box Widget allows you to fine-tune the design and appearance of each element to match your site’s branding. You’ll find customization panels for the Flip Box, Front Icon, Back Icon, Title/Content, and Button. 

Flip Box

Control the overall appearance of both the front and back sides of the flip box:

• Front Background: Choose a solid color or apply a custom background using the Background Type option.
• Back Background: Set the Background Color and select a Background Type (classic, gradient, etc.).
• Padding: Adjust internal spacing.
• Border Type: Define the border style (solid, dashed, etc.).
• Border Shadow: Add shadow effects for depth.
• Border Radius: Apply rounded corners.

Front Icon

Style the icon displayed on the front side:

• Icon Color: Set the color of the icon itself.
• Icon Background Color: Customize the background behind the icon.
• Size & Padding: Adjust the icon size and internal spacing.
• Border Type & Radius: Apply border styles and rounded edges for enhanced design.

Back Icon

Customize the icon on the back side similarly to the front:

• Icon Color & Background Color
• Size & Padding
• Border Type & Radius

Title/Content

Independently style the front and back text content:

• Title Style: Configure Color, Typography, and Margin.
• Content Style: Adjust Color, Typography, and Margin for body text or descriptions.

Button

Design and enhance the call-to-action button on the back side:

• Typography: Set font style, weight, and size.
• Icon Size: Customize the size of the icon (if used).
• Text Color & Background Type: Adjust the button text color and background.
• Border Type & Radius: Apply desired border styles and rounded corners.
• Padding & Margin: Control spacing inside and around the button.
• Box Shadow: Add shadows for visual depth and emphasis.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve now mastered how to configure the Flip Box Widget in Elementor to create interactive and visually engaging content. Customize the flip box to showcase features, services, or portfolios effectively. If you need any assistance or have questions, our support team is here to help!