I am currently building a digital magazine subscription website using Webflow CMS + Memberstack. We have various ‘templates’ on how the articles in the magazine looks like, and we have mainly 3 article templates:
- Hero Image + single-column Rich Text
- Hero Image + double-column Rich Text
- Hero Image + Rich Text + interactive elements
I understand there are certain conditionals we can create on Webflow CMS collections to present the content in a certain way. Hence, templates 1 and 2 are easily doable on Webflow CMS collections settings through the conditionals.
However, for template 3 that require some interactive components that utilises Webflow’s interaction and animation features, such as on scroll, on click, hover, .etc, I’m scratching my head over how to implement such elements into the generated pages. I was wondering how can I implement such elements into the templated pages without sacrificing the benefits of the Webflow CMS.
Is there a way for us to add custom, additional content to each generated page without breaking the usual template? I’ve been searching around for similar solutions but to no avail, perhaps I’ve worded it wrongly. I welcome any sort of help or direction, and I don’t mind custom code as well as I’m quite well versed in HTML/CSS/JS.
P.S: For those wondering, some of the interactive components I intend to add are word definition tooltips, chronological timeline scrolling, image change on button click, .etc.