Webflow sync, pageviews & more.
NEW

How can I edit specific classes that I have created in Webflow? I am unable to locate the option box mentioned in an old response from 2014, and I do not see it to the right of the classes text field. The only dropdowns I see are for renaming or duplicating a class and selecting pseudo-classes. Here are screenshots for reference: [Include screenshots here]

TL;DR
  • Select an element, open the Style Panel, and choose the class in the Selector Field.
  • Modify properties such as layout, typography, and spacing, which update all elements using the class.
  • Manage classes by renaming, duplicating, or removing them via the dropdown next to the class name.
  • Use the Style Manager (shortcut: G) to search, view, and apply classes across the project.

You can edit a specific class in Webflow through the Style Panel, but the interface has changed since 2014. Here’s how to access and modify your existing class settings.

1. Locate the Class Selector

  • Select an element on the canvas that contains the class you want to edit.
  • In the Style Panel (right sidebar), find the Selector Field at the top.
  • If the element has multiple classes applied, all will be listed here. Click on the class you want to edit.

2. Modify Class Properties

  • Once the class is selected, the properties will be available below in the Style Panel.
  • Adjust layout, typography, background, spacing, and other styles as needed.
  • Any changes here will automatically apply to all elements using this class.

3. Managing Classes (Rename, Duplicate, or Remove)

  • Click the dropdown icon next to the class name in the Selector Field.
  • Options include:
  • Rename Class – Updates the name of the selected class across the project.
  • Duplicate Class – Creates a new independent class based on the current styles.
  • Remove Class – Detaches the class from the selected element (but doesn’t delete it from the project).

4. Use Global Search for a Class

  • Open the Style Manager (shortcut: G) on the right sidebar.
  • Use the search bar to find and manage all classes used in the project.
  • Click on a class name to quickly apply it to a selected element or edit its styles.

Summary

To edit a class in Webflow, select an element, use the Style Panel, and adjust the properties in the Selector Field. You can also manage classes through the Style Manager to view, rename, or remove them project-wide.

Rate this answer

Other Webflow Questions