Pages for a single CMS Item

Design help CMS
1

Hi! :slight_smile:

I’m designing a website for recipes, using Webflow’s CMS.

Recipe - Webflow CMS
Recipe - Webflow CMS4786×1945 299 KB

As per the screenshot, I envision separating each Recipe into several steps (e.g. 1. Make the Lasagna Sauce / 2. Make the Bechamel…); additionally there is an introductory page to the recipe (here: ‘Lasagna Bolognese’). Each step of the recipe has the following information that is unique to that step of that recipe:

  • Previous step title + link
  • Next step title + link
  • Instructions
  • Picture
  • Ingredients

I’m not too sure how to use the CMS for this purpose, given each recipe has several ‘pages’. Maybe I should use a slider? but I don’t want to have that sliding interaction. I want each step to have a new page feel.

  1. Should I treat the introductory page the same way as a step?
  2. How do I create these steps within a single recipe?
  3. Will the user be able to continue to the next step using his keyboard arrows?

I appreciate all the help I can get!

2

You can split your recipes and steps into two separate collections, linking them with a multi-reference field in between.

3

Thanks @art_ytc! I’ve done that, but I’m struggling to understand how I could add the keyboard interaction to move from one collection item to another

Here’s my public share link: