回到所有的课程
课程库

资产面板

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

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

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

在这节课中,你将学到:

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

如何添加资产

有3种方法可以添加图片或文件到你的网站:

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

将资产上传到Assets面板

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

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

你也可以从你的计算机直接拖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转换工具

如何使用资产

一旦您的文件在Assets面板中,您就可以将它们拖到您的站点中。删除的图像将显示为图像元素和删除的文件将显示为文本链接

如何将资产附加到链接元素

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

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

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

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

“文件”选项在链接设置部分被选中。

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

使用上传的图像资产作为背景图像:

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

了解更多关于如何样式背景图像

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

如何搜索资产

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

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

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

如何删除资产

在画布上删除资产的实例不会在Assets面板中删除资产。从“资产”面板中删除一个资产。

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

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

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

如何过滤和排序资产

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

如何过滤资产

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

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

如何对资产进行排序

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

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

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

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

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