How can I rename a copy of a class in Webflow without losing the settings or renaming the original class?

Published on
September 22, 2023

To rename a copy of a class in Webflow without losing the settings or renaming the original class, you can follow these steps:

  1. Select the element(s): Go to the Designer panel and select the element(s) that is using the class you want to rename.

  2. Edit the class name: In the Styles panel, locate the class name for the selected element(s). You should see a small pencil icon next to the class name. Click on the pencil icon to enter rename mode.

  3. Duplicate the class: While in rename mode, add a new name for the class by modifying the existing name. For example, if the original class name is "class1", you can change it to "class1-copy" or any other name of your choice.

  4. Apply the duplicate class: After entering the new name, press Enter or click outside of the rename field to save the new class name. This will automatically create a duplicate of the original class with the new name.

  5. Update the duplicated class: With the new duplicated class name, you can now make any necessary changes to the duplicated class without affecting the original class. You can modify the styles, settings, or any other properties as needed.

  6. Apply the duplicated class to elements: If you want to apply the duplicated class to other elements, simply select those elements and assign the duplicated class to them. Make sure to remove the original class if you no longer need it for those elements.

By following these steps, you can safely rename a copy of a class in Webflow without losing any settings or renaming the original class. This allows you to make separate modifications to both the original class and its copy while maintaining their individual configurations.

Example:

Original class name: class1

Duplicated class name: class1-copy

Note: It's crucial to update the class name in every place it's used within your project to ensure consistency and avoid any CSS conflicts.

Additional Questions

  1. How can I rename a class in Webflow without duplicates?
  2. Can I rename or update a class globally in Webflow?
  3. What is the best practice for renaming classes in Webflow to maintain SEO?