设计

/

基本操作

最后更新时间:

2024-12-10

添加元素

点击顶部的 ”操作栏“ 的 ” 口“ 图标可以进入快速插入容器元素模式,然后按下鼠标就可以画布绘制容器。

image.png

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

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

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

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

image.png

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

image.png

插入面板

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

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

    image.png

复制,粘贴元素

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

image.png

撤销,重做

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

移动元素

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

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

编辑文字元素

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

继续阅读

下一篇