{"id":196,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=196"},"modified":"2026-10-17T21:35:46","modified_gmt":"2026-10-17T21:35:46","slug":"configure-story-collection-layout","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/configure-story-collection-layout\/","title":{"rendered":"Configure the Story Collection Layout"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Story Flipbox<\/strong> widget&#8217;s <strong>Layout Settings<\/strong> 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.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Choose the layout and preset<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>In WordPress, go to <strong>Pages \u2192 All Pages<\/strong>, open the intended page, and click <strong>Edit with Elementor<\/strong>.<\/li><li>Select <strong>Story Flipbox<\/strong> and open <strong>Content \u2192 Layout Settings<\/strong>.<\/li><li><strong>Layout Orientation<\/strong> defaults to <strong>Vertical<\/strong>. Keep it for a grid, or select <strong>Horizontal<\/strong> to use a slider.<\/li><li><strong>Select Preset<\/strong> defaults to <strong>Default<\/strong>. The other options are <strong>Simple<\/strong>, <strong>Bold<\/strong>, and <strong>Clean<\/strong>. The control warns that a preset overwrites current settings, so review your existing styling before choosing another.<\/li><li><strong>Title Tag<\/strong> defaults to <strong>H2<\/strong>. Choose a heading level or <strong>Div<\/strong> that fits the page&#8217;s heading structure.<\/li><\/ol>\n\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: The <strong>Content \u2192 Layout Settings<\/strong> section showing Layout Orientation, Select Preset and its overwrite warning, and Title Tag. This is a placeholder, not an existing screenshot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set responsive columns or slides<\/h2>\n\n\n<p class=\"wp-block-paragraph\">The available item-count control depends on <strong>Layout Orientation<\/strong>.<\/p>\n\n\n<ul class=\"wp-block-list\"><li>With <strong>Vertical<\/strong> selected, use <strong>Number of Columns<\/strong>. Its defaults are 3 on desktop, 2 on tablet, and 1 on mobile; the supported range is 1\u20136.<\/li><li>With <strong>Horizontal<\/strong> selected, use <strong>Slides Per View<\/strong>, which defaults to 2 and supports 1\u20136. <strong>Horizontal Slides Gap<\/strong> also appears and defaults to 20 px.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure animation and interaction<\/h2>\n\n\n<ul class=\"wp-block-list\"><li><strong>Animation Type<\/strong> defaults to <strong>3D Flip<\/strong>. Other options include None, 3D Flip Classic, 3D Diagonal Flip, 3D Cube, 3D Fold, 3D Door, Fade, Zoom, Slide, Skew, Fill Reveal, and Curtain.<\/li><li><strong>Animation Direction<\/strong> defaults to <strong>Left<\/strong> and appears only for supported animation types.<\/li><li><strong>Static Front Side<\/strong> 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.<\/li><li><strong>Animation Event<\/strong> defaults to <strong>Default<\/strong>. Choose <strong>Click<\/strong> if you want to use click interaction.<\/li><li><strong>3D Depth<\/strong> appears for <strong>3D Flip<\/strong> and defaults to 50 px. <strong>Transition Duration (ms)<\/strong> defaults to 1000 ms.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize horizontal slider navigation<\/h2>\n\n\n<p class=\"wp-block-paragraph\">First set <strong>Content \u2192 Layout Settings \u2192 Layout Orientation<\/strong> to <strong>Horizontal<\/strong>. The <strong>Previous Arrow Icon<\/strong> and <strong>Next Arrow Icon<\/strong> controls appear for this layout and default to left and right angle icons.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Then open the widget&#8217;s <strong>Style \u2192 Slider Navigation<\/strong> section. The available controls include <strong>Arrow Color<\/strong>, <strong>Arrow Background Color<\/strong>, <strong>Arrow Size<\/strong>, <strong>Arrow Border Color<\/strong>, <strong>Arrow Border Radius<\/strong>, <strong>Pagination Dot Color<\/strong>, and <strong>Pagination Active Dot Color<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: The horizontal layout with previous\/next arrow controls and the <strong>Style \u2192 Slider Navigation<\/strong> section visible. This is a placeholder, not an existing screenshot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Save and verify the layout<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Review item order, responsive columns or slides per view, and spacing.<\/li><li>Test the chosen animation and click interaction if selected.<\/li><li>For horizontal layout, test both arrows and pagination indicators.<\/li><li>Click <strong>Update<\/strong> and preview the saved page at desktop, tablet, and mobile widths.<\/li><\/ol>\n\n\n<p class=\"wp-block-paragraph\">For individual card content and colors, see <a href=\"\/docs\/flipbox-addon-for-elementor\/create-story-collection\/\">Create a Story Flipbox Collection<\/a> and <a href=\"\/docs\/flipbox-addon-for-elementor\/manage-story-items\/\">Manage Story Flipbox Items<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Configure Story Flipbox layout in Elementor using vertical columns or horizontal slides, responsive item counts, presets, animation settings, and slider navigation.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":193,"menu_order":0,"template":"","class_list":["post-196","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":3,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/196\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/196\/revisions\/532"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/193"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}