How to Use Flipbox with Elementor

If you build your WordPress pages with Elementor, you can add flip boxes directly in the Elementor editor using the dedicated Flipbox widget — no shortcodes, no copy-pasting, no switching between screens.

Prerequisites

• Elementor (free or Pro) must be installed and active
• Flipbox plugin must be installed and active
• You must have at least one flip box already created in Flipbox → Create New

Note: You need to create and set up your flip box content first (in the Flipbox editor), and then display it on your page via Elementor. The Elementor widget is the display vehicle — not the editor.

Step 1: Create Your Flip Box

If you haven’t created a flip box yet:

1. Go to Flipbox in the WordPress admin sidebar.
2. Click Create New, name it, choose a layout, and add your content.
3. Save the flip box.
4. Note the ID shown next to the flip box name on the home screen.

Step 2: Open Elementor on Your Page

1. Go to Pages in your WordPress admin.
2. Open the page where you want to add the flip box.
3. Click Edit with Elementor.

Step 3: Find the Flipbox Widget

1. In the Elementor left panel, use the widget search bar and type Flipbox.
2. The Flipbox widget will appear under the General category.
3. Its icon is the Elementor flip box icon (two-sided card icon).

Step 4: Drag the Widget to Your Page

1. Drag the Flipbox widget from the panel onto the desired section of your page.
2. A widget settings panel will open on the left.

Step 5: Select Your Flip Box

1. In the widget settings panel, you’ll see a dropdown field.
2. Click the dropdown — it will list all your created flip boxes in the format: “Name (#ID)” (e.g., “My Services (#1)”).
3. Select the flip box you want to display.
4. The flip box will immediately render in the Elementor preview.

Step 6: Publish or Update the Page

1. Click the Publish or Update button at the bottom of the Elementor panel.
2. Visit the page on your website to see the flip box live.

Changing Which Flip Box Is Displayed

To swap out the flip box shown by the widget, simply go back to the Elementor editor, click the Flipbox widget, and change the selection in the dropdown. Update the page to save the change.

Can I Use Multiple Flipbox Widgets on One Page?

Yes. You can add as many Flipbox widgets as you like on a single page. Each widget has its own dropdown to select a different (or the same) flip box independently.

Editing the Flip Box Content

All content editing (titles, descriptions, buttons, colors, etc.) is done inside the Flipbox plugin editor, not in Elementor. The Elementor widget only controls which flip box to display and where on the page it appears.

To edit content: go to Flipbox in the WordPress admin → find your flip box → click Edit.

Pro Tip: If you update your flip box content (in the Flipbox editor), the changes will automatically reflect everywhere the flip box is displayed — including in any Elementor page using that flip box widget. No need to update the Elementor page separately.