Decide when elements should share a class and when they need an independent style.
Rename and Duplicate class
Explain the different results of Rename and Duplicate class.
Combo classes
Use a combo class for a variation and identify which matching elements a change affects.
A new example
Apply these decisions to a new example that you build and explain.
Before you begin
What you already know
Know how to add and select a Box and a Paragraph in the Webflow Designer.
Your practice page
Have a Webflow practice page you can edit. Start with a blank exercise page.
Your tools
An AI assistant that accepts the lesson file or its full text. To check your work, use the Webflow MCP server if connected, a Sandbox link with an available interactive browser, or screenshots and settings you describe. MCP is optional; no Webflow publication is required.
AI-guided pilot
Learn Webflow classes with your own AI assistant
Build small examples in Webflow, predict what a style change will affect, and ask questions as you go. Your assistant guides the exercise in your language.
The animations show controls and changes in a reconstruction of the Webflow Designer. They open on separate pages and do not modify your project.
You can talk to the tutor in your own language, even though the lesson file is written in English. The written reference and animations are available in English and Italian.
The lesson file is enough to start: attach it to your AI assistant. The ZIP contains the same file and instructions for getting started. Either way, the tutor can offer links to the online animations.
Attach the lesson file to a new conversation in your AI assistant. If attachments are unavailable, paste the whole file.
Write “Let’s begin”, or a short start message in your own language.
Start on a blank exercise page. The tutor helps you prepare it and agree how to check your work. You make the changes.
You need a Webflow account, a blank practice project and an assistant that accepts a file or pasted text. You should know how to add and select a Box and a Paragraph in the Designer.
How will the tutor check my work?
You and the tutor choose an available route: Webflow MCP, a Sandbox link with an interactive browser (including ChatGPT Work where available), or screenshots and settings you report. The tutor verifies its actual access before relying on it. MCP is optional.
With Sandbox, you edit in the original Designer, wait for saving and tell the tutor. It reloads the same Sandbox to inspect the update. For a shared tab, use your assistant’s tab picker if it has one; otherwise provide the browser and URL. The tutor confirms the project and page.
Can I pause and resume?
Ask for a progress recap. In a new conversation, attach the lesson file and that recap. Access to your project must be checked again; conversations do not sync automatically.
Written reference and animations
The tutor offers a short animation when it can help. It shows where a control is or how an example changes in a reconstruction of the Designer. Open it in your browser, then return to the chat; you do not need to watch them all.
This is a pilot tutorial. Your assistant’s tools and permissions affect what it can inspect; it may ask you for evidence. You do not need to publish your Webflow project.
A shared class connects the styles of several elements without sharing their content.
Rename changes the shared class name; Duplicate class creates an independent class.
An edit in the combined context affects matching elements, not just the selected instance.
A utility is an ordinary class used for a reusable purpose. The u- prefix is a convention, not special Webflow behavior.
A quick reference
The guided exercise helps you decide which elements should share a style and when you need an independent variation. You build the examples on your own Webflow practice page, predict what will change and explain the result.
Shared style, separate text
A class is a reusable set of style rules. Two Paragraph elements can share a class and therefore a background color, while keeping different words. Changing their class background can affect both; editing one element’s text does not change the other’s text.
Rename or Duplicate class
Rename changes the shared class name. It does not separate the elements’ styles. Duplicate class creates an independent class with copied styles. Use it when the new element should stop following later edits to the original class. Duplicating a class is different from duplicating an element.
A base class and a combo class
A combo class adds a variation to a base class. The base still contributes styles; the combination can replace the value of an individual property. In the Style panel, check which class or combination you are editing. A change in a combined context affects all elements that match it, rather than only the selected instance.
Utilities and the current context
A utility is an ordinary class reused for a focused purpose, such as spacing or alignment. A naming prefix is a convention, not special Webflow behavior. Applying the class to an element and changing a style while a class combination is selected are different actions. Check the current context before changing a value you intend to share.
The tutorial ends with a new example for you to plan, build and explain. CSS names in the published output and border radius, which controls corner rounding, remain optional extensions. The video has its own examples and chapters in Resources below.
No. A class shares style rules. The text of each separate element remains its own content.
Does Duplicate class create another element?
No. It creates an independent class with copied styles. Duplicating an element is a different operation.
Do I need the cloneable project?
No. The tutor helps you build the exercise on your own practice page. The video project is an optional resource for the separate video lesson.
Help improve these tutorials
What helped, or where did you get stuck? Mention the lesson and the assistant you used. Please leave out private project information.
Your feedback is processed on this site through Cloudflare and sent to my email. I use your email to reply and do not use it for marketing. Technical request data is also processed to deliver the message and limit abuse. Privacy policy