Jump to content

Summary Block - with Universal Filter & asymmetric layout

Recommended Posts

Posted

Hello, 

I'm trying to determine if the attached layout is something that could be possible to build in Squarespace. 

My thoughts are to use a summary block of posts, with the Universal Filter plugin (which I've used before) and then do I style each summary item, to follow the intended layout?

Ie, is it possible to style each summary item .sumary-item:nth-of-type(1) or something like that, to match the grid positioning of the design, but then when it filters, the summary items remain in the custom layout?

Might try playing around with it, but am just talking out loud to see if my thoughts on achieving this layout are logical, or if anyone has a better suggestion of how this could be achieved?

Thanks

 

Project Gallery.jpg

  • Replies 2
  • Views 953
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

@holahannah Hi! You could definitely use the summary block and universal filter. Instead of the universal filter, you might be able to achieve the filter with the archive block. Then you can target each summary block with the nth-child selector. Each row is different: some rows have three items, some have two, and some have only one. So custom modifications for each row will be required to achieve the layout.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Posted

Hi @Lesum, thank you so much! I didn't think of trying the archive block, but I will also try that out and see what the best solution is. Thanks for your feedback, had given me something to think about. 

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.