Styles of Additional States

What Are Additional States of Items?

Items and widgets that users can interact with—such as menus, form fields, accordions, and tabs—have additional states. Examples include the active state of a checkbox or radio button in a form, or an expanded accordion panel or tab.

You can customize the appearance of these additional states by modifying their default colors. For instance, you can remove the default blue highlight of an expanded accordion item and replace it with a color that aligns with your design. This ensures a consistent visual style for your website.

How to Customize Item Styles in Different States

To configure the styles of an item in a specific state, follow these steps:

Switch the item to the desired state.

Apply the necessary styles to the item in this state.

How to Switch Between Item States

You can switch between an item’s additional states in two ways: via Settings tab or Design tab—choose the option that is more convenient. Below is a step-by-step instruction.

Select the widget item whose state you need to change. For example, for an accordion, this would be Accordion Item , and for tabs, it would be Tab Item .

Switch the item’s state using one of the following methods:

Method 1: Using Settings tab

Navigate to Settings tab and select the required UI State of the item, for example Closed or Open .

Method 2: Using Design tab in Style Sources field

In the initial state, an item's Style Sources field is set to Default . You can switch to another state, such as Open , and apply additional states based on user interactions: hover, active and focus.

How to style an item in the selected state

Once you have switched an item to the desired state, you can apply the required styles on Design tab.

Below, we will look at examples of how to style additional states for different widgets.

Accordion

You can apply styles to the Opened state — the expanded accordion item.

By default, the header of an opened item has a blue background color. You can change this color and also style the header’s text.

Select any accordion item — Accordion Item , go to Settings tab, and switch UI State to Opened . The selected accordion item will now be displayed in its expanded state on the canvas.

Select the item’s title — Accordion Title , go to Design tab, and configure the required styles for the title.

For example, you can set the desired background and text color for the item’s title — these styles will be applied when the item is in the opened state.

Tabs

You can set styles for the Opened state when the tab is active. For example, you can change the background and text color of the open tab's title or add borders.

Select any tab title — Tab Item , go to Settings tab, and switch UI State to Opened . Now, the selected tab will be displayed in the opened state on the canvas.

Go to Design tab and configure the desired styles for the title.

For example, set the background and border colors, as well as the text color.

Menu

You can set styles for the following states of menu item:

Opened — the state of an item of multi-level menu, indicating that its submenu is expanded.

Current — the active menu item corresponding to the page the user is currently on. For example, when the user clicks on the "About Us" menu item and the corresponding page opens, this item will be in Current state.

Visited — a menu item that the user has already accessed.

Styling Opened and Current Menu Items

To style the desired state:

Select any Menu Item , go to Settings tab, and switch UI State to Current or Opened . On the canvas, the selected menu item will now be displayed in the chosen state.

Next, you can style the menu item — for example, modify the text styles, background color, or borders. To do this, go to Design tab.

To style the text : Select the text item in the menu item — Text , and apply the desired styles to the menu item's name.

To style the background or borders : Select the Menu Link item and set the background or borders for the menu item. You can also change or remove the icon in the current menu item by selecting the corresponding item.

Styling the Visited Menu Item

Visited state should be styled for the menu item’s link item:

Select the link item in the menu item — Menu Link , go to Settings tab, and switch UI State to Visited . Now on the canvas, the menu item will be displayed in the selected state.

Next, style the link by going to Design tab. For example, change the text color.

Slider

You can apply styles to the active pagination item (bullet) as well as to the active thumbnail.

Styling the Active Bullet

Select any bullet — the Dot item (inside Pagination → Bullets layers), go to Settings tab, and switch UI State to Current . Now on the canvas, the selected bullet will be displayed in the active state.

Go to Design tab and configure the desired styles for the bullet.

For example, configure the background and border colors.

Styling the Active Thumbnail

Select any thumbnail — the Thumb item, go to Settings tab, and switch UI State to Current . On the canvas, the selected thumbnail will be now displayed in the active state.

Go to Design tab and configure the desired styles for the thumbnail.

For example, set the border styles.

Links (Text Link, Link Block)

You can apply styles for the Visited state of a link or link block. These styles will define the appearance of the link after the user has clicked on it.

Select a link — Text Link or Link Block item, go to Settings tab, and switch UI State to Visited .

Go to Design tab and configure the desired styles for the link.

For example, you can change the text color.

Forms

For forms, you can configure styles for the following states of items:

Checked — for Checkbox and Radio items

Placeholder — Placeholder — for Input, Textarea, and Search items

Error — of Input, Textarea, Checkbox, Radio, and Select items

Error and Success — for Form and Payment widgets

Styling of Selected Radio Button

Select any Radio Item , go to Settings tab, and switch the UI State to Checked .

Select Radio Styled item, go to Design tab, and configure the desired styles for the radio button.

You can set the border color of the radio button and the gradient color for the dot inside it. The yellow context selector Radio Item:Checked indicates that you are styling the button for the Checked state of Radio Item .

Styling Selected Item in Checkbox

Select Checkbox Item , go to Settings tab, and switch UI State to Checked .

Select Checkbox Styled item, go to Design tab, and configure the desired styles for the checkbox button.

You can set the background and border colors of the button. The yellow context selector Checkbox Item:Checked indicates that you are styling the button for the Checked state of the Checkbox Item .

Styling Placeholder Text in Input Fields

Select the field item — Input (for an input field) or Textarea (for a text area), go to Settings tab, and switch UI State to Placeholder .

Go to Design tab and configure the desired styles for the placeholder text.

For example, you can set color and size of the text.

Styling of Error Messages in Form Fields

Select Input Group item (for an input field), go to Settings tab, and switch UI State to Error .

For each item of the form, you need to select the corresponding item: if you are styling a text area, select Textarea Group ; for a checkbox, select Checkbox Group ; for a radio button, select Radio Group ; for a selection list, select Select Group .

Select Error Message item, go to Design tab, and configure the desired styles for the error message.

For example, you can set the text color and size.

Styling of Error Message for Form Submission

Select Form widget, go to Settings tab, and switch UI State to Error .

Select Error Text item, go to Design tab, and configure the desired styles for the error message.

For example, you can set color and size of the text. You can also modify the message text itself.

You can also add additional items that will be displayed when an error occurs—such as an explanatory text or an image. To do this, add extra items to Error State block.

Styling of Success Message for Form Submission

Select Form widget, go to Settings tab, and switch UI State to Success .

Select Success Text item, go to Design tab, and configure the desired styles for the success message.

For example, you can set color and size of the text. You can also modify the message text.

You can also add additional items that will be displayed upon successful form submission—such as an explanatory text or an image. To do this, add extra items to Success State block.