How to Use Flipbox with WPBakery Visual Composer

If your WordPress site uses WPBakery Page Builder (formerly Visual Composer), the Flipbox plugin integrates natively — giving you a dedicated “Flip Boxes and Image Overlay” element you can drag into any WPBakery layout.

Prerequisites

• WPBakery Page Builder must be installed and active on your site
• Flipbox plugin must be installed and active
• At least one flip box must already be created in Flipbox → Create New

Step 1: Create Your Flip Box First

Before adding a flip box to a WPBakery page, you need to create and configure it in the Flipbox plugin:

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

Step 2: Open WPBakery 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 the Backend Editor or Frontend Editor button to switch to the WPBakery editor.

Step 3: Add the Flipbox Element

1. Click the + Add Element button (or the plus icon in a row/column).
2. In the element search box, type Flipbox or Flip Boxes.
3. Find the element called “Flip Boxes and Image Overlay” in the Content category.
4. Click it to add it to your layout.

Step 4: Configure the Element

1. After adding the element, a settings dialog will open.
2. You’ll see a field labeled ID — enter the ID number of the flip box you want to display (e.g., 1).
3. Click Save changes.

Where to find the ID: Go to Flipbox in the WordPress admin. The ID is shown next to each flip box name, or in the shortcode: [oxilab_flip_box id="1"] — the number after id= is the ID.

Step 5: Save and Preview the Page

1. Click Update or Save on the page.
2. Click Preview or visit the live page to see the flip box in action.

Using the Shortcode Instead

Alternatively, you can use WPBakery’s built-in Shortcode element and paste the Flipbox shortcode directly:

1. Add a Shortcode element to your WPBakery layout.
2. Paste: [oxilab_flip_box id="1"] (replace 1 with your flip box ID).
3. Save the page.

This method works just as well and is useful if you’re more comfortable with shortcodes.

Updating Flip Box Content

To update what’s displayed, edit the flip box in the Flipbox plugin editor (not in WPBakery). Changes save automatically to all pages where that flip box is used.

Note: The shortcode used for WPBakery is slightly different: [oxilab_flip_box_VC id="1"] — this is the Visual Composer specific shortcode, though both oxilab_flip_box and oxilab_flip_box_VC should work in most cases.