Use the Story Flipbox widget when you want to enter and arrange flip cards manually. Each item has separate Front, Back, and Style tabs. Unlike Post Flipbox, Story Flipbox does not populate cards by querying WordPress posts.
Add Story Flipbox to Elementor
- In WordPress, go to Pages → All Pages and open the page where the cards should appear.
- Click Edit with Elementor.
- In the widget panel, search for Story Flipbox and drag it into the intended section or container.
- Select the widget and open Content → Flipbox Items. The control is a repeater: each row represents one card, and its label is based on that item’s front-side Title.
- Expand a row to edit it, or use the repeater’s add-item control to create another card.
Configure the Front tab
- Expand an item in Content → Flipbox Items and select its Front tab.
- Enter the card heading in Title and supporting copy in Description. The source defaults for a new repeater item are “Default Title” and “Default description text.”
- Choose an Icon Type: Icon, Icon Image, or Icon Text. The default choice is Icon.
- Complete the field that appears for the selected type: Icon picker, Icon Image media control, or Icon Text field.
- Enable Button is off by default on the Front tab. Turn it on only if the front needs a button. When enabled, Button Text appears with the default “Click Here”. The Button URL field has an additional condition: it appears only when Enable Back is off. If the item also has its back enabled, the Front tab’s URL field is hidden by the plugin. The source default URL for a new item is
#when that field is available.
Configure the Back tab
- Select the item’s Back tab.
- Enable Back is on by default. Leave it enabled to provide a reverse side, or turn it off to make the item front-only. The back title, description, icon, and button controls depend on the back being enabled.
- Enter the back-side Title and Description. The new-item defaults are “Default Title” and “Default description text.”
- Choose the back-side Icon Type and complete its matching icon, image, or text control. The control defaults to Icon, though preloaded example items may override that value.
- Back-side Enable Button is on by default. Leave it on to show a button, or turn it off if the card does not need one. When enabled, set Button Text and Button URL; the field defaults are “Click Here” and
#.
Set item-specific colors
Open the item’s Style tab within Content → Flipbox Items. These controls affect the selected card rather than every card in the widget.
- Front controls: Front Background, Front Title Color, Front Desc Color, Front Icon Color, and Front Button Color.
- When Enable Back is on, back controls appear: Back Background, Back Title Color, Back Desc Color, Back Icon Color, and Back Button Color.
Save and check the collection
- Repeat the steps for each card and review the item order.
- Replace sample text and the default
#button URLs with your own content and destinations. - Open Content → Layout Settings and choose the required arrangement.
- Click Update, preview the saved page, and check both faces, buttons, colors, and responsive layout.
Continue with Manage Story Flipbox Items for editing details or Configure the Story Collection Layout for arrangement and animation.
Screenshot to add: Story Flipbox selected in Elementor with Content → Flipbox Items expanded, one item row selected, and the Front tab’s Title, Description, Icon Type, and Enable Button controls visible. This is a placeholder, not an existing screenshot.