The Story Flipbox widget’s Layout Settings controls how manually configured items are arranged and animated. Choose a vertical grid or a horizontal slider, then set responsive counts, animation, and navigation. These defaults are verified against plugin version 2.1.7.
Choose the layout and preset
- In WordPress, go to Pages → All Pages, open the intended page, and click Edit with Elementor.
- Select Story Flipbox and open Content → Layout Settings.
- Layout Orientation defaults to Vertical. Keep it for a grid, or select Horizontal to use a slider.
- Select Preset defaults to Default. The other options are Simple, Bold, and Clean. The control warns that a preset overwrites current settings, so review your existing styling before choosing another.
- Title Tag defaults to H2. Choose a heading level or Div that fits the page’s heading structure.
Screenshot to add: The Content → Layout Settings section showing Layout Orientation, Select Preset and its overwrite warning, and Title Tag. This is a placeholder, not an existing screenshot.
Set responsive columns or slides
The available item-count control depends on Layout Orientation.
- With Vertical selected, use Number of Columns. Its defaults are 3 on desktop, 2 on tablet, and 1 on mobile; the supported range is 1–6.
- With Horizontal selected, use Slides Per View, which defaults to 2 and supports 1–6. Horizontal Slides Gap also appears and defaults to 20 px.
Screenshot to add: Show Number of Columns with desktop, tablet, and mobile values for the vertical layout; use a separate view of Slides Per View and Horizontal Slides Gap after switching Layout Orientation to Horizontal. This is a placeholder, not an existing screenshot.
Configure animation and interaction
- Animation Type defaults to 3D Flip. Other options include None, 3D Flip Classic, 3D Diagonal Flip, 3D Cube, 3D Fold, 3D Door, Fade, Zoom, Slide, Skew, Fill Reveal, and Curtain.
- Animation Direction defaults to Left and appears only for supported animation types.
- Static Front Side defaults to off and appears for Zoom, Slide, Fold, or Curtain animations. Enable it only when you want the front to remain static while the back animates over it.
- Animation Event defaults to Default. Choose Click if you want to use click interaction.
- 3D Depth appears for 3D Flip and defaults to 50 px. Transition Duration (ms) defaults to 1000 ms.
Screenshot to add: The animation controls showing Animation Type, Animation Direction when supported, Static Front Side after selecting a supported animation, Animation Event, and Transition Duration (ms). This is a placeholder, not an existing screenshot.
Customize horizontal slider navigation
First set Content → Layout Settings → Layout Orientation to Horizontal. The Previous Arrow Icon and Next Arrow Icon controls appear for this layout and default to left and right angle icons.
Then open the widget’s Style → Slider Navigation section. The available controls include Arrow Color, Arrow Background Color, Arrow Size, Arrow Border Color, Arrow Border Radius, Pagination Dot Color, and Pagination Active Dot Color.
Screenshot to add: The horizontal layout with previous/next arrow controls and the Style → Slider Navigation section visible. This is a placeholder, not an existing screenshot.
Save and verify the layout
- Review item order, responsive columns or slides per view, and spacing.
- Test the chosen animation and click interaction if selected.
- For horizontal layout, test both arrows and pagination indicators.
- Click Update and preview the saved page at desktop, tablet, and mobile widths.
For individual card content and colors, see Create a Story Flipbox Collection and Manage Story Flipbox Items.