States and styles
The element’s State is a property that indicates the status of the user’s interaction with the element. State is changed with user actions, for example, when clicking on an element or hovering it with the mouse cursor. This applies mainly to interactive elements like buttons, form elements, menu items, and so on.
- Default The default state of the element without user interaction.
- Hover The state of the element with the mouse cursor hovering it. However, the element is not yet activated, that is, the mouse button is not pressed.
- Active The state of the active element, that is, when the mouse button is pressed on it.
- Focus The state of the element on which you are focused. For example, this can be a text field, on which you have focused with the mouse cursor.
- Opened This state is for menu items only. It defines the opened (current) menu item.
- Visited This state is for links only. The state of the link that has been opened at least once.
By changing the elements’ styles in different states, i.e. by defining their appearance and behavior, you can add more interactivity to your website.
To set element styles in different states:
- Select an element on the Canvas or the Layers tab in the left panel
- Select the necessary state in the State section on the Styles tab in the right panel
- Set the style of the element for a selected state
This way you can consistently set styles for all element states.
Example of menu item styles in various states:
Default
Hover
Opened
In the above example, the menu item changes its background and font color depending on the state. You can choose any style you want. For example, you can also use effects, such as shadows or transformations.
For a smoother transition between element states, use the Transitions effect by setting it for all states. This option can be added in the Effects section.
