How can I create an articles page outside of CMS templates in Webflow that lists a collection of article categories and displays associated articles under each category?

Published on
September 22, 2023

To create an articles page outside of CMS templates in Webflow that lists a collection of article categories and displays associated articles under each category, you can follow these steps:

  1. Create the necessary CMS collections:
  • Go to the CMS tab in your Webflow project.
  • Create two CMS collections: one for the article categories and another for the articles themselves.
  • Define the fields you need for each collection, such as title, description, image, and date.
  1. Create a static page:
  • Go to your Webflow project's Designer.
  • Create a new page where you want your articles page to be located.
  • Design the page layout using div blocks, text elements, and any other elements you need.
  • Add a dynamic list to display the article categories. Choose the category collection as the source.
  • Bind the category name and any other relevant fields to the dynamic list elements.
  • Style the list according to your design preferences.
  1. Create a collection page template:
  • Still in the Designer, go to the CMS tab.
  • Create a new collection page template for the articles collection.
  • Design the layout for an individual article page using div blocks, text elements, and any other elements you want.
  • Bind the article fields to the corresponding elements on the page.
  • Style the collection page template to match your desired design.
  1. Link the articles to their respective categories:
  • In the CMS Editor, create articles and assign them to their respective categories using the category field.
  • Ensure each article is associated with one or more article categories.
  1. Display the associated articles under each category:
  • Go back to the static page you created in step 2.
  • Inside the dynamic list that displays the article categories, add another dynamic list to display the associated articles for each category.
  • Choose the articles collection as the source and filter the list by the current category.
  • Bind the article title, description, and any other relevant fields to the dynamic list elements.
  • Style the list to match your desired design.

By following these steps, you can create an articles page outside of CMS templates in Webflow that lists a collection of article categories and displays associated articles under each category. This approach allows you to have more control over the design and layout of your articles page while leveraging the power of Webflow's CMS collections and dynamic lists.

Additional Questions:

  1. How can I create a dynamic list in Webflow to display CMS collection items?
  2. What are the benefits of using CMS collections in Webflow?
  3. Can I create custom layouts for CMS collection pages in Webflow?