Static CTA button in CMS collection?

Hi there!

I am building a CMS “programs” section that I’d like to look like this:

However, I haven’t been able to figure out how to place a static “explore all projects” button in the bottom right of the section (without changing the formatting of the individual CMS items, or “projects”). Are there any workarounds for this?

Cheers,
Anthony

1 Like

Hi @AnthonyV and welcome to the forum! :slight_smile: :webflow_heart:

Can you please share your read-only link?

Thanks, @donaldsv!

Here is the link to the project: thisisuncharted.webflow.io

Hope that helps :smiley:

Hi @AnthonyV

Can you please check your link?

Here’s how I would do it:

https://preview.webflow.com/preview/grid-with-see-more?utm_source=grid-with-see-more&preview=9d9ea4d0c8467933dcf3c0102631d739

So basically, I have a grid section with a collection inside (which is grid too) and everything is manually positioned so the “see all” block can be placed “on top” of the collection list. Hope that makes sense!

Hi, @donaldsv !

Wow, fantastic. I really appreciate you taking the initiative and building that out.

I did my best to replicate it under the programs page, but am struggling to get the CTA link block manually positioned. What am I missing?

I also made a short screen capture video to show you what I mean.

Thank you!

Hi @AnthonyV

Your collection list will need to be manually placed as well. I couldn’t make it work by dragging the block either. You will have to place it with the values on top of the buttons Auto/Manual position. The link block need to start and end at column 3 and start and end a row 2.

Let me know if it works! :slight_smile:

Hey, @donaldsv

That did the trick! Really appreciate you walking me through this.

However, the link block that I placed in the bottom right is now spanning across multiple rows, and I can’t seem to figure out why. Any idea how to fix this?

Hi @AnthonyV can you please share your project up to this point of your process?

Absolutely! Here you go, @QA_Brandon . This can be found under the “programs” page.

Ok, so I see your problem @AnthonyV.

Since you have your CMS collection as an auto placement that will take up the first two rows or more, depending on your collection settings.

Since the CTA block is a static item it will flow to the next row/column in auto. When you try to auto place it, it no longer has the same bounding attributes that your CMS collection item has, and therefore will look the way it does.

The only workaround would be to set a specific height to it or use the ‘Align Self: End’ as your placement. The button placement is reach the 2nd row as an abnormal height element, even though it is set to Auto.

1 Like

What I did in the project I shared to you was to set a specific height on the grid rows for both the section and the collection list :slight_smile:

@QA_Brandon @donaldsv Thank you so much for the pointers! That did the trick :smiley:

2 Likes