条件

さまざまな状態での要素の外観と動作を変更することで、要素にインタラクティブ性を追加します。

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

Within this instructional session:

  1. Design an element in different conditions
  2. Revert to styling the default condition
  3. Delete the styling of an element in a condition
  4. Design the present condition of link elements
  5. 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:

  1. 要素をクリック
  2. Select the condition from the Conditions drop-down menu
  3. 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.

A link element is selected with a current state selected in the selector section. There are 3 selectors being inherited. The link element has a class called Logo block.

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:

  1. Select your link element and press D to open the link settings
  2. Select the page option and choose the current page from the dropdown (if your link is on the home page, select the home page)
  3. 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.
First step is choosing a link element on the left. Second step is selecting the home page from the link settings drop-down menu on the right to link the element to the home page.
Third step is selecting the All Links tag from the drop-down menu on the left while the link element is still selected. Fourth step is noticing a green "current" state added to the All Links tag on the right.
A navigation link named navigation item with a current state in the selector section inheriting three selectors.

Another option is selecting the page section in the link settings. The selector field will display the current state for that element when you reach that specific section of the page. This can help in styling buttons or links that remain fixed as you scroll.

Once you have styled the current state, you can modify the link settings and connect your button and link elements to any other pages or page sections.

Picking the current state of a tab

You can opt to customize the Current tab differently from the normal tab to distinguish between active and inactive tabs. For instance, you can alter the font color and background color to be distinct from a typical tab.

To design the Current tab:

  1. Choose the active Tab Link
  2. Give it a class. The Current state will automatically appear.
  3. スタイリングを始める

Formatting the default state of a link when the current state indicator is visible in the selector

There are multiple ways to eliminate the current state when you want to design the default state. The easiest method is by selecting the default, base class in the Inheritance menu.

The default base class of a link element named Navigation item is emphasized in the inheritance drop-down menu. The orange 3 selectors tag is also highlighted in the inheritance indicator.

Alternatively, you can temporarily unset the link setting in the Element settings panel, design the link’s class, then re-establish the link setting. If you prefer not to unset the link setting, duplicate the link element, remove the link setting on the duplicate element, modify the class, then delete the duplicate element once you’re finished.

Understanding the origin of inherited styles

All states derive styles from the “none” state. “Pressed” also inherits styles from the “hover” state. You can identify the source of inherited styles by clicking the inheritance indicator right above the selector field.

The inheritance indicator is highlighted indicating there are 5 selectors from which styles are being inherited. The inheritance dropdown menu is also highlighted displaying the various states.

Once you have applied styles to a state, the States menu dropdown icon will turn blue. Upon opening the States dropdown menu, you will observe blue circles signifying the presence of local styles in that state.

A link element named Nav link currently in the "current" and "pressed" state. A down facing carrot icon is highlighted to display the dropdown menu of states with a blue dot indicator on the Hover and Pressed states. The hover and pressed states are accentuated by their blue indicator.

ユアン・マック