How can I dynamically insert just the slug into a link on a template page in Webflow?

Published on
September 22, 2023

To dynamically insert just the slug into a link on a template page in Webflow, you can use the {{slug}} dynamic field. Here's how:

  1. Open your Webflow project and navigate to the template page where you want to insert the slug.
  2. Select the element (e.g., a link) where you want to dynamically insert the slug.
  3. In the link settings panel on the right-hand side, find the URL field.
  4. Replace the static portion of the link URL with {{slug}}. For example, if your original link URL was "example.com/blog/post-1", change it to "example.com/blog/{{slug}}".
  5. Save your changes and publish the site.

Now, when you view a dynamically generated page that uses this template, the slug for that specific page will be inserted into the link URL. This means that if your page has a slug of "post-1", the link URL will dynamically become "example.com/blog/post-1".

By using the {{slug}} dynamic field, you can ensure that the link URL always corresponds to the slug of the page being viewed. This is particularly useful when working with dynamic content such as blog posts or product pages, as it allows you to create consistent and SEO-friendly URLs.

Example:

Original link URL: example.com/blog/post-1

Updated link URL: example.com/blog/{{slug}}

Note: Make sure that you have properly set up slugs in your CMS collections or collection items for this dynamic field to work correctly.

Additional Questions:

  1. How do I create a dynamic link in Webflow?
  2. Can I use dynamic content in the URLs of my Webflow website?
  3. What is the purpose of the {{slug}} dynamic field in Webflow?