How to use the Inspector panel in Wix Studio Two

4 days ago

3 min read

Updated: 6 hours ago

Click the Open Inspector icon at the top right of the Studio Two editor, then select an element, section or page on the canvas. The panel shows its properties in three tabs: Design, Motion and Settings. The options change with whatever you select.

Inspector panel with the Design, Motion, and Settings tabs at the top — Image: Wix Help Center, “Studio Two Editor: Working With the Inspector Panel”

Before you start

You need the Studio Two editor, not the classic Studio editor.
Have a page open with at least one element, section or container to select.

Step by step

Open the Inspector. Click the Open Inspector icon at the top right of the editor. The panel opens on the right and shows the name of your current selection at the top.
Select something on the canvas. Pick an element, section or page. The Inspector only lists options that apply to that selection, so the tabs look different from one element to the next.
Align and size in the Design tab. Design is the first tab. Use the icons at the top to align the element inside its parent. Then use Size to set width and height and decide how the element resizes on different screens.
Style the element. Under Element design, set colors, borders, corners, shadows and typography. For elements with parts or states, such as a menu or a button, first choose the part or state you want to style.
Control layout and position. For containers and sections, use Layout to set the grid, padding and overflow behavior. Switch Vertical spacing from Automatic to Manual to space items differently per breakpoint. Use Position for types such as sticky or pinned, plus margins and docking.
Use the remaining Design options. Appearance sets opacity and rotation. Cursor adds a custom cursor. Anchor creates a link target and lets you copy its URL. Custom CSS takes your own CSS for the selected element.
Add motion. Open the Motion tab and pick a type: Entrance, Loop, Scroll, Mouse Effects, Click or Hover. You can combine several types on one element. Hover over a preset to preview it before you choose it.
Connect data in Settings. Under Data sources, click Connect Source to link a page, section or container to a data source. Elements inside can then use its data and actions. In Properties, click the Connect to data icon next to a field to bind it instead of typing a value.
Set accessibility and advanced behavior. Accessibility offers options such as role, decorative marking, accessible name and how screen readers announce updates. Under Advanced, set Conditional visibility and Event handlers where the element supports them.
Edit several elements at once. Select multiple elements to see their shared options. If they are the same type, you get the common design options. If the types differ, only alignment icons appear. A Stack option shows when the elements sit along one axis.

Design tab of the Inspector for a button, showing the Size section and the Choose what to design menu — Image: Wix Help Center, “Studio Two Editor: Working With the Inspector Panel”

Good to know

The available animations and effects in the Motion tab depend on the selected element.
Buttons and menus have a built-in hover state, so the Motion tab has no extra Hover animation for them. Style it in the Design tab by selecting Hover under State.
Sizes appear as px*: a pixel value shown while the unit behind it stays responsive.
To work in px, %, vh or set minimum and maximum values, click the More Actions icon at the top of the Inspector and enable Advanced settings.
Event handlers are only available for certain elements, such as buttons.
For elements made of several parts, the parts picker lets you choose which part you style in the Inspector.

parnii note

Check the Advanced settings for size units early in a project, so you know which unit each element really uses across breakpoints. Use the Stack option on neighboring elements to keep spacing consistent on every screen size.

FAQ

Where is the Inspector in the Studio Two editor?

It opens from the Open Inspector icon at the top right of the editor. The panel appears on the right and names the element you selected.

Can I change the px* size unit to percentage in Studio Two?

Yes. Click the More Actions icon at the top of the Inspector and enable Advanced settings. You can then use px, % and vh, and set minimum and maximum values.