Add interactivity to your elements by changing how they look and behave in different states.
You can add interactivity to your elements by changing the way they look and behave in different states.
Style an element in various states
To apply different styles to an element in different states (e.g., hover, pressed, etc.), go to the Style panel, click the “dropdown arrow” icon in the Selector field, and choose the state you want to style from the States dropdown menu.
When you choose a state from the States dropdown menu, a green state class (also called a pseudo-class) appears at the end of the Selector field to indicate that you’re now styling your element in the chosen state.
Whatever state you’re in, the changes you make are visible on the canvas until you deselect or otherwise leave the state.
Available states
None state
The None state is the default state of all elements. This is how an element looks by default. Once you choose and style an element in a different state, you can return to styling the default state by choosing None from the States dropdown menu.
Hover state
The Hover state shows when you hover your mouse pointer over an element. It’s not possible to hover on most touch devices, so be aware of this when designing for smaller breakpoints.
Pressed state
The Pressed or active state shows when you click or press on an element and inherits styles from the Hover state. It’s useful for implementing hover styles that work on touch devices.
Current locale
On sites with Localization enabled, the Current locale state lets you apply styles to elements only on the current locale. This state is automatically applied to elements in secondary locales.
Focused state
The Focused state shows when you focus on interactive elements like buttons and links without activating them (e.g., by tabbing into them with your keyboard). When you click interactive elements with your mouse or pointer device, the action both focuses and activates them.
Focused (keyboard) state
Like the Focused state, the Focused (keyboard) state shows when you focus on interactive elements without activating them (e.g., by tabbing into them with your keyboard). This state always applies to text input fields when focused, regardless of the manner in which they were focused (e.g., with a mouse, a keyboard, etc.).
It’s important to style this state to make your site more accessible to visitors who rely on a keyboard for navigation. We suggest setting an outline on interactive elements to apply styles to elements in the Focused (keyboard) state without affecting their layout.
Disabled state
The Disabled state is available in the States dropdown menu for form button elements. It can be used to style submit buttons during form submission or other loading scenarios — for example, when bot blocking is enabled.
Visited state
The Visited state shows on links that have been visited and inherits styles from the default None state.
In the Visited state, you can only style an element’s text color, background color, and border color. The background color only appears available to style if it’s already set in a different state.
Placeholder
The Placeholder state is available in the States dropdown menu for form fields. It allows you to style the placeholder text separately from the typed text, which inherits the typography styling of the None (i.e., the default) state.
You can style the typography, background, and shadows of placeholder text.
Checked state
The Checked state is available in the States dropdown menu for form checkboxes and radio buttons that have custom styling enabled in their Element settings.
Return to the default state
When you’ve finished styling your states, you can go back to the None (i.e., the default) state by doing any of the following:
- Choose None from the States dropdown menu
- Press Esc on the keyboard (this also deselects the current element)
- Select a different element on the canvas
Remove styles from a state
To remove custom styles from a state:
- Select the element on the canvas
- Choose the state from the States dropdown menu
- Click the blue indicator on the style you want to reset and click Reset
Pro tip
You can use the keyboard shortcut Option + click (on Mac) or Alt + click (on Windows) to reset styles.
Style the current state of links and tabs
The All Links tag or class of a selected link element will have a Current state automatically applied when the element links to the currently open page, section, or tab. The Current state lets you apply styles to the link or tab to indicate to site visitors that the link points to the page, section, or tab they’re currently viewing on the site.
The Current state inherits styles from the None (i.e., the default) state.
Style the current state of a link element
To style the Current state of any link block, text link, button, or nav link:
- Select the link element on the canvas and go to Element settings panel > Link settings
- Choose the current page from the Page dropdown (e.g., if the link you’re styling is on the homepage, choose the homepage)
- Go to the Style panel and style the link element however you like — a green Current state selector appears in the Selector field
If you don’t see the Current state selector, click the Inherited selectors and choose the All Links tag. The Current state will apply to the tag as well.
Pro tip
You can press D to open the Element settings panel or press S to open the Style panel.
You can also access the Current state for links that point to specific page sections. This is useful for styling buttons or links that are fixed as you scroll:
- Select the link element on the canvas and go to Element settings panel > Link settings
- Choose the Page section option from Type
- Choose the page section from the Section dropdown
- Go to the Style panel and style the link element however you like — a green Current state selector appears in the Selector field
After you style the Current state, you can update Link settings to point your link elements to any other pages or page sections.
Style the current state of a tab
You can choose to style the current tab to differentiate between active and inactive tabs — for example, you can change the font and background color to make clear at a glance which tab is currently open.
To style the current state of a tab:
- Select the Tabs menu on the canvas
- Go to Element settings panel > Tabs settings and choose the current tab
- Go to the Style panel
- Give your tab a class — the Current state will automatically appear once the class is applied
Remove the Current state indicator to style the default state of a link
To remove the Current state and return to styling the None (i.e., the default) state, you can choose the base class in the Inheritance menu.
You can also temporarily remove the link setting in Element settings panel, style the link’s class, and reconfigure the link setting. If you don’t want to remove the link setting, you can duplicate the link element, remove the link setting on the duplicate element, style the link’s class, and delete the duplicate element when you’re finished.
Understand how states inherit styles
All states inherit styles from the None (i.e., the default) state. The Pressed state inherits styles from the Hover state. You can view where styles are inherited from by clicking the inheritance indicator above the Selector field.
Once you’ve added styles to a state, the “dropdown arrow” icon for the States dropdown menu turns blue. When you open the States dropdown menu, blue circles indicate local styles that were set on that state.