Dragwyb Docs Dragwyb Docs
Visit Website
Updated on Oct 17, 2026

Create Your First Flipbox

Create a single flipbox by selecting Ultimate Flipbox, editing the Front and Back tabs under Content → Flipbox Content, and configuring layout and styling controls.

This guide creates one manually configured card with Ultimate Flipbox. Follow the navigation path in each step; the labels below are taken from the version 2.1.7 widget source.

1. Add the widget to the page

  1. In WordPress, open Pages → All Pages and edit a page, or select Pages → Add New for a test page.
  2. Select Edit with Elementor.
  3. In the Elementor widget panel, search for Ultimate Flipbox.
  4. Drag Ultimate Flipbox onto the page canvas, then select the widget so its controls appear in the left panel.

2. Enter the front content

  1. In the widget panel, open the Content tab.
  2. Expand Flipbox Content, then select the Front tab.
  3. To show a title, enable Enable Title and enter the text in Title. The source default for Enable Title is on.
  4. To show a description, enable Enable Description and enter the text in Description.
  5. If you want an icon, enable Enable Icon, choose Icon Type, then configure the matching Icon, Icon Image, or Icon Text control.

3. Enter the back content

  1. Stay in Content → Flipbox Content and select the Back tab.
  2. Set the back-side Enable Title and Title controls, then set Enable Description and Description as needed.
  3. To add a button, enable Enable Button, enter its label in Button Text, and set the destination in Button URL. Use a real page or destination URL and test it in preview.

4. Configure the flip behavior

  1. Open Content → Layout Settings.
  2. Choose an effect in Animation Type. The source default is 3D Flip; the list also includes None, 3D Flip Classic, 3D Diagonal Flip, 3D Cube, 3D Fold, 3D Door, Fade, Zoom, Slide, Skew, Fill Reveal, and Curtain.
  3. For effects that support it, choose Animation Direction. The available directions are Left, Right, Top, and Bottom.
  4. Use Event Type to choose Default or Click. The source default is Default.
  5. Use Transition Duration (ms) to change the transition speed; the source default is 1000 ms.
  6. The 3D Depth control applies to the 3D Flip effect. Its source default is 50 px, with a range of 0–150 px in 10 px steps.

5. Adjust the appearance

  1. Select the widget’s Style tab.
  2. Open Container Box Settings, then use the Front or Back tab to find Background Type and the matching color, gradient, or image controls.
  3. For text appearance, open Title Style or Description Style. For icon appearance, open Icon Style. For the button, open Button Style.
  4. Change only the controls you need, then preview the card to check text contrast, spacing, and whether both sides fit.

6. Save and test

  1. Select Update in Elementor to save the page.
  2. Open the page preview and test the configured flip interaction.
  3. Test the back-side button, then check the card at desktop, tablet, and mobile widths.

Screenshot to add: the selected Ultimate Flipbox widget with Content → Flipbox Content open and the Front or Back tab visible. This is a placeholder, not an actual screenshot.

For a focused final check, follow Preview Your First Flipbox. For detailed animation explanations, see Animations and Interaction.