Preview Your First Flipbox

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.

1. Open the page preview

In WordPress, go to Pages → All Pages and edit the page containing your Flipbox.
Select Edit with Elementor.
In the Elementor canvas, select the Flipbox widget you want to check.
Use Elementor’s Preview Changes control to open a preview. If you have made edits that need saving first, select Update, then open the saved page preview.

2. Test the front and back

On the preview page, confirm the front-side title, description, and icon are visible and readable.
Trigger the flip using the interaction configured for the widget. For Ultimate Flipbox, the path is Content → Layout Settings → Event Type; the source options are Default and Click.
Check that the back-side content appears and is not clipped. Return to the front and repeat the test.
If you added a button, select it and confirm that Button URL opens the intended destination.

3. Check layout and styling

Return to the Elementor editor and select the widget on the canvas.
Open Style → Container Box Settings, then check the Front and Back tabs if a background or spacing issue is visible.
Open Style → Title Style or Description Style if text needs adjustment; use Icon Style or Button Style for those elements.
Use Elementor’s responsive preview controls to inspect desktop, tablet, and mobile widths. Look for clipped text, overlapping content, cut-off buttons, and unwanted horizontal scrolling.

4. Save and check the published page

After making changes, select Update.
Open the saved page preview again and repeat the front/back and button checks.
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.

If the result does not match the editor

Confirm that you updated the page after changing the widget.
Check the widget’s Content → Layout Settings and Style controls for the setting related to the visible issue.
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.

Screenshot to add: the preview page showing the front and back states, with the card content fully visible. This is a placeholder, not an actual screenshot.