What are Conditional Styles?
Conditional styles let you change a box's style (such as color, size, and layout) only when a specific condition is met. You select a trigger condition in advance, then configure the style that should apply when that condition occurs.
Conditional styles are organized into categories, and only the trigger conditions that apply to the selected box are shown.
Category | Trigger Condition | Description |
Cursor | Hover | Changes the style when a visitor hovers their cursor over the element. |
Cursor | Focus | Changes the style while a form input field or option is selected. |
Cursor | Pressed | Sets the style while a button is being clicked. Only available for buttons inside forms. |
Animation | On Appear | Sets an animation for when an element appears on screen during page load or scrolling. |
Toggle | Closed | Changes the appearance of a toggle box when it's in the closed state. |
Link | Current Page | Applies a specific style when the element's page link matches the page currently being viewed. |
List | First Item | Changes the design of only the first item in a list, or elements inside it. |
URL Query | Partial Match | Changes the design when a search filter condition matches the keyword of a corresponding filter tag. |
Custom | Boolean | Switches the style only when a boolean property in Studio CMS is set to ON. |
Scroll | Scroll | Sets animations that respond to scrolling. |
Note: How to set up the "Scroll" (Scroll Effect) conditional style
The "Scroll" (Scroll Effect) conditional style works very differently from other conditional styles.
For detailed instructions, see Setting up Scroll Animation (Scroll Effect).
Setting up Conditional Styles
Select the box you want to apply a conditional style to.
Conditional styles cannot be applied to the top-level box (Base layer) in the Layers panel.
Click [Conditional Style] in the upper-right area of the right panel, then choose the condition you want to style.
If the panel is closed, open the right panel first.
Once you select a condition, the right panel switches to the style editing mode for that condition.
Set the color, size, transform, and other properties in the right panel, just like you would for the default style.
Properties that have a conditional style applied will appear in a different color in the right panel. Use this to compare and adjust the differences from the default style.
If you're editing a live site, update your site from the publish panel. Your changes won't appear on the live site until you do this.
Setting up Animations
The differences between the default style and the conditional style are played back as animated effects. You can fine-tune the animation using the [Easing], [Duration], and [Delay] options in the [Animation] settings.
For more details, see Animation.
Removing Conditional Styles
You can remove conditional styles either by deleting all styles for a specific condition at once, or by removing individual properties one at a time.
Delete all styles for a specific condition
Select the box whose conditional style you want to remove.
At the top of the right panel, select the condition you want to delete. If the right panel is closed, open the right panel first.
Click [Delete Animation] at the bottom of the right panel.
If you're editing a live site, update your site from the publish panel. Your changes won't appear on the live site until you do this.
Remove individual style properties for a specific condition
Select the box whose style you want to partially remove.
At the top of the right panel, select the relevant condition. If the right panel is closed, open the right panel first.
In the right panel, find the properties that have a conditional style applied, and click the arrow icon
to the right of the property name to revert it to the default state.If you're editing a live site, update your site from the publish panel.
Types and Uses of Conditional Styles
Here's a breakdown of common uses and important notes for each category.
Hover
Hover changes the style when a visitor moves their cursor over an element, giving a visual cue that the element is clickable.
Note: Hover behavior on touch devices
Touch devices like smartphones and tablets don't support hover interactions, so hover styles may persist after a tap or behave unexpectedly. For areas that require tap interactions, consider using a different visual approach instead of hover.
Hover comes with the following animation templates that you can use to quickly set up animations:
If you prefer not to use a template, click [Custom Settings] at the top to configure values from scratch.
Scale Up
Color Change
Tilt
Add Shadow
When you select a template, the values are automatically applied to the [Transform] and [Animation] fields in the [Hover] conditional style settings. Properties that have been configured are highlighted in blue.
in Hover
This changes the style of a child element (such as text or an icon) in sync with its parent element's hover style. The "in Hover" option only appears when the parent box already has a hover style applied.
in Hover comes with the following animation templates:
Scale Up
Text Color Change
Tilt
Add Shadow
Example: Changing the text color inside a button on hover
Select the entire button and set up a [Hover] conditional style.
Select the text inside the button, then use the [in Hover] conditional style to change the text color.
Focus
Focus applies to form input fields and selection options.
It lets you change the style only while the user is actively typing or selecting, making it useful for highlighting the active field.
Pressed
Pressed sets the style that appears while a button is being clicked.
This can only be applied to elements with the HTML tag <button>.
Examples: Form submit buttons, Toggle open/close buttons, Video with Button buttons, etc.
This cannot be applied to elements with the HTML tag <a>.
Examples: Page navigation buttons, etc.
Tips: When both [Focus] and [Hover] are set on a form input field and both conditions are active at the same time, the [Focus] animation takes priority.
On Appear
[On Appear] lets you set the style for the moment an element appears in the browser viewport during page load or scrolling.
On Appear comes with the following animation templates. If you prefer not to use a template, click [Custom Settings] at the top to configure values from scratch.
Fade In from Bottom
Fade In from Right
Fade In from Left
Blur Fade In
When you select a template, the values are automatically applied to the [Transform] and [Animation] fields in the [On Appear] conditional style settings. Properties that have been configured are highlighted in pink.
Note: Elements with On Appear styles may not display
If the animation's starting position extends beyond the screen or parent box, the animation may not play.
On devices with narrower screens — like tablets or smartphones — if the screen width is smaller than the animation's starting position, the element may not appear in preview or on the live site.
Related article: Why "On Appear" animations aren't showing and how to fix them
Closed
The [Closed] conditional style can only be applied to toggle boxes.
It lets you define styles for hover, click, and other states when the toggle is in its closed state.
Current Page
Sets a style for when the page link assigned to the element matches the page currently being viewed.
This is useful for visually indicating the active page in site navigation menus.
*This setting is not available when the link destination is a modal page or a redirect page.
When you apply [Current Page], an [Include Subpages] toggle appears to the right.
Turning [Include Subpages] ON applies the same style when visitors are viewing any subpage of the linked page.
Example: If [Include Subpages] is ON for a page link to /company, the same style will also apply when viewing /company/about.
Note: [Include Subpages] is not available for the [Home] page.
Partial Match
When a URL Query Filter is set up, this changes the design when a search filter condition matches the keyword of a corresponding filter tag.
in Partial Match
This applies to child elements inside a parent element that has the [Partial Match] condition set.
First Item
In dynamic lists and lists, you can change the style of the first list item.
For example, you can make the latest blog post larger to make it stand out.
in First Item
[in First Item] applies to elements inside a list item that has the [First Item] condition set.
This lets you adjust specific elements within the first item — for example, making the title text larger only for the first article.
Custom
[Custom] lets you set a style that applies only when a linked boolean property is ON (true) in dynamic pages and dynamic lists. For more details on boolean properties, see "Properties".
Example: The image below shows how to set a trigger condition as "the boolean property [New Icon Color] is ON in the CMS Dashboard," and configure the text color of "New" to change to pink under that condition.
Tips: The name of the [Custom] conditional style reflects the name of the boolean property you set in the CMS Dashboard.
Scroll
Lets you change styles based on the page's scroll position or the element's position on screen. Using timelines and keyframes, you can create effects like parallax scrolling and progress bars.
For detailed setup instructions, see Setting up Scroll Animation (Scroll Effect).
Checking which boxes have Conditional Styles
You can see an overview of all boxes with conditional styles from the Layers panel.
Open the Layers panel.
Click the [Check Conditions] icon
to the right of the [Layers] panel name.Boxes (layers) with conditional styles will display a [•] indicator.
Each column represents the same category of conditional style.
Hover over a [•] to see details about the conditions that are set.
in Hover in:hover Hover Action Delete Animation focus
inhover Mouse On Remove Animation appear