回到所有的课程
课程库

资产面板

在Webflow设计器中上传和管理您的网站的所有资产。

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

资产面板允许您上传和管理您的网站的所有资产。资产面板位于设计器的左侧工具栏中。在这里,您可以上传资产,将它们组织到文件夹中,根据类型(图像、文档或Lottie)对它们进行排序,并将它们直接拖放到您的Webflow画布上。

在这节课中,你将学到:

  1. 如何添加资产
  2. 支持的文件类型
  3. 如何命名资产
  4. 如何使用资产
  5. 如何删除资产
  6. 如何过滤和排序资产

如何添加资产

有三种方法添加图像或文件到您的网站:

  • 资产面板中的上传图标
  • 直接拖拽资产到资产面板
  • 将资产直接拖放到画布上

上传一个资产到资产面板

上传一个资产到资产面板:

  1. 点击“资产的图标
  2. 点击““上传图标
  3. 从计算机中选择1个或多个图像或文件
“云”上传图标在资产面板中高亮显示。

你也可以从你的电脑上直接拖动1个或多个图像或文件到你的画布上,而不需要保持资产面板打开。您的资产将被自动上传至资产面板

直接在画布上添加一个资产

您可以将单个图像或文件拖放到画布上。它将自动创建一个图像元素或文件的链接。图像或文件也会自动添加到Assets面板中,因此您可以稍后重用它。

支持的文件类型

资产面板支持最多图像文件类型,下面列出的文档类型,以及Lottie JSON动画文件。

重要的:只上传您有权使用和分发的文件。
请注意:图片的最大容量为4MB,文档的最大容量为10MB。

支持的图像文件扩展名

  • PNG
  • JPEG和JPG
  • GIF
  • SVG
  • WebP

支持的文档文件类型

  • PDF
  • 文档和多克斯
  • XLS和XLSX
  • PPT和PPTX
  • 三种
  • CSV
  • ODT
  • ODS
  • ODP

支持Lottie文件类型

  • JSON(只有Lottie类型)

如何命名资产

为了避免在上传资产到资产面板或画布时出错,在命名你的资产时要记住以下几点:

  1. 可以使用字母、数字、连字符和下划线(可以在url中链接到资产的字符)
  2. 避免文件名中的特殊字符(例如,' #,(),',')
  3. 使用较短的文件名(不超过100个字符,包括文件扩展名)
请注意:为了帮助更快的加载时间,保持你的图片在4MB以下-调整大小,优化,和/或压缩大的文件大小。要做到这一点,你可以使用免费的第三方工具,比如CompressJPEGCompressPNG或者您可以压缩您的资产转换为WebP格式使用Webflow转换工具

如何使用资产

一旦你的文件在资产面板,你可以把它们拖到你的网站。删除的图像将显示为图像元素和删除的文件将显示为文本链接

如何附加资产链接元素

您可以将资源附加到链接元素链接设置.将一个资源附加到一个link元素:

  1. 选择link元素(链接块,文本链接,或按钮)在画布上
  2. 设置面板>链接设置
  3. 点击“回形针“文件图标
  4. 点击选择附件

当网站访问者点击链接时,任何图像或文档文件将在同一选项卡中打开。其他文件类型将下载到网站访问者的计算机。

如果您想更改链接的附件,您可以这样做取代链接设置中的附件。您还可以更改设置,使图像或文档文件在一个新选项卡中打开当点击。

在链接设置部分选择了“文件”选项。

如何使用图像资产作为背景图像

使用上传的图片资源作为背景图片:

  1. 选择画布上要设置背景图像的元素
  2. 开放风格的面板>背景
  3. 点击“+的右侧图标图像和梯度
  4. 点击选择图像
  5. 中选择图像资产面板

了解更多关于如何设置背景图像样式的信息

注意:上传一个具有正确分辨率的优化背景图像是很重要的,因为Webflow不会为背景图像创建响应变量。了解更多关于背景图像分辨率的信息

如何搜索资产

您可以使用资产面板中的搜索栏或使用来搜索资产快速的找到.可以通过快捷方式打开“快速查找”命令+E(在Mac)或控制+E(在Windows上)。如果您使用Quick find,请确保启用资产搜索。

在快速查找中启用资产搜索:

  1. 类型命令+E(在Mac)或控制+E(在Windows上)打开快速的找到
  2. 点击设置”齿轮
  3. 检查增加资产
设置“cog”在快速查找搜索栏中高亮显示。

如何删除资产

在画布上删除一个资产实例不会在资产面板中删除资产。从资产面板中删除一个资产:

  1. 打开资产面板
  2. 将鼠标悬停在要删除的资产上
  3. 点击设置齿轮,出现在资产的右上角
  4. 点击删除
打开资产设置“齿轮”图标上的资产。
Delete按钮在资产详细信息模式中高亮显示。

请记住,如果您从“资源”面板中删除了一个资源,而该资源仍在站点的某个地方使用,那么当您发布站点并刷新设计器时,该资源将再次显示在“资源”面板中。该资产的所有实例必须从您的站点删除,然后从资产面板,以完全删除它。

很高兴知道:当你点击资产的设置时齿轮打开资产详细信息莫代尔,你可以看到它大小和/或

如何过滤和排序资产

为了更容易地找到特定的资产,您可以从资产面板中的许多筛选和排序选项中进行选择。

如何筛选资产

默认情况下,所有的资产类型都显示在资产面板中。按文件类型过滤资产:

  1. 打开资产面板
  2. 单击面板左上角的下拉菜单
  3. 选择要显示的资产类型(所有资产图片文档,或洛蒂
资产面板中突出显示了过滤资产的下拉菜单。4个选项分别是“所有资产”、“图像”、“文档”和“Lottie”。

如何分类资产

默认情况下,资产面板中的资产按最新到最旧排序。你可以按最新的第一古老的第一,或字母顺序(A-Z或Z-A).分类资产:

  1. 打开资产面板
  2. 单击面板左下角的下拉菜单
  3. 选择一个排序选项(例如:最新的第一古老的第一字母(a - z)字母(Z-A)
资产面板中突出显示了排序资产下拉框。四个选项分别是“最新的优先”、“最老的优先”、“字母顺序(A-Z)”和“字母顺序(Z-A)”。

如何更改资产面板视图选项

默认情况下,使用网格视图显示资产面板中的资产。可以查看a中的资产网格列表,或列表——小选择。更改视图选项。

  1. 打开资产面板
  2. 点击“网格的图标
  3. 选择一个视图选项(例如,网格列表,或列表——小
资产面板视图选项下拉框在资产面板中高亮显示。这三个选项分别是“网格”、“列表”和“列表-小”。
尝试Webflow——它是免费的
Baidu
map