Streaming live at 10am (PST)

Clickable collection list grid

I followed the instructions on the video “Turn a collection list into a responsive grid”:

It seemed to work but the blog posts aren’t clickable. It’s just an image with the title on top.

Is there something I’m doing wrong? Or do I have to add a separate link to it? I thought with CSS it would be automatic.

Also, any ideas how to put a text box with the words “Read more” in the grid as in the video? Each time I tried it put the text box outside the grid.

Many thanks

Here is my site Read-Only:
Live site:

Hi @jmarygraham,

You are heading in the right direction, but you are still missing some pieces.

For one, I would recommend against using images as BG images for headings. You may want to check this out for creating blog posts using Collections:

Here is an excellent video from our very own @PixelGeek on Grid and Collections:

Please let me know if you have any other questions,

~ Happy Designing ~

Thanks for the swift reply, @WebDev_Brandon. If that’s the case, why does the tutorial show how to do a grid with BG images? I’m confused. Can I not use that?

I already followed the creating blog posts using collections tutorial you shared but it didn’t help me link to the blog post.


You can use BG images, just not on the Heading element. You would connect a BG to a div block, which is what you are missing. Plus the div block needs to be a Link block or a button added to the div block.

Here is a video for what I mean:

Please let me know if you have any other questions,

~ Happy Designing ~

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.