How can I create an alternating layout for the "What we do" section in Webflow, pulling content from a CMS collection?

Published on
September 22, 2023

To create an alternating layout for the "What we do" section in Webflow, pulling content from a CMS collection, you can follow these steps:

  1. Set up your CMS collection:
  • Go to your Webflow project and navigate to the CMS section.
  • Create a new collection or use an existing one for your "What we do" section.
  • Add relevant fields for the content you want to display, such as title, description, image, etc.
  1. Design your layout:
  • In the Designer, select the section where you want to display the "What we do" content.
  • Add a new collection list element from the Add panel.
  • Link the collection list to your CMS collection by selecting the appropriate collection from the dropdown.
  • Customize the layout of the collection list to match your desired design. You can use div blocks, columns, or flexbox to structure the content.
  1. Add alternating classes:
  • Modify the CMS template design for the collection item by clicking on it.
  • Add a class to the collection item, such as "even" or "odd", to differentiate the alternating items.
  • Duplicate the collection item and add the opposite class to the duplicated item.
  • Customize the design of each item separately to create the desired alternating layout.
  1. Populate the CMS collection:
  • Go back to the CMS section, click on a collection item, and fill in the fields with your content.
  • Repeat this step for each item in the collection, ensuring that the order alternates between the classes you defined in step 3.
  1. Preview and publish:
  • Preview your design to see if the alternating layout is working correctly.
  • Publish your changes to make the content live on your website.

By following these steps, you'll be able to create an alternating layout for the "What we do" section in Webflow, pulling content from a CMS collection. This approach allows you to easily update the content in the future without needing to make changes to the layout manually.

Additional Questions:

  • How can I add more fields to a CMS collection in Webflow?
  • Can I use animations or interactions with CMS collections in Webflow?
  • How can I style the collection list differently for mobile devices in Webflow?