{"id":181,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=181"},"modified":"2026-10-17T21:05:40","modified_gmt":"2026-10-17T21:05:40","slug":"preview-your-first-flipbox","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/preview-your-first-flipbox\/","title":{"rendered":"Preview Your First Flipbox"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Preview a flipbox before publishing to confirm that the card content, configured interaction, button destination, and layout work as intended. The steps below separate editor preview from checking the saved page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Open the page preview<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>In WordPress, go to <strong>Pages \u2192 All Pages<\/strong> and edit the page containing your Flipbox.<\/li><li>Select <strong>Edit with Elementor<\/strong>.<\/li><li>In the Elementor canvas, select the Flipbox widget you want to check.<\/li><li>Use Elementor&#8217;s <strong>Preview Changes<\/strong> control to open a preview. If you have made edits that need saving first, select <strong>Update<\/strong>, then open the saved page preview.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">2. Test the front and back<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>On the preview page, confirm the front-side title, description, and icon are visible and readable.<\/li><li>Trigger the flip using the interaction configured for the widget. For Ultimate Flipbox, the path is <strong>Content \u2192 Layout Settings \u2192 Event Type<\/strong>; the source options are <strong>Default<\/strong> and <strong>Click<\/strong>.<\/li><li>Check that the back-side content appears and is not clipped. Return to the front and repeat the test.<\/li><li>If you added a button, select it and confirm that <strong>Button URL<\/strong> opens the intended destination.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">3. Check layout and styling<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Return to the Elementor editor and select the widget on the canvas.<\/li><li>Open <strong>Style \u2192 Container Box Settings<\/strong>, then check the <strong>Front<\/strong> and <strong>Back<\/strong> tabs if a background or spacing issue is visible.<\/li><li>Open <strong>Style \u2192 Title Style<\/strong> or <strong>Description Style<\/strong> if text needs adjustment; use <strong>Icon Style<\/strong> or <strong>Button Style<\/strong> for those elements.<\/li><li>Use Elementor&#8217;s responsive preview controls to inspect desktop, tablet, and mobile widths. Look for clipped text, overlapping content, cut-off buttons, and unwanted horizontal scrolling.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">4. Save and check the published page<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>After making changes, select <strong>Update<\/strong>.<\/li><li>Open the saved page preview again and repeat the front\/back and button checks.<\/li><li>If possible, test the published page on a real touch device. Editor responsive preview is useful but does not replace testing the live page on a device.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">If the result does not match the editor<\/h2>\n\n\n<ul class=\"wp-block-list\"><li>Confirm that you updated the page after changing the widget.<\/li><li>Check the widget&#8217;s <strong>Content \u2192 Layout Settings<\/strong> and <strong>Style<\/strong> controls for the setting related to the visible issue.<\/li><li>If the card does not respond to click or hover, use the relevant troubleshooting article rather than assuming that every interaction uses the same trigger.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Screenshot to add:<\/strong> the preview page showing the front and back states, with the card content fully visible. This is a placeholder, not an actual screenshot.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Related guides: <a href=\"\/docs\/flipbox-addon-for-elementor\/animations-interaction\/\">Animations and Interaction<\/a>, <a href=\"\/docs\/flipbox-addon-for-elementor\/styling-layout-responsive\/\">Presets, Styling, and Responsive Layouts<\/a>, and <a href=\"\/docs\/flipbox-addon-for-elementor\/flipbox-addon-for-elementor-faq\/\">Frequently Asked Questions<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Preview Ultimate Flipbox in Elementor, test the configured front\/back interaction and button URL, then check the saved page at desktop, tablet, and mobile widths.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":176,"menu_order":0,"template":"","class_list":["post-181","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/181","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":3,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/181\/revisions"}],"predecessor-version":[{"id":510,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/181\/revisions\/510"}],"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=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}