回到所有的课程
课程库

符号

使用Symbols可以将任何元素及其子元素转换为可重用组件。

本视频采用了旧的用户界面。更新版本即将到来!

使用符号可以更有效地管理整个站点的重复布局和内容。

符号允许您将元素及其子元素转换为可重用的布局-在一个地方更新和编辑符号,以避免单独修改每个重复出现的布局。

符号主要有两种用法:

  1. 每个实例具有相同的内容。创建具有完全相同内容的重复布局的相同副本,如导航条、页脚和注册表单。在一个地方编辑它们,看看这些变化对该符号的每个实例的影响。
  2. 每个实例的惟一内容。为符号中的文本、图像或视频创建内容重写字段以重用符号布局同时赋予每个Symbol实例唯一的内容。
在这节课中
  1. 创建一个符号
  2. 定义覆盖字段
  3. 使用一个符号
  4. 编辑一个象征
  5. 拆开一个象征

创建一个符号

除了主体元素外,您可以从站点中的任何元素或元素组创建Symbol。

要创建一个Symbol:

  1. 选择要转换为“符号”的元素
  2. 右键单击并选择创建符号
  3. 给这个符号一个名字,然后按创建符号

一旦你创建了一个Symbol,你将被放置在Symbol的主模式中。主模式中的所有更改将在该符号的所有实例中更新。您可以通过双击(参见编辑主元件).

快捷键

您也可以通过按键盘上的快捷键来创建一个新的符号:Command + Shift + A(在Mac)或Control + Shift + A(在Windows上)。这将从你选择的任何元素创建一个Symbol。

定义覆盖字段

注意:如果你创建的Symbol在每个实例中都有完全相同的内容(比如导航条、页脚和一些表单),你不需要为该Symbol创建覆盖字段。

覆盖字段允许您在Symbol中定义特定的元素,这些元素可以用Symbol实例上唯一的内容覆盖。这对于重复出现的布局模式非常有用,这些布局模式的结构应该是统一的,但每个实例中都有独特的内容。(阅读更多关于符号重写的内容,请参见发布博客文章)。

选择您想要覆盖的元素,然后在元素的设置中创建一个覆盖字段。

创建一个覆盖字段:

  1. 双击以进入符号的主编辑模式
  2. 选择要为其创建覆盖字段的元素
  3. 中的紫色圆点图标设置面板为该元素创建一个字段
  4. 根据设计中的功能给它起一个名字

另一种方法:首先创建一个字段,然后将它连接到Symbol中的一个元素。

您还可以在直接从设置面板编辑主符号时创建覆盖字段,并将这些字段连接到符号内的元素。

覆盖字段的合格元素类型

您可以为以下类型的元素创建重写:

  • 文本字段(例如段落、标题)
  • 图像元素
  • 视频元素
  • 链接(按钮、链接块)
  • 富文本的元素

对样式重写的未来支持正在开发中。

使用一个符号

从符号面板访问符号。(快捷键:点击Shift +一个直接打开你的符号。)

一旦你创建了一个符号,你可以在网站的任何地方重用它。

  1. 打开符号面板
  2. 单击并拖动所需的符号到您的网站中的任何页面
  3. 直接在画布上或导航器中放置Symbol实例,以获得更高的精度

当你选择一个Symbol的实例时,你会看到它被高亮显示并用绿色标出。单击风格的面板查看该符号在您的网站中出现了多少次。

您还可以使用Quick find with将符号添加到画布上命令+ E(在Mac)或控制+ E(在Windows上)。学习如何使用快速查找

巢符号

你可以在其他的symbol中嵌套symbol来更容易和有效地构建和维护复杂的布局。将符号嵌套在一起意味着你可以让一个按钮变成一个符号,而导航栏、英雄栏和功能卡也可以变成符号。

这允许您在一个地方独立地更新每个Symbol,并查看这些更改对每个其他实例的影响。

巢符号:

  1. 双击要放置另一个符号的符号
  2. 单击以打开符号面板(或使用键盘快捷方式)转变+一个
  3. 从面板中拖动一个元件到选定的元件中,然后释放

还可以从已经包含Symbol的父元素创建Symbol。

将嵌套的符号字段链接到父符号

当你在另一个符号内嵌套一个带有覆盖字段的符号时,你会看到一个提示,将该嵌套符号的字段链接到父符号。这允许您为来自父Symbol实例的嵌套Symbol中的字段设置重写。

将显示一个嵌套的Symbol的设置模式窗口。

要将嵌套的Symbol链接到父Symbol:

  1. 选择要链接到其父符号的覆盖字段的嵌套符号
  2. 点击“紫色的点图标来创建该字段并将其链接到父符号中的覆盖字段
  3. 根据链接到父符号的字段给它一个名称(例如,“card-button”)
嵌套符号的设置模式窗口中的紫色圆点图标被单击以显示将嵌套符号链接到其父符号的选项。

将内容重写应用于Symbol实例

在设置面板中将内容重写应用到单个Symbol实例。

要对给定的Symbol实例中的元素应用内容重写:

  1. 单击该实例
  2. 从Symbol的设置面板编辑每个覆盖字段的内容
  3. 通过点击Symbol实例上的"cog"图标打开该Symbol的设置模式。

要将重写恢复为该符号的默认内容,请单击实例重写标签(例如,“卡标题”,“卡段落”等),以一次性重置所有重写。

单击任何Instance覆盖标签以拉出恢复默认内容的选项。在本例中,“Card heading”和“Card段落”标签被高亮显示。

编辑一个象征

编辑主元件

要编辑一个符号,双击一个实例或选择它并按enter键。一旦进入编辑模式,就会对主符号进行更改。

双击编辑主符号。在main Symbol视图中,您将看到覆盖字段的默认值。

对主Symbol的编辑将影响每个Symbol实例(除非该Symbol实例覆盖了一个特定元素的内容)。

您可以从主符号一次更改所有符号实例的结构和元素顺序。

对主Symbol的编辑会影响每个实例,除非在Symbol实例中特别重写。

删除并重新连接元素以覆盖字段

将元素连接到现有被重写的字段,每个实例将记住并应用以前设置的重写。

如果从main Symbol中删除一个元素,其他实例中的每个对应元素也将被删除(即使它们已经被惟一的内容覆盖)。您可以向主Symbol添加新元素,并将它们重新连接到现有的重写字段,每个实例将记住并应用以前设置的重写。

退出主符号

一旦你完成了一个符号的编辑:

  1. 点击回到实例在左上角
  2. 点击在画布上的符号外面
  3. 或者按键盘上的Escape键

一旦你离开了主符号,你就会编辑那个特定的符号实例。

在编辑器中编辑符号

如果你邀请合作者要在编辑器中更新站点的内容,它们对Symbol元素所做的任何跨所有实例一致的更改将应用于所有其他实例。如果编辑一个与覆盖字段绑定的Symbol中的元素,则编辑该Symbol实例的元素将只应用于该Symbol实例。

重命名一个象征

重命名符号:

  1. 打开符号面板
  2. 单击符号旁边的铅笔图标

使用Quickfind重命名符号:

  1. 将鼠标悬停在搜索结果中的Symbol实例上
  2. 点击编辑图标

删除一个象征

要完全删除一个Symbol:

  1. 从站点中删除该符号的所有实例
  2. 打开符号面板
  3. 点击铅笔图标
  4. 删除

拆开一个象征

要解除一个Symbol的链接,并独立地对其进行更改:

  1. 右键单击Symbol标签
  2. 选择拆开从符号
  3. 或者(如果元素很难选择)在Navigator中右键单击元素

解除链接后,编辑该Symbol的链接实例将不会更改已解除链接的实例。

很高兴知道:如果编辑主符号与你要编辑的内容重叠,双击这个工具条会将它移到设计器的顶部。


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