Understanding the Flipbox Editor - Oxilab - Premium WordPress Plugins

The Flipbox editor is where you do everything — add content, change colors, set animations, and preview your flip boxes. Once you understand how it’s laid out, customizing your flip boxes becomes fast and intuitive.

This guide gives you a complete map of the editor so you always know where to look.

Editor Layout Overview

The Flipbox editor is divided into two main areas:

Left panel: All settings, options, and controls
Right area / Preview: A live preview of your flip box as you make changes

Within the left panel, settings are organized into tabs or sections. Here’s what each one covers.

General / Layout Settings

This section controls the overall structure and size of your flip box grid.

Columns: How many flip box cards appear side by side (1 to 4). Choose 3 for a typical services section.
Width: The width of each card in pixels (e.g., 300px).
Height: The height of each card in pixels (e.g., 250px).
Margin Top / Left: Spacing between the flip box grid and surrounding content.
Link Target: Controls whether button links open in the same tab or a new tab (_blank).

Front Face Settings

These settings control the visual appearance of the front side of every card in this flip box.

Background Color: The background color of the front face (supports transparency)
Border Color & Size: Optional border around the card
Icon Color, Background & Size: Styling for the Font Awesome icon on the front
Heading Color, Size, Font & Alignment: Typography for the front title
Heading Padding: Space around the title text (top, bottom, left, right)
Image Height: How tall the front image displays
Front Padding: Inner spacing of the front face

Back Face Settings

These settings control the appearance of the back side — the side revealed when the card flips.

Background Color: Back face background color (supports transparency)
Border Color & Size: Optional border on the back
Info Text Color, Size, Font & Alignment: Typography for the description text
Info Text Padding & Margin: Spacing around the description
Button Color, Background & Hover Colors: Button normal and hover state colors
Button Size, Font, Padding & Border Radius: Full button typography and shape control
Back Padding: Inner spacing of the back face

Animation Settings

This section lets you add an entrance animation to your flip box — triggered when the section scrolls into the visitor’s viewport.

Animation Type: Dropdown with 103 animation options (bounce, fade, zoom, rotate, slide, etc.)
Animation Duration: How long the animation plays, in seconds

See Overview of Animation Effects for a full breakdown of what each animation looks like.

Box Shadow Settings

Add a drop shadow to your flip box cards for a more elevated, modern look.

Shadow Color: Color of the shadow (supports transparency)
Horizontal Offset: Shadow position left/right
Vertical Offset: Shadow position up/down
Blur: How soft or sharp the shadow edge is
Spread: How large the shadow extends

Custom CSS

At the bottom of the settings panel you’ll find a Custom CSS textarea. Paste any custom CSS here to override or extend the default styles for this specific flip box.

Note: Custom CSS here applies only to this flip box, not all flip boxes on your site.

Items Section

The items section is separate from the styling settings. This is where you manage the actual content of each card:

Click Add Item to create a new card
Each item has its own front and back content fields
You can reorder, edit, or delete individual items

See Adding Content to the Front Face and Adding Content to the Back Face for details on what goes in each field.

Saving Your Changes

Always click the Save button after making changes. Changes are not saved automatically. If you navigate away without saving, your edits will be lost.

Pro Tip: Make a habit of saving frequently, especially when making many small adjustments. The editor has no auto-save feature.