Conditions - Webflow Blog & Resources

You have the ability to introduce interactivity to your elements by altering their appearance and behavior in varying conditions.

Within this instructional session:

Design an element in different conditions
Revert to styling the default condition
Delete the styling of an element in a condition
Design the present condition of link elements
Comprehend the origins of inherited styles

Design an element in different conditions

To implement diverse styling to an element in various conditions such as the hover condition, open the Conditions drop-down list in the Selector within the Style panel and opt for the condition you wish to style.

The conditions drop-down list includes none, hover, pressed, and focused conditions as options. The drop-down list is highlighted on the selector section of the style panel.

Upon selecting a condition from the Conditions drop-down list in the Selector, a verdant state class, also known as a pseudo-class, will be visible at the terminus of the selector field. This serves as an indicator that you are presently styling that condition for your element.

A button element is selected and displaying a green hover class state in the selector section.

You have the freedom to make numerous styling selections. The alterations you apply here are what end-users will observe when they interact with this element.

Regardless of the current condition, the modifications you implement will be noticeable on the canvas until you deselect or navigate away from the condition.

The conditions menu (drop-down)

Select the condition you wish to style from the drop-down menu. Subsequently, any adjustment made in the Style panel will be preserved for the selected condition.

Default condition

The Default condition represents the initial state of elements. This is the inherent appearance of the element.

After customizing another condition, you can revert to styling the default condition by selecting “none” from the Conditions drop-down menu.

Hover condition

The hover condition is evident when your mouse pointer hovers over an element. Note that hovering may not be feasible on most touch-enabled devices, hence be mindful of this when crafting designs for smaller viewports.

Activated condition

The activated state is what appears when an element is clicked or tapped. This state inherits styles from the hover condition as activation is essentially an extension of the hover state.

Focused condition

You can concentrate on specific interactive elements like buttons and links without triggering them by using your keyboard to navigate to them. Clicking or engaging with interactive elements using a mouse or pointer accomplishes both focus and activation. This condition simulates when an interactive element is focused through keyboard, mouse, or touch interactions.

Focus (keyboard) condition

Similar to the focus condition, this state emulates the focus of an interactive element without necessitating activation (e.g., through keyboard navigation). It usually applies to text input fields when focused, irrespective of the method of focus (e.g., mouse, keyboard, etc.).

To enhance the accessibility of your website for visitors relying on keyboard-based navigation, it is crucial to style this condition ensuring that interactive elements are easily discernible on the page. We recommend adding an outline to interactive elements as it does not impact the element’s layout.

Visited condition

The visited condition signifies the state of a link that has been previously viewed. This state inherits styles from the default “None” condition.

For the visited condition, you can modify the text color, background color, and border color. The background color will display only if set differently in another condition.

Placeholder

This condition is available in the Conditions drop-down list for form fields. It enables you to style the placeholder text distinctly from the entered text which inherits the typographic styling of the default condition.

Regarding the placeholder text, you can customize the typography, background, and shadows.

Step one on the left, select the input field of a form. Step two on the right, select the placeholder state from the dropdown states menu. — Select an input field in your form and open the Conditions drop-down menu in the Selector to style the placeholder.

Checked condition

This condition is accessible in the Conditions drop-down list for form checkboxes and radio buttons with Custom styling enabled in their Element settings. It allows you to style the checked state of the checkbox or radio button.

Revert to styling the default condition

Upon completing your styling modifications for the conditions, you can revert to the default “none” condition by executing any of the following actions:

Choose “None” from the Conditions drop-down menu
Hit ESC on the keyboard (this also deselects the current element)
Select a different element

Delete the styling of an element in a condition

To eliminate custom styling or all styling from a condition:

요소를 클릭하세요.
Select the condition from the Conditions drop-down menu
Delete any existing styling (in blue)

Design the present condition of link elements and tabs

Link elements also possess a present condition. When custom styling is applied to the Present condition, it will mirror the appearance of your link element when a user is in that state.

Present condition (green tag in the selector)

The Present condition is automatically assigned to the All Links tag or the class of a chosen link element when that element is associated with the current page, section, or tab.

The Present condition inherits all styles from the default “None” condition.

Selecting the present condition of a link

To access the present condition of any link block, text link, button, nav link:

Select your link element and press D to open the link settings
Select the page option and choose the current page from the dropdown (if your link is on the home page, select the home page)
Press S to go to the style panel. You will observe the green present condition activated in the selector field if you’ve applied a class to your link. If not, click in the selector and select the “All links” tag from the dropdown that opens. The present condition will be applied to the tag as well.

무엇을 찾고 계신가요?

정황