组件概述 - Webflow 帮助

使用组件更高效地管理网站的重复布局和内容。

组件让您可以从元素和子元素创建可自定义的块，以保持一致、高效和可扩展的设计工作流程。您可以在网站上重复使用这些块，并在一个地方修改它们，以避免单独修改每个重复的布局。

如何创建组件

您可以在 Webflow 中直观地创建组件，或使用 DevLink 从外部代码库导入现有组件。本节重点介绍视觉开发。

您可以从一个元素或一组元素创建组件，并选择每个实例在整个网站上是否相同，或者允许更改其内容、布局或样式：

• 每个实例的内容和设计相同 — 为重复布局（例如导航栏和页脚）创建组件，以便在网站上重复使用。对内容或设计的任何更改都会自动更新组件的每个实例。
• 每个实例的内容独特 — 创建具有一致布局和设计的组件，但允许每个实例具有不同的内容（例如，英雄部分布局可以在每个实例中具有独特的文本、图像或视频），使用组件属性和插槽。
• 每个实例的样式变体不同 — 创建具有预定义样式和布局选项的组件（例如，实心和轮廓按钮，或水平和垂直卡片布局）。组件样式变体让您可以自定义每个实例的设计，而无需创建单独的组件。

创建组件的步骤：

1. 选择您想要转换为组件的元素
2. 打开组件面板、样式面板或元素设置面板
3. 点击面板顶部的“创建组件”图标
4. 为您的组件命名并添加可选描述，然后点击创建

您还可以通过选择组件，点击“更多选项”点，然后选择复制来复制现有组件。

创建组件后，您将进入主组件——这意味着对主组件的任何更改都会更新该组件的所有实例。您可以随时通过以下方式进入任何组件实例的主组件：

• 双击组件实例
• 右键点击实例并点击编辑组件
• 选择实例并点击标签中的“铅笔”图标
• 选择实例并点击右侧面板右上角的“扳手”图标

了解更多关于编辑主组件的信息.

如何使用和重复使用组件

一旦创建了组件，您可以在网站的任何地方重复使用它：

1. 打开组件面板
2. 将鼠标悬停在组件上以查看预览
3. 点击并拖动所需的组件到网站的任何页面
4. 将组件实例直接放在画布上或导航器中

当您选择一个组件实例时，您会看到它被高亮显示并用绿色勾勒。打开组件面板以查看您的组件在网站中使用的次数。

要在导航器面板中查看组件的元素层次结构，请按住 Option + 双击（在 Mac 上）或按住 Alt + 双击（在 Windows 上）组件，或点击“编辑主组件”图标。您只能从主组件（而不是组件实例中）查看组件的元素层次结构。

如何编辑组件

让我们来看看您可以与组件交互和编辑的各种方式：

• 编辑主组件
• 组件属性、插槽和样式变体
• 创建组件样式变体
• 管理变体属性
• 更改组件实例的变体
• 重新排序、重命名、复制或删除组件样式变体
• 退出主组件
• 在编辑器中编辑组件
• 更改组件名称或描述
• 组合组件
• 删除组件

编辑主组件

要在组件的所有实例中进行相同的更改，您需要编辑主组件。您可以通过以下方式在任何组件实例上编辑主组件：

• 双击画布上的组件实例
• 按住 Option + 双击（Mac）或 Alt + 双击（Windows）导航器中的实例
• 右键点击实例并点击编辑组件
• 选择实例并点击标签中的“编辑组件”图标
• 选择实例并点击右侧面板顶部的“编辑组件”图标

对主组件的编辑将影响每个组件实例（除非该组件实例在组件内的特定元素上应用了组件属性）。编辑主组件时，您可以更改结构和元素顺序，以同时影响网站上的所有组件实例。

组件属性、插槽和样式变体

组件属性（props）、插槽和样式变体让您可以在每个组件实例上创建独特的配置：

• 属性 — 将主组件中的单个元素设置（例如文本、链接、图像或视频）连接到属性。这允许您在不更改组件整体结构或设计的情况下自定义这些设置。属性还可以连接到 CMS 字段，以动态从您的 CMS 集合中提取内容。
• 插槽 — 插槽是您可以放置在现有组件中的元素，作为其他组件的占位符。这让您可以模块化地构建组件，每个实例可以在插槽中包含不同的组件。
• 样式变体 — 为单个组件定义多种设计选项，允许您根据不同的使用场景调整其外观。例如，您可以提供样式变体，如实心或轮廓按钮，或水平和垂直卡片布局。

创建组件样式变体

您可以为组件创建不同布局、颜色、字体样式等的变体（例如，实心或轮廓按钮，或水平和垂直卡片布局），并选择在网站的每个组件实例中使用哪个变体。

创建组件样式变体的方法：

1. 编辑主组件
2. 转到 样式面板
3. 点击 样式选择器 中的“组件变体”图标
4. 点击“加号”图标
5. 为变体命名一个唯一名称
6. 按 Enter/Return 确认

管理变体属性

当您创建组件样式变体时，会自动为该组件创建一个变体属性。您可以更改变体属性的名称，将其添加到属性组，并在 属性面板 中为组件设置默认变体。

更改变体属性名称的方法：

1. 编辑主组件
2. 转到 属性面板
3. 点击变体属性
4. 输入唯一的属性名称
5. 按 Enter/Return 确认

将变体属性添加到属性组的方法：

1. 编辑主组件
2. 转到 属性面板
3. 点击变体属性
4. 选择一个组或输入唯一名称创建新组
5. 点击创建或按 Enter/Return 确认

为组件设置默认变体：

1. 编辑主组件
2. 转到 属性面板
3. 点击变体属性
4. 从默认下拉菜单中选择一个变体

更改组件实例的变体

与其他组件属性一样，您可以为每个组件实例选择样式变体。更改组件实例变体的方法：

1. 单击组件以打开 属性面板
2. 从变体下拉菜单中选择此实例的变体

重新排序、重命名、复制或删除组件样式变体

在设计模式下，您可以管理组件样式变体（重新排序、重命名、复制或删除变体）。

重新排序组件的变体：

1. 编辑主组件
2. 转到样式面板
3. 点击样式选择器中的“组件变体”图标
4. 点击并拖动变体以将其移动到新位置

重命名变体：

1. 编辑主组件
2. 转到样式面板
3. 点击样式选择器中的“组件变体”图标
4. 将鼠标悬停在变体上并点击“更多选项”图标
5. 点击重命名
6. 输入新的、唯一的变体名称
7. 按Enter/Return确认

复制变体：

1. 编辑主组件
2. 转到样式面板
3. 点击样式选择器中的“组件变体”图标
4. 将鼠标悬停在变体上并点击“更多选项”图标
5. 点击复制
6. 输入新的、唯一的变体名称
7. 按Enter/Return确认

删除变体：

1. 编辑主组件
2. 转到样式面板
3. 点击样式选择器中的“组件变体”图标
4. 将鼠标悬停在变体上并点击“更多选项”图标
5. 点击删除
6. 在弹出模式中点击删除以确认

退出主组件

完成主组件的编辑后，您可以通过以下方式退出主组件：

• 点击设计器左上角的“返回”箭头
• 点击画布上的组件外部
• 按键盘上的Escape键

在编辑器中编辑组件

如果您邀请了内容编辑者在编辑器中更新网站内容，他们对未通过组件属性修改且在所有实例中一致的组件元素所做的任何更改，将应用于所有其他实例。

或者，如果内容编辑者对通过组件属性修改的组件元素进行更改，则这些更改仅适用于他们正在编辑的组件实例。

更改组件名称或描述

要更改组件名称或描述：

1. 打开 组件面板
2. 将鼠标悬停在组件名称上，点击出现的“更多选项”点
3. 点击编辑设置
4. 进行更改并保存

重命名组件实例

您可以重命名单个组件实例以便更容易识别——这在页面上多次重复使用相同组件时特别有用。

要重命名组件实例：

• 在导航器或右侧面板顶部：

1. 双击组件名称
2. 输入新名称
3. 按 Enter 或点击空白处以保存自定义名称

• 在画布上：

1. 右键点击组件实例
2. 点击重命名
3. 输入新名称
4. 按 Enter 或点击空白处以保存自定义名称

要将名称重置为原始组件名称，请在重命名期间删除自定义名称，或在导航器或画布上右键点击实例并点击 重置名称。

分组组件

要将组件组织成组：

1. 打开 组件面板
2. 将鼠标悬停在组件名称上，点击出现的“更多选项”点
3. 选择编辑设置
4. 从组下拉菜单中选择一个现有组，或输入以创建新组

要重命名或取消分组组件组，请将鼠标悬停在组标题上，然后点击“更多选项”点。

删除组件

要完全删除组件：

1. 从您的网站中移除或取消链接组件的所有实例
2. 打开组件面板
3. 将鼠标悬停在组件名称上，然后点击出现的“更多选项”点
4. 选择编辑设置
5. 点击删除并确认

如何取消组件实例与其主组件的链接

要取消组件实例的链接并独立于主组件进行更改：

1. 右键点击要取消链接的实例中的任何组件元素
2. 点击取消链接实例

取消链接后，如果您在设计中编辑该组件的任何其他链接实例，它将不会更改已取消链接的实例。

通过库在多个网站间共享组件

您可以通过库在工作区内的多个网站间共享原生和代码组件。这可以加速您的工作流程，并通过提供一个更新在工作区内多个网站中使用的组件的单一位置来增强您的设计系统。

返回webflow帮助