Community forum for knowledge and support

Updated 5 months ago

Linking a Cms Collection to the Faq11 Component

At a glance

The community member is using a FAQ11 section and wants to link it to a CMS collection. The problem is that the component has two different columns (left and right), and the community member would need to link each column twice to the same collection list with different filters to avoid duplicate questions. The community member asks if there is a way to link the CMS to the FAQ without having to link each column differently, as this would be an extra step for the client. The community member's current solution is to remove the two columns and use a single grid, but the spacing between questions is uneven, making the grid look odd.

In the comments, other community members provide suggestions, such as adding a minimum height to the boxes and setting a maximum character limit in the CMS to ensure consistent spacing. The community member thanks them and says they have implemented these recommendations. Another community member suggests using JavaScript to only allow one item to be open at a time, but the community member is unsure if this is the best solution.

The community member also explores the pricing modules for inspiration but finds that the flexible height and interactions (open or closed) in the FAQ component are not easily replicated. The community member is considering using the two columns again and having the client select left or right in the CMS, which would solve the design problems but add an extra step for the client.

Useful resources

Hello, I am using the FAQ11 section and would like to link it to a CMS collection.

📌 The problem: this component uses 2 different columns - column left & right - so I would need to link each column twice. (To the same Collection list but with a different filter to make sure the same questions do not appear twice, on column left and on column right)

🤔 My question: is there any way to link a CMS to this FAQ without having to link each column differently? This would be an extra thing to think about for the client when it is time to add item (“does it go left? does it go right?“)

My current (not ideal) solution: I got rid of the 2 columns and now have 1 grid. But the spacing between questions is uneven so the grid looks odd. (Please see screenshot below)

Looking forward to reading any tip! Thanks ^^

Attachment
Screenshot 2024-11-22 at 23.46.41.png
Á
M
M
11 comments

Hi ,
I'd add a minimum height to the box to make sure it will look the same either the client adds a longer or a shorter sentence. Use the height of the 2 liner box as a minimum.

You can also set the max character in CMS making sure there won't be a third line

Hi , thank you for the tips, have done what you recommended 🙂

I'm glad it worked! 🙂

I'll be sending you a reply soon - its a bit involved. Just wanted to acknowledge this message.

Hi , nice thanks! Looking forward to your reply!

Hi I just wanted to add that the overall look is not great when multiple items are open. I am thinking about using Javascript to only allow to open 1 item at a time but not sure that’s the best fix. Looking forward to your feedback!

Attachment
Screenshot 2024-12-06 at 20.36.03.png

check the pricing modules how those assembled for inspiration. There's a way to fill up the space based on the largest element next to the other one I think.

Hi , thank you for the tips. I have checked but the pricing modules are not like this FAQ component. There is no “flexible” height working in combination with interactions (open or closed). This is the result I get:

Attachment
Screenshot 2024-12-09 at 17.40.23.png

If I did not have the color background or the rounded corners, it would work fine, however.
--
I am thinking to use the 2 columns again and make the client select left or right in the CMS. This would solve all of these design problems but it is one more hassle for the client...

apologies for the delay here. Got pretty sick the last week or so.

I took a look at this problem and I think you are on the right track. Unfortunately there is no simple answer.

Here's a quick loom:
https://www.loom.com/share/7a759ad2c4684070b71d18aa3e4903ac?sid=b455ebf2-5dca-48dc-8705-5cbef2d985e8

Here's my read-only link:
https://preview.webflow.com/preview/matts-sublime-site-20969c?utm_medium=preview_link&[…]5287513ca95cdeebf0474dbe7f293506&locale=en&workflow=preview

Here's my custom component that I mention:
https://www.relume.io/component-page?component_id=82d70785-df0c-4884-b45e-abd88d6615cf

Hi great, thank you for taking the time to share, I appreciate it! I took a look and will discuss all that with the client but I think the 2 columns with different filters will be the solution here to allow the users to see content underneath the open dropdown.

Add a reply
Sign up and join the conversation on Slack