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.

Styling an expanded accordion item

How to Customize Item Styles in Different States

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

  1. Switch the item to the desired state.
  2. 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.

  1. 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.
  2. 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.

Switching of item states in Settings tab

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.

Switching of item states in Design tab

You can switch the states of individual items not only in the settings of each item but also in the settings of the widget itself. To do this, select the widget, go to Settings tab, and switch states in the list of items.

This can be useful, for example, to expand all accordion items to edit their content.

Switching the states of individual items in the widget settings of Accordion

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.

In the examples, we will switch states on Settings tab, but you can also do this on Design tab if that method is more convenient for you.

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.

  1. 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.

Selecting Opened of UI State for Accordion Item

  1. 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.

Selecting styles for Accordion Title when the accordion item is opened

Done! Now, when the accordion item is opened, its background and text color will change.

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.

  1. 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.

Selecting Opened in UI State for Tab Item

  1. 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.

Selecting styles for Tab Item when the tab is opened

Done! Now, when the tab is opened, its title background and text color will change.

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.

Opened menu item

  • 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:

  1. 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.

Selecting UI State Current or Opened for a Menu Item

  1. 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.

Styling the text of the current menu item

  • 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.

Applying styles to Menu Link of the current menu item

That's it! Now, the active menu item will change color, and the icon will no longer be displayed.

For the current menu item, the text color has been changed, and the icon has been hidden

Styling the Visited Menu Item

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

  1. 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.

Selecting Visited in UI State for Menu Link

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

Applying styles to the visited menu item

That is it! Now, the visited menu item will change color.

Slider

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

Styling the Active Bullet

  1. 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.

Selecting UI State Current for Dot

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

For example, configure the background and border colors.

Applying styles to Active Bullet

Done! Now the active bullet in the slider will have the desired color.

Styling the Active Thumbnail

  1. 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.

Selecting UI State Current for Thumb

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

For example, set the border styles.

Applying styles to the active thumbnail

That is it! Now the active thumbnail in the slider will have a border.

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.

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

Selecting UI State Visited for Text Link

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

For example, you can change the text color.

Applying styles for the visited link

Done! Now, once a user clicks on the link even once, it will change 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

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

Selecting UI State Checked for Radio Item

  1. 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.

Applying styles for the radio button

Styling Selected Item in Checkbox

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

Selecting UI State Checked for Checkbox Item

  1. 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.

Applying styles for the checkbox button

Styling Placeholder Text in Input Fields

  1. 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.

Selecting UI State Placeholder for Input

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

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

Applying styles for placeholder text

Styling of Error Messages in Form Fields

  1. 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.

Selecting UI State Error for Input Group

  1. 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.

Applying styles for the error message

Styling of Error Message for Form Submission

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

Selecting the UI State Error for Form

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

Error Text item in the layers

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

Applying styles for the error message

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.

In the layers: Text item in the Error State block

Additional text for error explanation

Styling of Success Message for Form Submission

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

Selecting UI State Success for the Form

  1. 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.

Applying styles for the successful form submission message

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.

In the layers: Text item in the Success State block

Additional explanatory text