This is part of a course page view I’m building on Webflow for a client. So far all the fields were easy to think and implement, like practitioner, date, duration, etc.
But how could I do this so that my client creates this via CMS and it appears in order depending on the course?
Hello!
One way you could do this is for each item (1, 2, 3) to be created from a separate collection, for example, it could be called “Lesson Steps.” Then within your main “Lessons” collection, you would have a multi-reference field pointing at that Lesson Steps collection so your client can select which steps apply to each lesson. On the Lesson collection template page, you would insert a collection list that pulls from the items selected in the multi-reference field, so the order would always reflect the order in which the steps are selected within each item.
If you are wanting to animate the line within each item, I would have the check and line all be part of each individual item and then the items would be flush against each other without any space so the line can animate from top to bottom and be touching the next item after it. Then, for the last item in the list you can use a little custom CSS to set the wrapper of the line to display: none so it doesn’t appear…something like this:
.lesson-tip-item:last-child .lesson-tip-line {
display: none;
}
I hope this helps!