Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
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.
In this lesson:
To apply different styling to an element in different states like the hover state, open the States dropdown menu in the Selector of the Style panel and select the state you want to style.
When you select a state from the States dropdown menu in the Selector, a green state class, also called pseudo-class, will appear at the end of the selector field. This indicates that you are now styling that state for your element.
You can make any number of styling choices. The styling changes you make here are what users will see when they interact with this element.
Whatever state you're in, the changes you make will be visible on the canvas until you deselect or otherwise leave the state.
Choose the state you want to style from the dropdown menu. Now, any change you make in the Style panel will be saved for the selected state.
The None state is the default state of elements. This is how the element looks by default.
Once you choose and style another state, you can return to styling the default state by choosing “none” from the States dropdown menu.
The hover state shows when you hover your mouse pointer on an element. It’s not possible to hover on most touch devices so be aware of this when designing for smaller breakpoints.
The pressed or active state is the state that shows when you click or press on an element. This state inherits styles from the hover state as pressed is actually a state of the hover state.
It’s possible to focus on certain elements, like input fields in a form, before activating them by pressing the TAB ↹ key on the keyboard. The focused state emulates this state and is often styled for input fields and links.
The visited state is the state of a link that's been visited. This state inherits styles from the none state.
For the visited state, you can only style the text color, the background color, and the border color. The background color will only appear if it is already set in a different state.
This state will be 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 default state.
For the placeholder text, you can style the typography, the background, and shadows.
This state will be available in the States dropdown menu for form checkboxes and radio buttons that have Custom styling enabled in their Element settings. It allows you to style the checked state of the checkbox or the radio button.
When you’ve finished styling your states, you can go back to the default none state by doing any of the following:
To remove a custom styling or all styling from a state:
Link elements also have a current state. When you add custom styling on the Current state, it will reflect how your link element looks when a user is in that state.
The Current state is automatically added to the the All Links tag or the class of a selected link element when this element is linked to the current page, section, or tab.
The Current state inherits all styles from the default "None" state.
To access the current state of any link block, text link, button, nav link:
You can also select the page section option in the link settings. The current state will appear in the selector field for that element when you scroll to that section of the page. This is useful for styling buttons or links that are fixed as you scroll.
After you style the current state, you can update the link settings and link your button and link elements to any other pages or page sections.
You can choose to style the Current tab differently than the normal tab to differentiate between active and inactive tabs. For example, you can edit the font color and background color to be different than a normal tab.
To style the Current tab:
There are several ways to remove the current state when you want to style the default state. The quickest way to do so is by selecting the default, base class in the Inheritance menu.
Alternatively, you can temporarily remove the link setting in the Element settings panel, style the link's class, then re-configure the link setting. If you do not wish to remove the link setting, duplicate the link element, remove the link setting on the duplicate element, edit the class, then delete the duplicate element when you’re done.
All states inherit styles from the “none” state. “Pressed” also inherits styles from the “hover” state. You can see from where styles are being inherited from by clicking the inheritance indicator right above the selector field.
After you have added styles to a state, the States menu dropdown icon will turn blue. And when you open the States dropdown menu, you will see blue circles indicating that there are local styles in that state.
