回到所有的课程
课程库

添加元素面板

使用“添加元素”面板可以快速、可视化地访问可以添加到Webflow项目中的各种元素。

这个视频展示了一个旧的用户界面。更新版本即将到来!

添加元素面板可以让您快速、可视化地访问可以添加到项目中的各种元素。

Webflow元素面板

这个小组被分成几个简单的类别。例如,Typography部分包含与文本相关的所有元素。表单的另一个类别包含可用于创建表单的所有构建块。这里是所有的部分和存在的元素类型:

  • 布局
  • 基本
  • 排版
  • CMS
  • 媒体
  • 形式
  • 组件

有三种方法从添加元素面板中添加元素到您正在处理的页面:

  • 单击添加到位
  • 拖到画布上
  • 拖进导航器
很高兴知道
您还可以使用快速查找(CMD+E/CTRL+E)学习如何使用快速查找

单击添加到位

单击“添加”是将元素添加到画布上的快速方法。

  1. 选择页面上的现有元素。
  2. 打开“添加元素”面板。
  3. 单击要添加的元素。
  4. 新元素将被添加到页面上。

添加的元素第一次出现的位置与所选元素相关。因此,如果所选元素是文本、媒体或按钮元素,则添加的元素将出现在所选元素的旁边或下面。

如果你最初选择了一个父元素,比如一个div块或容器,新元素将被添加到这个结构元素中,在底部。

如果您没有选中某个元素,然后单击以添加一个元素,那么它将被添加到页面底部的Body元素内部。

您总是可以通过拖动元素来更改元素的位置。

拖到画布上

从添加元素面板中添加元素的第二种方法是将元素拖放到画布上。

当您拖动一个元素时,橙色指示器会告诉您要将其放置到哪个父元素中。蓝色指示器显示了该元素在父元素中的位置。

如果右侧打开了Navigator选项卡,当您拖动该元素在画布上重新定位时,还可以准确地看到该元素的位置。

拖进导航器

在页面上添加元素的第三种方法是使用导航器

在导航器中,您可以看到页面的完整视觉轮廓。因此,您可以精确地将一个元素从Add Elements面板中拖放到Navigator中。

元素的默认位置

当您在画布上添加一个元素时,它的位置相对于它的兄弟元素。这个默认位置由添加的元素及其兄弟元素的默认显示设置决定。

所以,如果你添加一个默认显示设置为Block的元素,它将始终显示在它自己的行上,在周围元素的上面或下面。

当添加显示设置为Inline Block的元素时,它们将被放置在Block元素的下面或上面,或者在其他Inline Block元素的旁边。添加元素面板中的所有元素都是块元素,除了这些元素是内联块:

唯一有a的元素显示设置的Inline是文本链接元素.内联元素的定位行为类似于内联块元素。

了解更多关于显示设置的信息。

控件中更改大多数元素的显示设置样式面板

尝试Webflow-是免费的
Baidu
map