Updating the Style Guide & Template Pages in Webflow

Updating the Style Guide & Template Pages in Webflow

This tutorial is a bit of a mixed bag—covering a handful of smaller but important elements. Specifically, we’ll walk through how to update the style guide, how to manage template pages, and touch on some advanced tips like conditional visibility.

What is the Style Guide?

The style guide is a page inside your Webflow project named—unsurprisingly—Style Guide. It's set to draft, meaning it’s hidden from search engines and won’t be indexed or accessed by site visitors. This is by design.

Think of the style guide as a visual library of every common element and its default styling—headings, paragraphs, buttons, etc. Over time, it’s completely normal for your live site to deviate slightly from this source of truth. Teams change, people forget to update it, and new styles get introduced directly on other pages.

That’s okay.

But the goal is to maintain a clean and consistent baseline here as much as possible, especially for global tags like H1, H2, paragraphs, and links.

Style Guide Best Practices

A few key reminders:

• If you create a new element (say, a title with a unique class) on another page, it won’t automatically appear in the style guide. You’ll need to manually add it there.
• The style guide doesn't magically reflect every design decision made throughout the site. It must be kept up manually—but it helps ensure consistency across your build.
• Updating a global tag (like all H2 elements) should be done through the HTML tag styling, not by creating a new class.

For example, if you want to change all H2 headings to be bold:

1. Select an H2 element.
2. In the selector dropdown, choose All H2 Headings.
3. Apply the bold style.

This ensures that every H2 added going forward inherits that style. But if you click an element and start styling it without choosing a tag or class, Webflow will create a new class like Paragraph 56—which creates inconsistency and leads to confusion.

When to Use Classes Instead

If you want a specific instance of an element to look different (e.g., one heading is red, but not all of them), that’s when you use a class like text-color-red. Add that class to the specific element and apply your styling there. This way, global styles remain untouched.

Updating Template Pages

Next up: how to update your template pages, which are tied to CMS Collections.

In Webflow, static pages are marked in white. Collection (CMS) pages are purple. When you see purple elements, that means they’re dynamically pulling data from the CMS.

Each Collection has an automatically generated template page—even if you’re not using it. For example, your Tags collection might have a page, but if it has no content, it won’t be indexed. That’s fine.

But for the ones you do use—like blog posts or tutorials—you’ll want to know how to update them.

Binding Content Dynamically

If you want a heading or paragraph to pull its content from the CMS:

1. Add a heading to the template page.
2. Instead of typing in a static word, click the purple plus icon next to the text field.
3. Select the dynamic field (e.g., Name) from your CMS collection.
4. Now, the heading will change automatically based on the item being viewed.

You can preview this by toggling between different CMS entries in the page preview panel.

Updating Structure or Layout

You can update the structure of a template page like any other page. Add divs, containers, padding, etc. But remember: every item in that Collection will inherit the same structure. This is the “template” part of a CMS template.

If you want drastically different layouts between entries, CMS might not be the right fit for those particular pieces. Or, you can get creative using…

Conditional Visibility

Let’s say you want a certain section to only appear on some CMS pages. You can use a toggle field in your Collection and control visibility based on that.

Example:

1. Add a switch field to your Collection (e.g., Show Hero Section).
2. Turn it on for only a few entries.
3. In Webflow, add a hero section and set its Visibility to be conditional:
   • Show only if Show Hero Section is On.

Now that section will only display on the pages where you’ve toggled it on.

You can even apply conditional visibility based on things like publish date, category, or tags.

Final Thoughts

The style guide and template pages are two of the most powerful tools in Webflow for maintaining a scalable, consistent site. Here’s what to remember:

• Use the style guide to define global HTML tag styles for consistency.
• Use classes only when you need unique overrides.
• Keep template pages simple, consistent, and dynamic using CMS bindings.
• Use conditional visibility for controlled layout variations—only when absolutely necessary.

If you need help implementing more advanced CMS logic or dynamic layout strategies, that’s a great time to bring in a professional Webflow developer.

Have questions? Feel free to reach out to our team—we’re here to help.

‍