States add interactivity to a page and are often used for forms, links and buttons.

There are 4 states on STUDIO:

  • None: the default state.
  • Hover
  • Active
  • Focus

Hover

Hover is the effects applied to an element when a user rolls the cursor over it.

It is often used for button or links to make them look ‘clickable’.

Styling on Hover mode

To style an element in hover mode on STUDIO:

  1. Select a box/element 
  2. On the ‘box’ tab of the top bar, check the option ‘hover’ on the far right of the top bar.
  3. Style the element for hover mode. When you have finished, uncheck the box ‘hover’ to return to default state, or click anywhere on the page.
  4. To check how the hover effect would actually look, launch a live preview. Click on the grey button ‘live preview’ on the top right of the editor.

Focus

Focus is the effects applied to a form’s input field when the user selects it.

It is used to make it clear to the user that the input field is selected.

Focus mode can only be applied to a form’s input field.

To style an element in focus mode on STUDIO:

  1. Select a form’s input field
  2. On the ‘box’ tab of the top bar, check the option ‘focus’ from the dropdown on the far right of the top bar.


   3. Style the element for focus mode. When you finished, uncheck the box ‘focus’ to return to default state.

   4. To check how the focus effect would actually look, launch a live preview. Click on the grey button ‘live preview’ on the top right of the editor.

Active

Active is the effect applied to a form button for the split second a user clicks on it.

Active mode can be applied only to form buttons.

To style a form button in active mode on STUDIO:

  1. Select a form button
  2. On the ‘box’ tab of the top bar, check the option ‘active’ on the far right of the top bar.


    2. Style the element for active mode. When you finished, uncheck the box ‘active’ to return to default state.

    3. To check how the active effect would actually look, launch a live preview. Click on the grey button ‘live preview’ on the top right of the editor.

Did this answer your question?