How to Hide CMS Elements in Webflow: A Practical Tutorial

In this article, we'll explore a useful Webflow tutorial prepared by Nikolai Bain and posted on YouTube. The tutorial addresses a common problem that many web designers and developers encounter when working with content management systems (CMS): the management of items that must be present in a grid or list, but that do not necessarily require a dedicated in-depth page.

The Problem: Unwanted Dynamic Pages

Before we dive into the solution, it's important to understand the problem we're trying to solve. Webflow, like many other CMS, automatically generates a dynamic page with a unique URL for each item in a collection. This can be problematic for several reasons:

1. Blank or incomplete pages: Some elements may not have enough content to justify an entire page.
2. Unwanted indexing: Search engines may detect and index these pages, even if they are not intended for the public.
3. Confusing browsing: Users may find links to pages that don't actually contain useful information.

The Solution: A 'Trick' for Visibility Control

Nikolai Bain presents an elegant method for solving this problem, allowing us to define which pages should be visible and which should not, directly in the CMS collection. In addition, this method allows us to control visibility to search engines, adding the suffix 'noindex' in the code when necessary.

Let's now move on to the step-by-step guide for implementing this solution.

Step 1: Update the CMS Collection

1. Access your CMS collection in Webflow.
2. Go to collection settings.
3. Add a new field of type 'Option' (Option).
4. Name this field 'Visibility.'
5. Create two options: 'All' and 'No Index'.
6. Save changes to the collection.

This new field will allow us to control the visibility of every single element in the collection.

Step 2: Configure Collection Items

Now that we've added the field of visibility, we need to configure each item in our collection:

1. For items that must have a full page and be visible, set visibility to 'All'.
2. For items that don't need a dedicated page or that don't need to be indexed, set visibility to 'No Index'.

This configuration will give us the granular control necessary to manage the visibility of each element.

Step 3: Add Custom Code to the Template Page

The next step is to add custom code to the collection page template. This code will tell search engines if they should index the page or not.

1. Go to the settings of the collection template page.
2. Scroll to the 'Custom Code' section.
3. In the 'Head' field, add the following code:

‍

<meta name="robots" content="" />

Between the empty brackets we will insert the dynamic field "visibility".

This code will insert a meta tag that tells search engines how to treat the page, based on the value of the 'Visibility' field that we created.

‍

Step 4: Checking the Visibility of the Page Content

Now we want to make sure that the content of the page is visible only when necessary:

1. Go to the collection template page.
2. Select the main wrapper for the page content.
3. In the settings of this item, add a visibility condition:
   • Show when: Visibility equals All

This will ensure that the content of the page is visible only to the elements that we have set as' All 'in the CMS collection.

Step 5: Manage Links on the List Page

The last step is to make sure that on the page that lists all the items in the collection, the links are shown only for the items that have a full page:

1. Go to the page that lists all the items in the collection.
2. Select the button or link that leads to the individual item's page.
3. Add the same visibility condition:
   • Show when: Visibility equals All

This will hide links for items that don't have a full page, avoiding confusion for users.

Advantages of This Approach

By implementing this method, we obtain several advantages:

1. Granular control: We can decide element by element which should have a full page and which should not.
2. Optimized SEO: We avoid indexing empty or unnecessary pages, improving the structure of our site in the eyes of search engines.
3. Improved user experience: Users will only see links to pages with real and useful content.
4. Flexibility: We can easily change the visibility of an element at any time without having to change the code or structure of the site.

Practical Applications

This trick isn't just limited to a product's integrations. There are several other situations where it can be useful:

1. Team Members: On an “About Us” page, you might want to show all team members, but have full biographical pages for only a few of them.
2. Product Features: You could list all the features of a product, but have detailed pages only for the main features.
3. Portfolio: In a project portfolio, you might want to show all the work, but have detailed case studies for only a few.
4. Events: In an event calendar, you might want to list all events, but have detailed pages only for major or future events.

Additional Considerations

While this method is extremely useful, there are a few considerations to keep in mind:

1. Performance: Make sure that creating 'hidden' pages doesn't negatively impact your site's performance.
2. Maintenance: Remember to regularly update the visibility status of the elements as your content evolves.
3. Design consistency: Ensure that your user interface remains consistent, regardless of whether some elements have a dedicated page or not.

‍

‍

Nikolai Bain's tutorial offers us an elegant and powerful solution for a common problem in Webflow and other CMS. By implementing this method, we gain greater control over our content, improve the user experience, and optimize our site for search engines.

Remember that the key to using this method effectively is planning. Before implementing it, take some time to carefully evaluate which elements of your CMS collection need full pages and which don't. Also, consider how this structure will adapt to the future needs of your website.

Finally, don't forget to test thoroughly after implementation. Make sure that all elements are displayed correctly, that the links work as expected, and that search engines are indexing (or not indexing) the pages as desired.

With this powerful tool in your web design arsenal, you'll be able to create cleaner, more organized, and more effective websites in Webflow. Good work!

‍