插入元素部分

使用添加元素面板可以快速、直观地访问可添加到 Webflow 项目的各种元素。

插入元素部分使您能够快速、直观地输入可包含在项目中的不同组件。

Webflow 元素面板

该部分分为几个基本组。例如,字体部分包含与文本相关的所有元素。表单的另一个部分包含可用于创建表单的所有结构。以下是所有类别及其对应的元素类型:

  • 布局
  • 基本的
  • 排版
  • 内容管理系统
  • 媒体
  • 形式
  • 成分

有三种方法可以将插入元素部分中的元素包含到当前页面中:

  • 点击现场插入
  • 拖拽到工作区
  • 拖入轮廓
很高兴知道
您还可以使用以下方式将元素添加到工作区: 快速发现(CMD+E/CTRL+E). 了解如何使用快速发现。

点击现场插入

通过点击插入是将元素插入工作区的一种快速方法。

  1. 选择页面上的现有元素。
  2. 发现插入元素部分。
  3. 点击您想要插入的元素。
  4. 新鲜元素将被插入到您的页面上。
 

被合并元素最初出现的位置与所选元素相关联。因此,如果所选元素是文本、媒体或按钮元素,则插入的元素将出现在所选元素旁边或下方。

如果您最初选择了父元素,例如 div 块或容器,则新元素将插入到该结构元素的底部。

 

如果您没有选择元素并点击添加元素,它将被插入到页面底部的 Body 元素内。

您可以随时通过将元素拖动到所需位置来修改其位置。

拖拽到工作区

从插入元素部分插入元素的第二种方法是将元素拖放到工作区上。

拖入元素时,橙色指示器会通知您将其定位到哪个父元素中。蓝色指示器显示元素在父元素内的位置。

 

如果您在右侧打开了“大纲”选项卡,您还可以在拖动以在工作区上重新定位此元素时准确观察其放置的位置。

 

拖入轮廓

在页面上插入元素的第三种方法是利用大纲。

在大纲中,您可以看到页面的完整视觉规划。因此,您可以将元素从插入元素部分直接拖放到大纲中。

 

元素的默认定位

将元素插入工作区后,该元素将相对于其对等元素进行定位。此标准定位由添加的元素及其对等元素的默认可见性设置控制。

因此,如果您添加具有默认可见性设置为“块”的元素,它将始终显示在其单独的行上,相邻元素的上方或下方。

添加具有“内联块”可见性设置的元素时,它们将位于块元素下方或上方,或其他内联块元素旁边。插入元素部分中的所有元素都是块元素,但以下元素除外:

  • 链接块
  • 按钮
  • 图像
  • 灯箱链接
  • 落下
  • 表单按钮

唯一具有可见性设置为内联的元素是文本链接元素。内联元素的放置方式与内联块元素类似。

了解有关可见性设置的更多信息。

您可以从样式面板修改大多数元素的可见性设置。

麦宜云
Ewan Mak 的最新帖子 (查看全部)