--- title: "How to Add a Flip Box in Elementor?" url: https://theplusaddons.com/docs/add-a-flip-box-in-elementor/ date: 2024-05-10 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "The Flip Box widget shows a front side (usually a title and an icon) that flips to reveal a back side (usually a description and a button) when a visitor..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Flip-Box-in-Elementor_-1024x536.jpg word_count: 412 --- # How to Add a Flip Box in Elementor? ## - The Flip Box widget shows a front side with a title and an icon, then reveals a back side with a description and a button when a visitor interacts with it. - The Plus Addons for Elementor requires Elementor (free) installed and active, and the Flip Box widget is enabled under The Plus Addons > Widgets. - The doc covers single-box setup only, while vertical flip, carousel mode, and Carousel Remote sync are covered in related docs. The **Flip Box** widget shows a front side (usually a title and an icon) that flips to reveal a back side (usually a description and a button) when a visitor interacts with it. This doc covers the basic single-box setup; see the related docs for vertical flip, carousel mode and Carousel Remote sync. For the full settings tour of the **Flip Box** widget, see [How to Add a Flip Box in Elementor](https://theplusaddons.com/docs/add-a-flip-box-in-elementor/). ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/flipbox/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Flip Box** and turn its toggle on. ## Steps - Add the **Flip Box** widget to your page.- Under **Layout**, keep **Type** set to its default single-box mode unless you want the carousel mode covered in the Carousel doc.- Under **Front Side**, set the **Title** and choose an icon.- Under **Back Side**, set the **Description** and optionally turn on a **Button**.- Publish the page. ![Type control under Layout](https://theplusaddons.com/wp-content/uploads/2026/09/flip-box-type.webp) ![Title field under Front Side](https://theplusaddons.com/wp-content/uploads/2026/09/flip-box-title.webp) ![Description field under Back Side](https://theplusaddons.com/wp-content/uploads/2026/09/flip-box-description.webp) ## Settings Overview | Setting | What it does | Default | | ------- | ------------ | ------- | | Type | Switches the widget between single-box and carousel layout. | Basic | | Title | The front side's heading text. | The Plus | | Description | The back side's body text. | (placeholder text) | | Flip Type | Chooses the flip direction (horizontal or vertical). | Horizontal | ## Limitations - **This doc does not confirm the flip-reveal effect itself works.** Two attempts to build a test fixture with real front/back content did not reliably reflect the settings on the front end (see Not verified below), and a third, time-boxed attempt through the actual Elementor editor could not be confirmed either. The controls documented here are read from the widget's own control model and source code, not from watching the flip happen. ## Troubleshooting ### The back side never appears This is exactly the behaviour this doc could not confirm working in testing (see Limitations). Check the browser console for JavaScript errors, and confirm **Flip Type** and **Type** are set as you expect before assuming the widget itself is broken. ## Not verified So you know exactly what has and has not been checked: - The flip-reveal effect on hover or click - not observed on the front end in this pass, after two fixture-construction attempts and one editor-UI attempt.- Carousel mode and Carousel Remote sync (see the related docs).- Free vs Pro control split.- Style tab (Front Icon, Front Title, Back Description, Back Button, Background Options). ## Related Docs - [How to Add a Vertical Flip Box in Elementor?](https://theplusaddons.com/docs/add-vertical-flip-box-in-elementor/)- [How to Create an Elementor Flip Box Carousel?](https://theplusaddons.com/docs/elementor-flip-box-carousel/)- [How to Connect Elementor Flip Box with Carousel Remote?](https://theplusaddons.com/docs/elementor-flip-box-with-carousel-remote/) ## Frequently Asked Questions **Q: What do I need before adding a Flip Box in Elementor?** A: Elementor (free) has to be installed and active, and the Flip Box widget has to be enabled under The Plus Addons > Widgets. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the Flip Box widget as part of its toolkit, so the setup only works once that addon is active. A common gotcha is skipping the widget toggle, which leaves the widget unavailable inside the editor. **Q: How do I use a Flip Box for a simple front-and-back content block?** A: The basic setup is a single-box layout: put a title and icon on the front side, then add a description and optional button on the back side. That makes it useful for short feature summaries, service cards, or teaser content where the front stays compact and the back carries more detail. The page also notes this doc covers single-box mode only, not carousel mode. **Q: Should I keep Type set to single-box or switch to carousel mode?** A: Single-box mode is the right choice when you want one Flip Box card with a front side and back side on a page. Carousel mode is a different layout covered in the carousel doc, so switching Type changes the whole behavior of the widget rather than just a visual setting. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH separates those use cases so you can keep this tutorial focused on one card at a time. **Q: Why isn't the back side showing on my Flip Box?** A: That issue was not confirmed as working in testing here, so the first thing to check is whether your browser console shows JavaScript errors. Also confirm that both Flip Type and Type are set the way you expect before assuming the widget is broken. The page’s own testing notes say the flip-reveal effect could not be reliably observed on the front end. **Q: Does this Flip Box tutorial cover vertical flip boxes too?** A: No, this tutorial is for the basic single-box setup with horizontal flip as the default Flip Type. Vertical flipping is handled in a separate doc: [How to Add a Vertical Flip Box in Elementor?](https://theplusaddons.com/docs/add-vertical-flip-box-in-elementor/). That split matters because flip direction changes how the interaction feels and how you should plan space around the card. **Q: What parts of the Flip Box widget were actually verified in testing?** A: The control model and source code were checked, but not every front-end behavior was confirmed. The page says carousel mode and Carousel Remote sync were not verified here, and neither were Free vs Pro control split or Style tab details like Front Icon, Front Title, Back Description, Back Button, and Background Options. For related layouts, see [How to Create an Elementor Flip Box Carousel?](https://theplusaddons.com/docs/elementor-flip-box-carousel/) and [How to Connect Elementor Flip Box with Carousel Remote?](https://theplusaddons.com/docs/elementor-flip-box-with-carousel-remote/).