You can set up styles when hovering over a box or a box appears on the screen etc., in style editing mode.

You can enter the style editing mode by selecting a box, and opening "Conditional Style" in the upper right corner of the editor, then clicking on the condition.

The style editing mode ends when you select another box or click on the editing condition.

You can disable the effect when clicking on the “×” eighter on right above each style setting or on conditional style settings.

Conditional styles are divided into the following group.


Hover and (in) Hover

A hover is an effect that is applied to an element when the user moves the cursor over it.

It's often used to make a box look clickable.

An in-hover is an effect that is applied to a child element that is inside a parent element with the hover effect setting. As you can see below, you can set an in-hover effect on an arrow inside the button, and let only the color of the arrow change when hovering over the button.

You can only set the in-hover effect when the hover effect is set to the parent box.


Focus is the effect that is applied to the input fields or options of the form when the user input in the field or makes a selection.

This applies not only to cursor operations but also to keyboard operations and when selecting with voice input software.


Pressed is the effect that is applied to the submit button when the user clicks the submit button.


Current page

Current page is the effect that is applied to a box with an internal link and the box has to be in a symbolized box.

The box style changes only when the link destination and the page users are viewing are the same. This effect lets users understand which page they are currently viewing.

When the “include child page” setting is on, the style also changes when viewing the lower level page of the link destination.

For instance, if you set “include child page” to the box with page link destination to /company, the style also applies when viewing /company/about page.

* The “include child page” can not be set to “HOME page”



You can set a style to a box just before it appears on the browser screen by loading or scrolling the screen.

For instance, you can create an effect that looks as if a box appears slowly when you set the opacity to 0 (transparent) in the editing mode of the "appear" condition, and set it to 1 (opaque) when the condition is not applied.

* You can not set appear effect to the topmost box (layer) in the layer panel


First item

First item is the effect that is applied to the CMS lists or manually listed boxes.

First item can only be set for the top of elements in a list. It is useful when you want to make the latest blog post stand out.


This function is available when boolean properties are set to CMS lists or dynamic pages.

You can set a specific style to elements when the boolean is on (true).

Read more about Boolean properties in the article below.

Property | STUDIO U

Did this answer your question?