Search here to get answers to your questions.

Quick Start: Create Your First Flip Box in 5 Minutes

Ready to create your first flip box? This quick start guide will walk you through the entire process, from opening the plugin to seeing your flip box live on your page, in just a few minutes. No experience needed.

Prerequisite: Make sure you’ve already installed and activated the Flipbox plugin. See How to Install & Activate Flipbox Free if you haven’t done that yet.

Step 1: Open the Flipbox Plugin

  1. Log in to your WordPress admin dashboard.
  2. In the left sidebar, click on Flipbox.
  3. This opens the Flipbox home screen where all your flip boxes are listed.

Step 2: Create a New Flip Box

  1. Click the Create New button (or Add New) at the top of the page.
  2. A dialog box will appear asking you to:
    • Enter a name for your flip box (e.g., “My Services”)
    • Choose a layout style, there are 3 initial layout options to pick from
  3. Type in a name and select your preferred layout.
  4. Click Create (or Submit).

Step 3: Add Your Content

Your new flip box will open in the editor. You’ll see a panel on the left for settings and a preview on the right.

Look for the Items section: this is where you add the individual flip box cards. Click Add Item to add your first card.

For each item, fill in:

  • Front Title: The heading shown on the front of the card (e.g., “Web Design”)
  • Front Icon: Optional: pick a Font Awesome icon
  • Front Image: Optional: upload an image for the front
  • Back Description: The text shown when the card flips (e.g., “We create beautiful, responsive websites…”)
  • Button Text: The label for the back button (e.g., “Learn More”)
  • Button Link: The URL the button points to

Add as many items as you like. A typical services section might have 3–6 items.

Step 4: Customize the Look (Optional)

Want to adjust colors, fonts, or sizing before publishing? In the settings panel you can quickly change:

  • Columns: How many cards per row (1, 2, 3, or 4)
  • Width & Height: The size of each card
  • Colors: Background colors for front and back faces
  • Animation: The entrance animation when the section scrolls into view

For a full breakdown of all customization options, see the Customization & Styling docs.

Step 5: Save Your Flip Box

When you’re happy with the content and design, click the Save button to save your flip box.

Step 6: Copy the Shortcode

Go back to the Flipbox home screen (click Flipbox in the sidebar). You’ll see your new flip box listed with a shortcode next to it, like:

[oxilab_flip_box id="1"]

Click the shortcode chip to copy it to your clipboard.

Step 7: Add It to Your Page

  1. Go to Pages (or Posts) and open the page where you want to display the flip box.
  2. In the block editor (Gutenberg), add a Shortcode block.
  3. Paste your shortcode: [oxilab_flip_box id="1"]
  4. Click Update or Publish to save the page.

Step 8: See It Live!

Click View Page to open your page in the browser. Hover over the cards to see the flip effect in action.

Pro Tip: You can also add your flip box using the Elementor widget or WordPress widget — no shortcode needed. See the Page Builder Integration docs for details.

What’s Next?

You’ve just created your first flip box! Here are some great next steps:

Still Stuck? Contact us for support.
Last Updated: May 28, 2026