Skip to main content

Add more elements to Story Mix Light SML-PRO-158 & Story Mix Dark SMD-PRO-158

Follow this guide to add more inner columns to the Story Mix Light (SML-PRO-158) and Story Mix Dark (SMD-PRO-158) sections while preserving existing styles and interactions. Expand these sections with additional elements that provide a cohesive user experience across screen sizes.

Demo library links

Story Mix Light SML-PRO-158

Story Mix Dark SMD-PRO-158

**## Video tutorial: Expanding Story Mix sections

1. Select the row​

  • Begin by selecting the row which holds all the elements.

2. Change the number of columns​

  • Change the columns to the number of additional items needed. For this example, change the columns to 4.

3. Enable the repeater​

  • Enable the row repeater function temporarily to duplicate the inner blocks, styles and interactions.

4. Check the new column​

  • Verify that the new column has been added and all elements inside have been repeated.

5. Set column size​

  • Go to the new column and set the column size to 100%.

6. Final deactivation of repeater​

  • Select the row again and ensure the repeater is deactivated.

7. Update text​

  • Change the text as required.

8. Check responsive breakpoints​

  • Check the responsive breakpoints which are larger than the "your size" breakpoint to ensure the layout looks good.

9. Publish and preview the front-end visitor experience​

  • Publish** or **Update** the page. Then open the browser in a new window and review the front end to confirm the changes.