What is causing all instances of a connected property to be overridden when editing it in Webflow?

Published on
September 22, 2023

When editing a connected property in Webflow, there are a few factors that can cause all instances of that property to be overridden. This can be frustrating if you don't want the changes to affect all instances. Here are some possible causes and solutions:

  1. Parent-child relationship: If the property you are editing is connected between a parent element and its children, any changes made to the parent element will propagate down to all the children. This means that if you edit the property in the parent, it will be applied to all instances of that property in the children. To avoid this, you can disconnect the property from the parent, or manually edit the property in each child element.

  2. Class inheritance: If the property you are editing is inherited from a class, any changes made to the class will affect all elements that have that class applied to them. This is known as class inheritance. To prevent the changes from being applied to all instances, you can create a new class specifically for the element you want to edit, or remove the connection to the class altogether.

  3. Global styles: If the property you are editing is a global style, it will be applied to all instances throughout your entire project. This is useful for maintaining consistency, but it can also cause all instances to be overridden if you want to make individual changes. In this case, you can either create a new style specifically for the element you want to edit, or unlink the property from the global style and apply it directly to the element.

  4. Interaction triggers: If the property you are editing is connected to an interaction trigger, any changes made to that property will trigger the interaction for all instances. This can be useful for creating dynamic effects, but it can also cause unintended changes. To avoid this, you can either disconnect the property from the interaction trigger, or create a separate interaction with different settings for the specific element you want to edit.

In summary, when editing a connected property in Webflow and you don't want the changes to affect all instances, you need to consider the parent-child relationship, class inheritance, global styles, and interaction triggers. By understanding these factors and taking the appropriate actions, you can ensure that your edits only apply to the elements you want.

Additional questions:

  • How can I disconnect a property from a parent element in Webflow?
  • Can I create a new class specifically for an element in Webflow?
  • How do I unlink a property from a global style in Webflow?