Webflow Joe

F'in Sweet Webflow Hacks

Dynamic CMS-generated anchor links

What can this be used for?

  • Creating dynamic sub navs on Template pages
  • Create dynamic ids for sections of your site
  • Allow clients to customize anchor scrolling on Template pages

Step 1

Create the html

Create an element that will act as the anchor links. This menu and link buttons can be in any layout you want.

Make sure to give them all the same class name.

[screenshots of this ]

Step 2

Create a CMS setup

In your collection, add a text field for each button you want to generate in the CMS.

For example, if you have 3 customizable anchor links on your template, you would create 3 fields called "Anchor text 1", "Anchor text 2", "Anchor text 3". Note that these are text fields - not link fields.

[ image example ]

We're going to use those names to generate anchor links for our bottions and ids for our sections.

Step 3

Add the code

Before <body> tag

What he heck does that mean?

Before <body> tag

Everything happens automatically based on what you name the link. You can change the names of the buttons at any time, add or remove buttons, and this code will adapt to the new namings. It's really flexible!

Nice! Dynamic anchor linking is possible!

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!