# 基本操作 | Creght 可视化文档

> 添加元素 点击顶部的 ”操作栏“ 的 ” 口“ 图标可以进入快速插入容器元素模式，然后按下鼠标就可以画布绘制容器。 同时你可以看到菜单项旁边会提示快捷键，可以通过键盘快捷键提升效率，如按 f 进入创建 frame 模式，按 t 进入创建文本…

[![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/project/mtdDqMgsnYi/lXZDbFObdQf__image.png)

同时你可以看到菜单项旁边会提示快捷键，可以通过键盘快捷键提升效率，如按 f 进入创建 frame 模式，按 t 进入创建文本模式。

> 小技巧：在制作一个板块时，我们可以在断点外的画布上创建一个容器，在制作完成之后再移动到断点之中。这样能让你更专注于正在制作的板块。

点击 ” \+ “ 图标可以展开 插入面板，有两种方式将元素添加到画布中：

- 按住元素并拖动到画布任意位置，就可以在指定位置添加元素。
- 点按元素，元素会自动添加到主容器里，常用于快速添加比较大的元素（如板块）。

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

点击 “T” 图标可以进入插入文字元素模式，然后再画布任意位置按下鼠标并键入文字即可添加文字元素。

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

### 插入面板

点击 ” \+ “ 图标可以展开 插入面板，有两种方式将元素添加到画布中：

- 按住元素并拖动到画布任意位置，就可以在指定位置添加元素。
- 点按元素，元素会自动添加到主容器里，常用于快速添加比较大的元素，如板块。

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


## 复制，粘贴元素

选中元素并右键，可以复制或者粘贴元素，或者使用快捷键 Ctrl + C（在 Mac 上是⌘ + C）复制元素，Ctrl + V 粘贴元素，Ctrl + D 可以为快速为元素创建副本。

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

## 撤销，重做

Ctrl + Z 可以撤销上一步操作，Ctrl + Alt + Z 可以重做撤销。注意，刷新浏览器后将不再支持撤销到上一步。

## 移动元素

元素的移动方式受到自己的定位影响，当元素是绝对定位时，你可以通过拖拽元素到任意位置，而如果元素时相对定位时，元素只能在容器内切换排序。除了通过鼠标拖动元素，也可以按键盘方向键（↑ ↓ ← →）来修改元素位置与顺序。

在左侧的元素树上同样可以移动元素：选中元素并拖动元素到指定父级。当元素层级很多时，在元素树上操作更直观、精准。

## 编辑文字元素

双击文字即可进入编辑文字模式，点击空白处退出编辑文字模式。

本文目录

- [添加元素](#添加元素)
- [插入面板](#插入面板)
- [复制，粘贴元素](#复制-粘贴元素)
- [撤销，重做](#撤销-重做)
- [移动元素](#移动元素)
- [编辑文字元素](#编辑文字元素)

![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)