How to Add CMS Content to Webflow Pages

Step 1: Create a CMS Collection

To begin, open your Webflow project and go to the CMS panel found in the left sidebar. Click on the "Add Collection" button to create a new set of dynamic content. Choose a name that accurately reflects the type of content you want to manage, like Blog Posts, Testimonials, or Portfolio Projects. Add fields that match the content you'll store, such as Plain Text for titles, Rich Text for detailed content, Image for photos, Date for publication dates, and Reference for links to other collections. After setting up the fields, click Create Collection to finalize the framework for managing your content.

Step 2: Add Content to Your CMS Collection

Once your collection is created, select it from the CMS panel to add entries. Click on the "Add New Item" button to open a new entry form. Fill in the relevant details for each field you created, such as a title, content details, and images. After completing the fields, save your entry by clicking the Save button. Repeat this step to add additional entries as needed.

Step 3: Building a Template Page

Go to the Pages panel and locate your newly created collection, typically found under Collection Pages. Click on your collection's page to open the template editor. Here, you'll design how each item from your collection will be displayed. Use elements from the right sidebar to drag and drop components like headings, images, text blocks, and buttons onto your template page. To connect an element to your CMS content, select the element, then use the settings panel to choose the appropriate field via the Get text from or Get image from options. Customize the layout and style to align with your site’s design.

Step 4: Add a Collection List to Another Page

To display multiple items from your CMS collection on a different page, such as a blog overview or portfolio showcase, add a Collection List. Navigate to the desired page, like your homepage, and drag the Collection List element from the left sidebar onto the page. In the settings panel, choose your collection from the dropdown menu to link the list to your CMS content. Within the Collection List, add elements similar to the template page and link them to the corresponding CMS fields.

Step 5: Customize and Style Your CMS Content

Customize the layout of your Collection List by selecting a display format like grid or list, or create a unique configuration. Style individual items to ensure they align with your website’s visual identity, adjusting colors, sizes, and margins as needed. Use Webflow’s preview mode to view how the CMS content appears both individually and in a list format.

Step 6: Publish Your Changes

Once satisfied with your CMS setup and content presentation, the final step is to publish your site. Click on the Publish button located at the top right of the Webflow editor to make your CMS-integrated pages live for everyone to see.