I am currently trying to work up a new customer testimonial page that is bound to a collection, within the page most of the customer cards (content) will be set within the 3 column grid, however, I want to highlight some featured customer cards as a full-width card. I am unable to figure out how to set this layout using the collections as the collections wrapper uses the same styling throughout, so I am unable to make the top row of my grid full-width as this makes them all full-width.
I have attached one of my draft mockup designs to show the layout I am after with the 3 columns vs the full-width. Currently, I am testing the build and have it set as new sections per ‘type/styling’ of the row I am after eg. a different section bound to the same collection (the first section being the first full width, the second section being the 3 col row, and the third section being the next full-width row etc). This means that the full collection on the page is separated which means the second 3 col grid doesn’t run on from the previous and starts again (duplicate). I hope I’ve explained it clearly, it’s hard to explain in writing
There must be a better way and I am just missing it…? I am fairly new to using the CMS and understanding the functionality of it.
Thanks in advance!
Here is my mock testing site share link: (Webflow - 10 Feb 2021 Copy of Main Website
Draft mockup designs