In Webflow, how can I create a page with a Collection List Wrapper that displays different newsletters when I click on each item in the list?

Published on
September 22, 2023

To create a page with a Collection List Wrapper in Webflow that displays different newsletters when an item is clicked, you'll need to follow these steps:

  1. Add a collection list to your page: Go to the Elements panel on the right side of the Webflow Designer and search for "Collection List." Drag and drop it onto your page wherever you want it to appear.

  2. Connect your collection to the list: With the collection list selected, click on the "Connected Collection" field in the settings panel on the right. Choose the collection you want to display newsletters from.

  3. Design your collection list layout: Customize the layout of your collection list by adding and styling elements within the collection list wrapper. You can use text elements, images, links, or any other elements you want to display for each newsletter item in the list.

  4. Create a dynamic link for each item: Select the element that represents each newsletter item in your collection list. In the settings panel on the right, choose "Link settings" and click on the "plus" icon next to "Dynamic" to create a dynamic link.

  5. Select the target page: In the dynamic link settings, choose the page where you want to display the details of each newsletter. This page should contain a Collection Item Wrapper to display the specific details of each newsletter item.

  6. Pass the dynamic data: In the dynamic link settings, select the field from your collection that you want to pass as dynamic data to the target page. This could be the newsletter title, image, description, or any other relevant information.

  7. Design the target page: Go to the target page where you want to display the details of each newsletter. Add a Collection Item Wrapper to the page and customize the layout and content of this wrapper to display the dynamic data from the selected newsletter item.

  8. Preview and publish your site: Preview your site to see how the Collection List Wrapper displays different newsletters when you click on each item. If everything looks good, publish your site to make it live on the internet.

By following these steps, you can create a page with a Collection List Wrapper in Webflow that dynamically displays different newsletters when you click on each item in the list.

Additional Questions:

  1. How do I create a Collection List in Webflow?
  2. What is a Collection Item Wrapper in Webflow?
  3. Can I add interactions to my Collection List in Webflow?