â–Ľ
Streaming live at 10am (PST)

Combo classes in collection items

I am creating a website that will one-page template to create page variations of the content inside the template, the problem is that the content in some of those pages variation it has different and the styles too and I cannot figure out how to use a combo class to separate those styles.

I created a CMS collection, inside, two pages using the elements of the collection. I would like to use on one page an H2 heading with one class and on the other page the same H2 heading with a different class a combo class.

It seems that when I create the combo class overrides both elements in both pages. Not respecting the one with the combo class.

I am approaching the solution in the wrong way? Maybe using the create pages under the collection items is not the best approach here.

Question: Can the same H2 elements use different classes on different pages? if so, how?

Thanks,


Here is my public share link: LINK
(how to access public share link)

It seems you’re making that change on a COLLECTION TEMPLATE PAGE in the deisgner, and what you call “pages” are two different pages for two different CMS Items of the same collection.

Right?

So everything is normal. You’re working on a template and everything you’ll do when showing an item on a collection template page will happen on all the items pages. That’s how the system work.

So what you want to have is a different layout for different items of the same collection. And that’s not possible out of the box because by definition, 1 collection = 1 layout.

There are many solutions to achieve this anyway. One is this one:

In your collection settings, add a field, like a toggle field that you name “alternative layout”. Let it off for the items you want in layout 1 and pass it on for the items you want with layout 2.

Now in your template: duplicate the H2. Give to only one of them the combo class ans style it as you wish.

Select the first H2. Go into conditional visibility and set it like Visible if Alternative layout is OFF
Select the other one and set it like Visible if Alternative layout is ON

So you should have only 1 h2 for each item now, and they’ll be different depending on how you styled it and how you’ve set your items.

You can use that technique for many elements in the template. So yes it is a bit messy, and a workaround, but it’s very ok to do.

1 Like

Hi Vincent,

First at all, thank you for taking the time to craft your response. This was very helpful and indeed I solve my problem with your suggested method.

Thank you,

1 Like

\o/ Very cool that you were able to solve it! I guess you also have clearer view of how Collection Template pages work and how to use conditional visibility to your advantage.