# 编辑器 | Creght 可视化文档

> 编辑器用于设计网站中的每一个页面。 依次打开工作台 - 项目 - 网站 - 设计页面，就能进入编辑器。 网站详情页面: 编辑器界面布局 编辑器由顶部的操作栏，左侧的页面、布局树，右侧的元素设置栏和中间的画布组成。…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 编辑器

编辑器用于设计网站中的每一个页面。

依次打开工作台 \- 项目 \- 网站 \- 设计页面，就能进入编辑器。

网站详情页面:

![image.png](https://fsb.huglight.cn/1d2571b8f692ee890e709b1a163321af/image.png)

## **编辑器界面布局**

编辑器由顶部的操作栏，左侧的页面、布局树，右侧的元素设置栏和中间的画布组成。

![image.png](https://fsb.huglight.cn/08741cff265e4f0c00db63fdb3c24798/image.png)

简单的说：

- 如果想要 **添加元素** 到画布上，应该在顶部的操作栏寻找功能
- 如果想要 **管理已有的元素**（比如调整顺序），应该在左侧的”布局树“上操作
- 如果想要 **更改元素设置**，则需要选中元素然后再右侧的 ”元素设置栏“ 进行设置。

### 操作栏

在上方的操作栏，可以添加基本元素，如文本容器或者组件库中的组件。

从左往右的按钮依次是 菜单，丛组件库添加，添加容器元素，添加文本元素，切换光标模式，缩放画布。

- 菜单：可以快速跳转到项目，升级套餐等

![image.png](https://fsb.huglight.cn/c2efed4928767a5a8d87bb0a3cddd9c2/image.png)

- 从组件库添加：Creght 内置了许多预制组件，可以帮助你快速搭建页面，在面板中选择组件，然后拖拽到页面上就可以添加此组件。

![image.png](https://fsb.huglight.cn/6a3871eefcd4dc4459af348820825982/image.png)

- 添加容器元素：容器组件用于布局页面，有几种类型 列，行，网格，每种类型都有不同的布局作用，我们会在后面的布局篇详细介绍。点击按钮后（键盘快捷键 F）就会进去添加容器元素模式，然后再画布中框选出一个矩形就能创建容器。

![image.png](https://fsb.huglight.cn/6ab17f4723195c68dfc7c1a5c427c9dc/image.png)

- 添加文本元素：点击按钮（快捷键 T）后在画布中框选一个矩形或者点击画布就能创建文本组件，接下来就可以输入需要的文字。双击创建好的文本组件可以编辑文字。

![image.png](https://fsb.huglight.cn/8ed1b3c9d750d52ba80f0bdde7122cc0/image.png)

- 切换光标模式：目前光标有两个模式，普通与抓手，
  - 普通模式下点击鼠标左键选中元素。
  - 抓手模式下按下鼠标左键并移动拖动画布。
- 缩放画布 点击按钮会弹出设置画布缩放比例的选项，如缩放到 100%，缩放到适合（缩放到刚好可以看到所有元素）。

![image.png](https://fsb.huglight.cn/449525f7ba218f5ffdaa98449ccc6a2f/image.png)

### 组件层级树

在左侧的层级树中可以看到画布上所有的元素层级关系，在层级树中可以双击节点更改元素的名字，一个有意义的名字更有利于您梳理页面结构。也可以拖拽节点进行排序或者移动到其他元素下。

双击更改元素名字：

![image.png](https://fsb.huglight.cn/a1d178359619d861f64a532d44bd516e/image.png)

按住节点并拖拽可以移动元素：

![image.png](https://fsb.huglight.cn/39c8454203308989a3d5ff309deb75eb/image.png)

### 元素设置栏

右侧的元素设置栏相对比较复杂，选择不同类型的元素会出现不同的设置项。我们先粗略的看一下，建立初步概念，在后面的 ”页面元素” 章节会详细讲解每个配置项的功能。

以下是最常用的两种元素，即文字与容器的设置项目：

**文字设置项：**

![image.png](https://fsb.huglight.cn/b3bf2bc79d561dc6d6d7e7bad499ac56/image.png)

从上到下的栏目分别是：位置，尺寸，动效，光标，样式，文字，变换，无障碍。

其中只有 ”文字“ 栏目专属于文字元素，而其他栏目的配置项，比如尺寸，位置，是所有元素类型共有的设置。

**容器设置项：**

![image.png](https://fsb.huglight.cn/23ecda46ccada5ca63a403303e8ea1df/image.png)

每个栏目的简单介绍：

- 位置：控制元素在父级中的定位方式，与 [CSS 定位方式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 一致，有绝对定位，相对定位，固定定位，粘性定位。关于定位，我们有单独的文章来介绍： [什么是布局](https://www.notion.so/14b32aefbb5a80139525de63ce45c067) 。
- 尺寸：控制元素大小，比如固定的宽高、包裹子级、填充满父级。
- 动效：可以为元素设置出场动画，丰富视觉效果。
- 光标：设置鼠标放入元素时的光标样式。
- 样式：对元素进行透明度、显示隐藏、填充背景图片等操作
- 无障碍：可以给容器或者文本设置一个更有语义化的 html tag，更有利于搜索引擎和用户理解。更多资料可参考： [HTML标签语义化：提升网站SEO与用户体验的双重利器](https://segmentfault.com/a/1190000045465892?utm_source=sf-similar-article)
- 布局：容器组件特有的设置项，布局用于控制其子级的排列方式，这是一个复杂且重要的属性，我们有单独的文章介绍： [什么是布局](https://www.notion.so/14b32aefbb5a80139525de63ce45c067) 。
- 文字：文字组件特有的设置项，用于设置文字的字体、大小、颜色等。


> 小贴士: 理解配置项最好的方式就是直接去更改试试，不用担心回不到之前的状态，按 Ctrl + Z (⌘ + Z) 可以撤销更改。


### **画布**

画布是编辑器的主界面，在画布上，您可以缩小画布一览各个终端的页面，也可以放大画布专注于实现某个组件。如果你用过主流设计工具（如 Figma，蓝湖），那么使用 Creght 也会十分容易上手。

![image.png](https://fsb.huglight.cn/87c01e1c3322aab65ea33ff84a95ada9/image.png)

画布中有一些基础操作：

- 鼠标左键可以选择元素，按住左键移动可以拖动选择的元素。
- 按住鼠标中键移动可以快速移动画布。
- 鼠标滚轮可以上下移动画布。
- 按住 ctrl 并滚动鼠标滚轮可以缩放画布。
- 鼠标右键可以呼出菜单，比如复制，粘贴。
- 按住 Shift 可以多选元素，在同时编辑多个元素设置项是很有用。
- 按住 Ctrl (⌘) 快速选中父级。
- 双击文字元素快速编辑文字、双击组件进入组件编辑模式。
- Ctrl(⌘) + Z 撤销更改，Ctrl(⌘) + Shift + Z 重做更改。
- 选中元素并右键，可以复制或者粘贴元素，或者使用快捷键 Ctrl + C（在 Mac 上是 ⌘ + C）复制元素，Ctrl + V 粘贴元素，Ctrl + D 可以为快速为元素创建副本。

### 预览与发布

更改了元素设置后可以先通过预览来查看是否符合预期，点击右上角的 “预览” 按钮可以预览当前正在编辑的页面。

![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVozLwtQN__image.png)

预览界面：

![image.png](https://fsb.huglight.cn/3fdf8d989f4fc50a6fa46964afe9bed8/image.png)

在预览界面可以拖动右侧的拖动条来更改窗口大小以浏览不同设备上的效果。

如果预览没有问题，则可以进行发布，点击右上角的发布按钮就可以将所有更改发布到线上。

发布到线上之后就可以通过域名（包括我们提供的免费域名与您的自定义域名）访问到最新的网站。

本文目录

- [编辑器界面布局](#编辑器界面布局)
- [操作栏](#操作栏)
- [组件层级树](#组件层级树)
- [元素设置栏](#元素设置栏)
- [画布](#画布)
- [预览与发布](#预览与发布)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)