Inline style

The inline style configuration allows you to dynamically modify any CSS property of a selected element. This enables real-time visual adjustments based on user interactions, data changes, or other conditions within your application.

Why use inline style?

• Dynamic styling: Adjust the appearance of elements based on real-time data from variables, cookies, API responses, or other sources.
• Flexible customization: Modify colors, sizes, visibility, and more without predefined styles.
• Reactive updates: Since Wized is reactive, any change in the data source will automatically update the element's styles.

How does It work?

1. Select the element: In Wized, in the elements panel click on the element you want to style. Make sure that the element has the Wized attribute.
2. Setting up In the right panel, select the Inline style configuration.
3. Choose the CSS property: Use the dropdown menu to select the CSS property you want to modify (e.g., background, color, width, etc.).To activate the dropdown, you must type the name of the property and Wized will show you a few suggestions
4. Set the value: Use the Function Editor to specify the new value dynamically. The value can be derived from variables, cookies, API responses, or conditional logic.

Example:

/* Keep in mind that this example has fixed values, however,
you can replace any value with a value from a cookie, variable, form, input, etc. */
return '#ff0000'; // for background color
return '10px'; // for size
return 'flex'; // for display

5. Multiple styles: You can use this configuration multiple times on the same element, allowing you to modify several CSS properties simultaneously.

6. Conditional styling (optional): Add conditional logic within the Function Editor to apply styles only under specific conditions.

   Example: Assuming you want to change the background color of an element using Ternary operators

   return r.request_name.status !== 200 && r.request_name.hasRequested ? 'red' : 'black';

Creating smooth transitions

By default, styles are applied instantly. However, you can create smooth transitions by combining Inline style with Webflow's built-in CSS transitions.

Steps to apply transitions:

1. Set Up CSS transitions in Webflow:

   • Select the element and go to the "Effects" tab.
   • Under "transitions," click the "+" button.
   • Choose the CSS property you want to animate (e.g., background-color, opacity).
   • Set the duration and easing (e.g., ease-in-out).
   • If you want all properties to transition, select "All Properties."

2. Apply inline style in Wized:

   • Choose the same CSS property in the inline style setting.
   • In the Function Editor, write the logic to update the property based on your conditions.

//Change a button's background color when a request completes.
return r.request_name.hasRequested ? 'blue' : 'red';

Webflow interactions vs. Wized inline style

Webflow’s built-in interactions allow for animations like hover effects, click-based visibility toggles, and scroll-triggered animations.

Wized’s inline style expands these capabilities by providing dynamic, data-driven styling.

When to use Wized instead of Webflow?

Use Wized when:

• You need conditional logic (e.g., change styles based on a user's role or API response).
• You want to connect styles to external data, such as real-time product availability or API-driven updates.
• You require flexibility beyond Webflow’s predefined interaction triggers.

Practical examples

1. Change the background color of a button

CSS Property: background

return 'red';

2. Display a progress bar based on request data

CSS Property: width

return `${r.request_name.data.progress}%`;

3. Change text color based on user role

CSS Property: color

return r.getUserData.data.role === 'admin' ? 'gold' : 'black';

4. Hide an element if no data is available

CSS Property: display

return r.getData.data.length > 0 ? 'block' : 'none';

5. Adjust font size dynamically

CSS Property: font-size

return r.getSettings.data.isLargeText ? '20px' : '14px';