Streaming live at 10am (PST)

Wondering if a sticky anchor sidebar is possible

Hi everyone!

I am working on designing out a new resource center, and it has more of an editorial feel. I was wondering if it is possible to have an sticky anchor bar within a blog post that anchors you to different sections of that blog post.

For example I would be using “chapters” and id love if this column was sticky (marked in pink) and anchored to different sections of the post.

Im thinking each “chapter” would be its own field in the collection, and hopefully id be able too customize the name of each chapter… not sure how that would work though.

Thanks so much ahead of time, see my mockup for reference!

It would be tricky if you wanted to have one field for the whole content.

But as you’re ok with a known maximum number of anchored sections, this is easy for Webflow CMS.

Just add your RT or Text fields, each for one section. Then Text fields for the sections title.

You’ll design your template and place each section field inside of sections, and define anchors for those sections. Then you’ll build your mini menu and use text links linked to your sections titles. And you’ll set the IDs to redirect to on the links.

Thank you Vincent!

If I had a number of anchor sections like 6 fields per say, and we only used 5 for a certain post, would there be a big blank space at the bottom or is it okay if I dont use a specific field?

I also was sort of thinking this for how I built out the post, it would go something like

Text field (for blog post introduction)
2 column image field
1 column full width image
testimonial
Text field (for chapter one)
2 column image field
1 column full width image
testimonial
Text field (for chapter two)

Etc, and I could have whoever is populating decide if they want to use one of the three options (either 2 column image field, full width image, or testimonial) to break up each of the sections.

Is this possible? They would use any combination of the 3 options, might use none, might use all 3, will the space be filled if they only use 1 or 2 of the options?

Ideally id love for it to be editorial styled similar to https://focuslabllc.com/case-studies/marketo

But all of the fields would not be used all of the time.

Or the other option I was thinking, is somehow coding the testimonial so when I create a testimonial in the RT field that it styles exactly the way I want instead of using a collection for the testimonials…

Id love any insight!

It could. To avoid it you could design elements that have no padding or margin so that they shrink to nothing when they’re not populated, however this is difficult to do, and there is a better, appropriate way to address this.

Starting at the section 2 (in the template), select the section 2, and add a Conditional visibility in the Settings panel. Something like Is Visible When {selected CMS element} I Set. And you select either the title of the section 2 or the text element of the section 2. It means if the fields are left blank then the section won’t show up. Repeat that strategy for section 3 to 6. If you’re sure, for example, to always have a minimum of 3 sections, then start this strategy on section 4.

Yes, using the same technique I described previously. You can even have 2 sections using the same CMS data but presenting it differently, and a switch field in the CMS, to chose one or the other, then you link each section to a state of the swich. Starting to understand how you can make great templates with Conditional Visibility ? :slight_smile: You could also link the visibility to a category of the post, if there’s a categories collection.

I let you digest this and come back with new questions.

Thank you so much Vincent, this is awesome. Im just happy to know its possible

@Tanya_Higgins, did you ever get this to work? Would love to see how you set it up if possible :blush:

Hi @otte4prez unfortunately I didnt end up going this route, I decided not to have this be a CMS item since we will only have a set amount im just going to populate them as regular pages so its much simpler and more flexible!