Streaming live at 10am (PST)

Any way to have CMS pages be more open to design?

I’d like to create a CMS Collection of articles. Unfortunately, my articles will need design flexibility. For example, at times I will want to insert a gallery of images linking to a lightbox. Another example is that I want to present chunks of information including image, title, description in a standard format linked across the website. I’m currently using Symbols to do that across several pages but anticipate wanting to continue using this structure within my articles.

Is there currently, (or will there be in the future), the ability to design Collection Pages with a big open space for multiple components instead of a fixed set of constrained fields? A rich-text field is just not going to be flexible enough for what I need.

At the moment, it’s looking like I’ll need to do this the old-fashioned way, building each page one at a time with links to previous/next, manually-created list pages, etc. That solution does not allow me to apply categories though, which is a serious limitation.

Any ideas to help solve this will be greatly appreciated. Thanks in advance!

To show you what I have in mind, here’s a series of pages posting chapters of a book draft that could have been created as a collection if this flexibility was available: https://feelingmind.io/book-draft/feelingwork

Use conditional visibility to set up components that you will show or hide with switch field in your cms collection settings.

For example create a layout for that lightbox and set its visibility to “show when certain switch is on”. Then when creating collection item just decide whether you will need that gallery or not and check or uncheck the switch

OK, @dram, that’s a function I hadn’t seen yet. What I’m leaning toward is to split my articles between “knowledge base” pages with full flexibility and less substantial “thoughts-in-progress” CMS articles. Having those switch fields will give me more room for flexibility in the articles section.

Thank you!

1 Like

You could combine @dram’s suggestions with @Finsweet’s recently released javascript library to open up even more design options.

1 Like

Bingo! We just released it after a lot of frustration with the rich text block limitations!

We’re super excited to see how users will use it!

1 Like

Wow-wow-wow! This new javascript library looks really awesome. Thanks @ColleenBrady and @dram for letting me know about it.

One more solution I’m looking at, that I’d like to get your feedback if possible: If I add the desired symbol to another silent page (not linked from anywhere) and publish it, I can open the Developer Tools (Chrome) and copy that element. Then, if I past that element into an embed field inside the RT section, it seems to display OK.

Almost.

Here is my Preview link for a page I’ve created with the test symbol at the top, under which is a Rich Text Field with the same element pasted into a code embed field: https://preview.webflow.com/preview/feelingmind?utm_medium=preview_link&utm_source=designer&utm_content=feelingmind&preview=eba7d1137c667a46b40ed2cf6f3d5a94&pageId=5f5a5da532b54a31d94b566e&mode=preview

Unfortunately, this embed does not show in Preview mode, you have to view it on a published page (https://feelingmind.io/test-messaround). Also unfortunately, in this example at least, it’s not converting well.

The H3 under the image is centered in the symbol, but left justifies inside the Rich Text field. I’m guessing that’s because the class applied to the Rich Text Field overrides anything brought in by the symbol element copy/paste. But I can’t figure out how best to fix it.

Do you have a solution? I’ve tried adding an extra class, but probably wasn’t doing it right.

Optimally, I will also, down the line, be able to adjust the root symbol’s styling and have that cascade even into the instances where it’s embedded inside a Rich Text Field. Am I hoping for too much?

Glad you like the library!

Do see differences in H3 alignment in both examples. Won’t have time to go through preview link today.

A thought: I sometimes have issues with ordered / unordered lists in rich text that is the displayed on collection detail pages not matching font body font style. It requires me to go in and make some additional style edits. Could be what’s going on here. This might help get you going if it’s a similar issue to what I’ve encountered.

To fix, typically create a new page and put a rich text element on it and add styling needed. Once the content is what I want on my collection pages, I delete the temp page.

Yes.

custom code with !important added to heading’s centered alignment.

Thanks @ColleenBrady - let me dig in a little deeper.

@dram - I would put that custom code in the symbol, yes? Is this where I would put it?

image

I’ll need to dig into the documentation to see the best way to do this. If you have a link or suggestion I’d be grateful.

Looks like Custom Attributes aren’t quite the thing.

I tried adding the h3 inside the symbol using an embed with the custom styling like this:

image

Problem is, this h3 doesn’t let me set up an override for different instances of the symbol. Not sure the best way to proceed…

Here is the article in the University. I suggest spending time in there - the amount of useful information is quite high in the Uni.

If your embeds will all be on the same collection template page you could use page custom code.

Ahhhh, the light is dawning. :sunrise:

And yes, the uni has a ton of awesome content. The difficulty at times is not knowing enough to have an accurate idea of what I still don’t know yet. Thank you for pointing me in the right direction!

1 Like