Hi everyone, I wanted to ask if there’s a clean way to display multi-step hardware project tutorials in Webflow, mainly when they include diagrams, sensor notes, and code snippets. I’m putting together a small guide inspired by this ESP32 motion-detection project: https://www.theengineeringprojects.com/2022/03/iot-based-motion-detection-with-email-alert-using-esp32.html, but I’m not sure whether CMS Collections or a custom layout would be more practical. I’ve seen similar walkthroughs on Arduino forum threads and even some Raspberry Pi community posts where creators break each step into cards or tabs. A couple of IoT blogs also recommend keeping code in separate embedded blocks for readability. Has anyone here built a structured, multi-step tutorial layout in Webflow? What worked best for you?
Hello @Aria_James, welcome to the community!
So I think your best option is to use the CMS, that way you can use RTE, multi-image fields, dynamic fields, etc. The RTE is specially useful for you case because it is pretty flexible and you can even add custom code in it. I hope this helps.
Adding to Pablo’s notes;
I’m assuming you want several tutorials, and to add more later- the Webflow CMS and rich text element (RTE) are quite good.
Aside from your text content you’ll be able to embed images and video quite easily, as well as code blocks. If you want something special, you can use the embed element and drop in custom code for a demo, or a dynamic chart, etc.
The main reason to use the CMS is usually the fact that you can easily create a directory page, e.g. “list of tutorials” and it’s also updated via the CMS.