Wized Docs

Appearance

Set Class ​

The Set Class feature 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: Begin by choosing an element in your website layout where you wish to apply the Set Class settings.
  2. Apply the Set Class setting: Go to the "Settings" tab of the elements panel and select the Set Class 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 in the Function Editor: 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 in the Set Class configuration is defined in your Webflow project. Otherwise, you will not see visual changes when applying or removing the class.
  • Combo classes: If your element already has a base class in Webflow (e.g., "button"), adding a new class with Set Class (e.g., "highlight") will create a "combo class" (e.g., "highlight button"). Make sure that the styles for the combo class are set up correctly in Webflow to achieve the desired effect.

Advantages of Set Class ​

  • 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:
javascript
// Add the "highlight" class if the user is logged in
return c.loggedInUser;

Done! Now, when the user logs in, the "highlight" class will be added to the button, changing its appearance according to the styles you defined in Webflow. If the user logs out, the class will be removed and the button will return to its original style.