Skip to content

CSS classes

This configuration allows you to dynamically manage CSS classes for elements, enabling efficient control over their appearance and behavior based on specific conditions.

How does It work?

  1. Select element: Start by choosing an element in the elements panel in Wized where you want to apply the class configuration.
  2. Setting up Go to the right panel and select the CSS classes configuration.
  3. Enter class name: Input the exact name of the CSS class you want to add or remove from the element.
  4. Define the condition: Use the Function Editor to specify the condition that will determine whether the class is added or removed. This condition should return a boolean value (true or false).

Note

  • The class must exist in Webflow: Ensure that the CSS class you specify is defined in your Webflow project. Otherwise, you will not see visual changes when applying the class.

Advantages

  • Style reuse: You can define complex styles in Webflow and easily apply or remove them using Set Class.

  • Organization and clarity: By using CSS classes, you keep your code more organized and easier to understand, especially in large projects with many elements and styles.

  • Flexibility: You can combine Set Class with other settings and configurations to create dynamic and customized interactions, such as animations, appearance changes, or hover effects. This allows you to create more engaging and unique user experiences.

Practical example

For example, you have a button that you want to highlight only if the user is logged in. You can achieve this like this:

  1. In Webflow, create a CSS class named 'highlight': Add the styles you want to apply to the button (for example, a different background color).
  2. In Wized, select the button and apply the set class setting.
  3. In the "Class name" field, type "highlight."
  4. In the Function Editor, type the following condition: