回到所有的课程
课程库

添加元素面板

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

这个视频的特点是一个旧的UI。更新版本即将发布!

添加元素面板为您提供了对可以添加到项目中的各种元素的快速、可视化访问。

Webflow元素面板

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

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

有三种方法可以从添加元素面板中添加元素到你正在使用的页面:

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

单击此处添加

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

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

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

如果您最初选择了一个父元素,如div块或容器,则新元素将添加到这个结构元素的底部。

如果您没有选择一个元素,然后单击添加一个元素,它将被添加在页面底部Body元素内部。

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

拖到画布

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

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

如果右侧打开了Navigator选项卡,您还可以看到在拖动该元素时将其放置在画布上的确切位置。

拖到导航器

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

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

元素的默认位置

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

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

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

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

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

方法更改大多数元素的显示设置样式面板

尝试Webflow——它是免费的
Baidu
map