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

Ultimate Flipbox Card

Set up the Ultimate Flipbox widget in Elementor with source-verified front and back defaults, optional icons and button, layout settings, styling, and save-and-preview steps.

The Ultimate Flipbox widget creates one manually configured flip card. Use the front to introduce a feature, service, or offer, then use the back to add details and an optional button. This guide explains the exact Elementor paths and the default state of each content switch in plugin version 2.1.7.

Open the Ultimate Flipbox widget

  1. In WordPress, go to Pages → All Pages and open the page you want to edit.
  2. Click Edit with Elementor.
  3. Select the existing Ultimate Flipbox widget on the canvas. To add one, search for Ultimate Flipbox in the widget panel and drag it onto the page.

Configure the front face

With the widget selected, open Content → Flipbox Content → Front. In version 2.1.7, Enable Title and Enable Icon are enabled by default, while Enable Description is disabled by default.

  1. To change the heading, keep Enable Title on (the default) and edit Title. Turn the switch off only if you want to hide the title.
  2. To display supporting copy, turn on Enable Description, which is off by default, then edit Description. The text field appears when the switch is enabled.
  3. Keep Enable Icon on (the default) to display an icon treatment, or turn it off to hide it.
  4. When Enable Icon is on, choose Icon, Icon Image, or Icon Text from Icon Type. Complete the control shown for the selected type.

Configure the back face

Open Content → Flipbox Content → Back. Here, Enable Title, Enable Description, and Enable Button are enabled by default. Enable Icon is disabled by default.

  1. Edit Title while Enable Title is on, or turn the switch off to hide the back heading.
  2. Edit Description while Enable Description is on, or turn it on if it was disabled. The description field is conditional on this switch.
  3. To add a back-side icon, turn on Enable Icon, which is off by default. Then choose an Icon Type and complete the matching icon, image, or text control.
  4. The button is on by default. To show it, keep Enable Button enabled and edit Button Text and Button URL. Turn the switch off if the card does not need a button. Both fields appear only while the button is enabled.

Adjust layout, animation, and interaction

  1. Open Content → Layout Settings and review Select Preset, Title Tag, Animation Type, Animation Direction, Static Front Side, Event Type, 3D Depth, and Transition Duration (ms) where available.
  2. Select Preset defaults to Default. The source warns that choosing a preset overwrites the current settings, so review your existing configuration before changing it.
  3. Animation Type defaults to 3D Flip; Animation Direction defaults to Left when that control is available. Some animation controls appear only for specific animation types.
  4. Static Front Side defaults to off and is shown only for supported animation types. Event Type defaults to Default; choose Click if you want the click interaction instead.

Style the front, back, and button

  1. Open Style → Container Box Settings → Front or Back to adjust the matching face’s background and container appearance.
  2. Open Style → Title Style to adjust title appearance, Style → Description Style for descriptions, and Style → Icon Style for icons.
  3. When Enable Button is on, open Style → Button Style to style the back-side button.

Save and verify

  1. Click Elementor’s Update button.
  2. Preview the saved page on the front end and trigger the flip interaction.
  3. Check both faces, the button destination if present, text wrapping, and spacing at desktop and mobile widths. These steps describe source-verified controls; they do not mean the widget has been live-tested on your site.

Continue with a specific task