Wized Docs

Appearance

Set Style ​

The Set Style configuration allows you to dynamically modify any CSS property of an element, providing you with the flexibility to create custom and interactive user interfaces. Change colors, sizes, positions, and any other visual aspect of your elements in response to events, data, or conditional logic.

Why use Set Style? ​

  • Visual interactivity: Create visual effects and interactions that respond to user actions or changes in your application.
  • Dynamic adaptation: Modify the appearance of your elements based on real-time data, such as product availability, user role, or information from an external API.
  • Custom personalization: Adjust the style of your website for each user or situation, creating a unique experience.

How does it work? ​

  1. Select Element: Choose the element in your Webflow design to which you want to apply the configuration.
  2. Apply the Set Style configuration: In the Settings tab, select the Set Style configuration.
  3. Choose CSS property: Use the dropdown menu to select the CSS property you want to modify (e.g., color, background-color, width, height, etc.).
  4. Set the value in the Function Editor: Use the Function Editor to specify the new value for the CSS property. You can use any data available in Wized.

Note: Ensure that the value you return is valid for the selected CSS property. For example:

javascript
return '#ff0000'; // for color
return '10px'; // for size
return 'block'; // for display
  1. Add conditions (optional): If you want the element's style to change only under certain circumstances, you can add a condition in the Function Editor.

How to create seamless transitions ​

While Set Style allows you to change the CSS properties of your elements dynamically, these changes happen instantly by default. To create smooth, animated transitions, you can combine Set Style with Webflow's CSS transitions.

Steps to create smooth transitions ​

  1. Define transitions in Webflow:
    • Select the element in Webflow to which you want to apply transitions.
    • Go to the "Effects" tab and choose the "Transitions" section.
    • Click the "+" button to add a new transition.
    • In the "Property" dropdown menu, select the CSS property you want to animate (e.g. background-color, width, opacity, etc.).
    • Choose the duration of the transition and the type of animation (ease-in-out, linear, etc.). You can use the predefined options or create a custom transition using the "Easing Editor". This editor allows you to specify how the transition progresses over time, providing various easing functions that control the acceleration and deceleration of the transition.
    • If you want to apply the same transition to all CSS properties of the element, you can select the "All Properties" option.
  2. Set Set Style to Wized:
    • Set the Style to the CSS property you animated in Webflow.
    • In the Functions Editor, define the logic to change the CSS property value based on desired conditions.

Example ​

Imagine you have a button that changes color when a request ends. You can create a smooth transition like this:

  1. In Webflow:
    • Select the button and go to the "Effects" section.
    • Add a transition for the background-color property with a duration of 0.3 seconds and an ease-in-out animation.
  2. In Wized:
    • Select the button and apply the Set Style setting to the background-color property.
    • In the Functions Editor, type:
    javascript
    return r.request_name.hasRequested ? 'blue' : 'red'; // Change the background color based on whether the request has been made

Webflow interactions vs Wized set style ​

Webflow native interactions allow you to add basic animations and transitions to enhance the user experience, such as changing colors on hover, showing or hiding elements on click, or creating more complex animations.

Wized advances this interactivity by enabling you to create advanced conditional logic and connect your elements to external data, giving you greater flexibility and control to customize the user experience.

When to use Wized instead of Webflow? ​

Use Wized when:

  • You need conditional logic for interactions based on specific conditions, such as the value of a variable, the state of a cookie, or the response of an API.
  • You want to connect your site to external data, such as an API or database, to display dynamic content or personalize the user experience.
  • You are looking for greater flexibility and control over the behavior of your elements, allowing for the creation of complex and custom interactions beyond Webflow's native capabilities.

Practical Examples ​

  1. Change the background color of a button
  • CSS Property: background-color
  • In the Function Editor, type:
JavaScript
return 'red';
  1. Show a progress bar
  • CSS Property: width
  • In the Function Editor, type:
JavaScript
return `${r.request_name.data.progress}%`;
  1. Change the color of a text according to the user's role:
  • CSS Property: color
  • In the Function Editor, type:
JavaScript
return r.getUserData.data.role === 'admin' ? 'gold': 'black';
  1. Hide an item if no data is available:
  • CSS Property: display
  • In the Function Editor, type:
JavaScript
return r.getData.data.length > 0 ? 'block': 'none';