深入浅出：Wix Studio 工作台与核心工具面板完全图解 | Wix Studio 中文学习平台

30秒核心速览 (Executive Summary)

第一次打开 Wix Studio 编辑器，不少习惯了普通建站模板的用户会觉得面板丰富。它更像 Figma 的画板逻辑与 Chrome 开发者工具的完美结合。

掌握 Studio 编辑器的口诀是：“结构看左侧图层树，视口看顶部断点标尺，尺寸与行为看右侧检查器”。牢记不要把元素散落在画布外，始终用容器包裹，排版即永远可控。

1. 顶部控制栏：断点标尺条 (Breakpoint Bar)

编辑器正上方贯穿的是响应式断点标尺（Breakpoint Bar），直接控制当前画布呈现的屏幕宽度：

系统默认三大核心基准断点：

Desktop（桌面端）： 覆盖 `1001px 及以上`（画布默认设在 1440px 基准宽度）。在该断点下的所有布局变动，会自动向下级联继承（Cascade Down）到平板和手机。
Tablet（平板端）： 覆盖 `768px - 1000px`。点击切换到该断点做出的样式微调，只覆盖平板及更小端，不会反向影响桌面端。
Mobile（移动端）： 覆盖 `320px - 767px`。用于将横向多列卡片快速重构成单列瀑布流，以及配置移动端触控专享菜单。

实操小窍门： 点击标尺右侧把手（Handle）向左或向右动态拖拽，即可直接在画布上进行全宽度范围的拉伸压测，实时检验流体等比缩放效果。

2. 左侧核心面板：组件库与图层树 (Layers)

左侧工具栏包含页面组织架构的核心入口：

Add Panel（添加组件库）

按照标准文档流提供了 Section（章节）、Container（容器盒）、Layout Tools（CSS Grid 与 Flexbox）、Text、Media、Buttons 及全套商业应用插件。

Layers Panel（图层树面板）

展示当前页面的完整 DOM 树状层级。在此处可以快速重命名图层（如 `Hero-Banner-Grid`）、调整 Z-Index 堆叠顺序，以及在特定视口设置“隐藏”。

3. 右侧属性检查器 (Inspector Panel)：流体尺寸核心

右侧检查器面板是整个 Studio 编辑器的灵魂，分为三大核心子选项卡：

Layout（布局与尺寸设置）

设置元素的宽度（Width）、高度（Height）、内外边距（Padding / Margins）、9 点停靠位置（Docking）以及响应式行为（Responsive Behavior）。

Design（视觉与设计渲染）

配置背景色、渐变画刷、边框样式、阴影层次（Box Shadow）、透明度与字体家族（支持直接上传自定义 TTF/WOFF2 字体）。

Animations & Interactions（微动效与交互）

无代码为元素赋予鼠标悬停（Hover）、滚动视差（Parallax Scroll）、渐入上浮（Reveal）与点击展开等前沿微交互。

4. 六大响应式行为 (Responsive Behaviors)

在右侧检查器的 Responsive Behavior 下拉菜单中，Studio 为每个组件提供了六种数学响应模式：

Scale Proportionally（等比缩放 · 默认）元素按照视窗宽度等比动态放大缩小，保持排版视觉 100% 不变形。

Fixed（固定物理像素）无论屏幕多大多小，尺寸始终锁定为固定的 px（常用于图标、Logo 或特定按钮）。

Fluid（流体自适应）宽度根据父容器的百分比弹性伸缩，高度随内部内容自动撑开。

Relative to Parent（依附于父级）严格按照父级容器的宽或高按比例缩放，常用于复杂嵌套卡片内部。

5. 底部开发者抽屉：Velo 开发者模式入口

点击顶部工具栏的 “Code” 按钮（图标为 `</>`），底部会弹起完整的内置代码 IDE：

// 开发者模式核心功能

Page Code： 编写只针对当前页面的前端交互代码（如表单校验、Repeater 数据源绑定）。
Global Code (masterPage.js)： 编写全局通用的页头页脚动态行为。
Backend Files (.web.js)： 编写运行在无服务器云端的安全服务端逻辑与外部 API 对接。

6. 画布排版常见失控与避坑

避坑点 1：未搞清楚级联继承，在移动端随意乱改样式

级联规则是“从大屏向小屏单向流动”。推荐始终在 Desktop 桌面端把主版面调完美，再切换到 Tablet 和 Mobile 做减法微调。切勿先在移动端把文字改乱再回头看桌面端。

避坑点 2：忽略图层面板，误以为元素“丢失”

当拖入新元素后看不见时，通常是因为它被父容器的 `overflow: hidden` 裁剪，或者 Z-Index 层级低于背景图。打开左侧 Layers 面板即可一秒定位。

7. Wix 官方 Support 权威参考文档

关于编辑器的界面规格与检查器参数深度说明，推荐参考 Wix Help Center 原厂文档：

Wix Studio: About the Canvas in the Studio EditorOfficial Support

官方关于画布视口缩放、把手拉伸与流体视窗基准的全面图解说明。

Wix Studio: Using the Inspector PanelOfficial Support

系统解析右侧检查器中的布局（Layout）、设计（Design）与动效（Animations）。

Wix Studio: Using the Layers Panel to Organize ContentOfficial Support

学习 DOM 容器树层级、重命名图层、元素多选与断点级显隐隐藏技巧。

8. 高频常见问题解答 (FAQ)

Q：画布中央的蓝色虚线是什么含义？

蓝色虚线代表安全内容边界（Grid Lines）。只要您的核心文字和关键按钮放置在蓝色虚线范围内，无论访客屏幕如何伸缩，内容都绝对不会被侧边裁剪。

Q：我不小心关闭了右侧的检查器面板，怎么重新调出？

点击右上角工具栏的折叠展开图标，或者直接双击画布上的任意组件，右侧检查器面板会自动弹出并聚焦到该组件对应的参数页。