Instructions

These instructions will show you how to get started editing your website. If you are just beginning with Webflow, I recommend you to take Webflow 101 Crash Course first so you understand the basics of using the software.

Services Page: Adding additional services with project examples from the CMS.

Previewing the Services page in the Designer, you will only see 1 project being displayed for each service, however once the sight is published, all of the projects will be displayed (this is because we are using filters and custom attributes for this element). If you wish to change the names of the services/categories, do not delete the existing items in the Project Categories CMS, just replace the name and slug.

01. To add an additional Service (e.g. Branding) and your projects to be displayed as a slider on the Services page, you will first need to create a new CMS item in the Project Categories CMS Collection.

02. Connect the relevant projects from the Works CMS Collection under the dropdown fieldWork Category.

03. On the Services page, duplicate the lastService Section element. Locate the two Collection Lists within this section both named Gallery List Wrapper. One should be Display None (hidden).

04. Select the first Gallery List Wrapper element (not hidden), go to it's settings and scroll until you find Filters. Edit the dropdown so that they display:

Work Category - Equals - your new category.

05. Repeat the same step with the hidden Gallery List Wrapper. This element will be the one displayed when the site is published.

06. Outside of the Collection List, locate Gallery Slider. Go to it's setting and scroll until you find Custom Attributes. Edit the dropdown so that it displays:
‍
Name: fs-cmsslider-element
Value: slider-4‍

07. Locate Gallery List from the hidden Collection List. Go to its settings and scroll until you find Custom Attributes. Edit the dropdown so that it displays:

Name: fs-cmsslider-element
Value: list-4

08. Locate the Service Link List Wrapper Collection List within the Service Grid. Go to its settings and find Display Limits where you are able to limit items. Edit the input so that it displays:

Show: 1
Start at: 4

The number you input for ‘Start at:’ will need to correspond with the ‘Order of Appearance’ number from the Categories CMS Collection so that it links to the correct Collection Page.

09. Publish the site.

If you intend to add additional services/categories and want each service to showcase a slider of projects related to that category, you will need to update all of these inputs to reflect the amount of sliders/services you want to display. For example, if you provide 7 services, you would increase each value until you reach:

Name: fs-cmsslider-element
Value: slider-7

Name: fs-cmsslider-element
Value: list-7

Show: 1
Start at: 7