Masonry grid - Bypass first card for some static text

Hi folks.

Im building a page with stacked CMS masonry grid and want to skip the first card for some text and for it not to be part of the filtering system nor the lightbox (just static).

Can someone point me in the direction needed to achieve this? :slight_smile:

Thanks!


Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

I didn’t even know Refokus had a CMS filter. I’d check their docs because the filter-exclusion part is the most complex part of your UX design plan.

For Finsweet’s, I would have tried this, to see if it cooperates with FS Filter. Refokus may have something similar, or an “ignore Nth item” setting.

Otherwise, you’ll be looking for an event that fires after a filter update, and then you’d re-inject your card after every filter update.

1 Like

hi @alfred_ingvar_a if you have some developer experience you can try custom JS. In simple principle :

  1. grab your element (let say you will give it id static)
  2. grab CMS collection wrapper (let say you name collection list art-list)
  3. add “static” as first child into you list
const static = document.querySelector("#static");
const collection = document.querySelector("#art-list");
collection.prepend(static);

Read only

LIVE

1 Like

Thanks a lot. If you look at my preview page, everything seems to be right but the text div has a display: none by default. When I remove the display style in the browser inspect mode it appears perfectly, but I don’t know how to do that inside webflow.

Do you have a solution?
@Stan

hi @alfred_ingvar_a as you do not follow forum guide I can’t help as you do not share project Read only. What I see in live preview is ERROR: Can't create duplicate variable: 'static' so check your code where the issue is.

why? Did you set it up this way? otherwise give it eg. display:block

I found a solution, don’t know if its safe but it works:

.static { display: block *!important*; }