{"id":180,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&p=180"},"modified":"2026-10-17T21:05:38","modified_gmt":"2026-10-17T21:05:38","slug":"create-your-first-flipbox","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/create-your-first-flipbox\/","title":{"rendered":"Create Your First Flipbox"},"content":{"rendered":"\n

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

1. Add the widget to the page<\/h2>\n\n\n
  1. In WordPress, open Pages \u2192 All Pages<\/strong> and edit a page, or select Pages \u2192 Add New<\/strong> for a test page.<\/li>
  2. Select Edit with Elementor<\/strong>.<\/li>
  3. In the Elementor widget panel, search for Ultimate Flipbox<\/strong>.<\/li>
  4. Drag Ultimate Flipbox<\/strong> onto the page canvas, then select the widget so its controls appear in the left panel.<\/li><\/ol>\n\n\n

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

      3. Enter the back content<\/h2>\n\n\n
      1. Stay in Content \u2192 Flipbox Content<\/strong> and select the Back<\/strong> tab.<\/li>
      2. Set the back-side Enable Title<\/strong> and Title<\/strong> controls, then set Enable Description<\/strong> and Description<\/strong> as needed.<\/li>
      3. To add a button, enable Enable Button<\/strong>, enter its label in Button Text<\/strong>, and set the destination in Button URL<\/strong>. Use a real page or destination URL and test it in preview.<\/li><\/ol>\n\n\n

        4. Configure the flip behavior<\/h2>\n\n\n
        1. Open Content \u2192 Layout Settings<\/strong>.<\/li>
        2. Choose an effect in Animation Type<\/strong>. The source default is 3D Flip<\/strong>; 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.<\/li>
        3. For effects that support it, choose Animation Direction<\/strong>. The available directions are Left, Right, Top, and Bottom.<\/li>
        4. Use Event Type<\/strong> to choose Default<\/strong> or Click<\/strong>. The source default is Default.<\/li>
        5. Use Transition Duration (ms)<\/strong> to change the transition speed; the source default is 1000 ms.<\/li>
        6. The 3D Depth<\/strong> control applies to the 3D Flip effect. Its source default is 50 px, with a range of 0\u2013150 px in 10 px steps.<\/li><\/ol>\n\n\n

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

            6. Save and test<\/h2>\n\n\n
            1. Select Update<\/strong> in Elementor to save the page.<\/li>
            2. Open the page preview and test the configured flip interaction.<\/li>
            3. Test the back-side button, then check the card at desktop, tablet, and mobile widths.<\/li><\/ol>\n\n\n\n

              Screenshot to add:<\/strong> the selected Ultimate Flipbox widget with Content \u2192 Flipbox Content open and the Front or Back tab visible. This is a placeholder, not an actual screenshot.<\/p>\n\n\n

              For a focused final check, follow Preview Your First Flipbox<\/a>. For detailed animation explanations, see Animations and Interaction<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Create a single flipbox by selecting Ultimate Flipbox, editing the Front and Back tabs under Content \u2192 Flipbox Content, and configuring layout and styling controls.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":176,"menu_order":0,"template":"","class_list":["post-180","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":4,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/180\/revisions"}],"predecessor-version":[{"id":453,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/180\/revisions\/453"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/176"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}