In Webflow, how can I create a Blog List Page with rows representing different categories and 1 featured Blog Post Title & Summary in each category section?

Published on
September 22, 2023

To create a Blog List Page in Webflow with rows representing different categories and a featured Blog Post Title & Summary in each category section, you can follow these steps:

  1. Create a template for your Blog Post:
  • Start by creating a template for your individual blog post. This template will define the structure and layout of each blog post on your Blog List Page. Add a Blog Post Title & Summary to this template, as well as any other elements you want to display.
  1. Create a Collection for your blog posts:
  • In your Webflow CMS, create a Collection to store and organize your blog posts. Include fields for the Blog Post Title, Summary, Category, and any other relevant information.
  1. Design your Blog List Page:
  • Create a new page in your Webflow project for the Blog List Page. Design the layout of the page according to your desired row and featured post structure. You can use grid or flexbox to create your rows.
  1. Add a Collection List to display the categories:
  • Drag and drop a Collection List element onto your Blog List Page. Choose the Collection you created for your blog posts.
  1. Set up filters for the categories:
  • In the Collection List settings panel, add a filter to display each category as a separate row. Use the Category field from your Collection and set the filter to show only one instance of each category.
  1. Design your category sections:
  • Set up your category sections using divs or sections within the Collection List item. Style each category section according to your design preferences.
  1. Add a Collection List inside each category section:
  • Within each category section, add another Collection List element. This will display the individual blog posts within that category.
  1. Set up filters for the blog posts:
  • In the Collection List settings for the inner Collection List, set up a filter to display only the blog posts that belong to the corresponding category. Use the Category field from your Collection and match it to the current category section.
  1. Design your featured blog post:
  • Within each inner Collection List item, design the section that will display the featured blog post. Include the Blog Post Title & Summary field from your Collection.
  1. Style and customize:
  • Style each element, section, and text to match your design requirements. You can use Webflow's Designer features to customize fonts, colors, spacing, etc.
  1. Publish your Blog List Page:
    • Once you are satisfied with your design, publish the page to make it live on your website.

By following these steps, you will be able to create a Blog List Page in Webflow with rows representing different categories and a featured Blog Post Title & Summary in each category section.