画廊

使用灯箱元素在全屏模式窗口内显示图像或视频。

画廊 组件在全屏幻灯片模式窗口中显示图片(带或不带说明)或视频。图库还可适应不同的屏幕尺寸,方便在计算机、平板电脑和智能手机上展示媒体。

本教程将涵盖:

  1. 建立画廊的指南
  2. 将媒体添加到画廊
  3. 使用画廊组在画廊之间建立联系

建立画廊

图库图标缩略图

画廊由一个可点击的缩略图组成,该缩略图包含在链接块内。当访问者在实时网站上点击链接边界内时,画廊就会打开,显示相关媒体。

要设置画廊:

  1. 导航 插入面板 > 先进的
  2. 选择 画廊 组件或将其拖到 Webflow 画布上
插入面板中突出显示的图库组件。

图库缩略图的功能

图库包含一个图像元素,其操作方式与其他图像元素一样。您可以调整其大小、通过双击替换占位符缩略图以及添加替代文本。阅读有关图像元素的更多信息以进一步探索。

图库缩略图的图像设置。

您可以将同一张图片用于图库缩略图和更大的图库模式窗口。Webflow 会自动为所有内联图像生成可适应的版本。探索有关响应式图像的更多信息,了解更多详细信息。

相同的图像以六种不同的尺寸显示:原始尺寸、2000px、1600px、1080px、800px 和 500px。

使用替代内容更改图库缩略图

您可以替换占位符图像元素,并在其中插入各种内容(例如标题或任何非链接组件) 画廊链接.

或者,您可以使用 分割块 并使用背景图像来建立等大小的图像缩略图。

画廊链接包含旧金山 Sutro 浴场的图片。它具有 H1 标题和一段文字。H1 文字显示 Sutro 浴场,而段落详细介绍了加利福尼亚州旧金山。

增强画廊外观

您可以设计图库链接及其内容。例如,如果您在图库链接中嵌套文本元素,则可以自定义图库链接组件的排版。

虽然无法自定义单击图库链接后打开的模式窗口中的背景覆盖,但您可以插入图像或视频以及图像描述(如果需要)。

将媒体添加到画廊

要在图库模式窗口中包含图像和说明:

  1. 选择 画廊链接 在画布上
  2. 访问 元素设置面板 > 图库设置 > 媒体
  3. 点击 ”添加图片“ 按钮
  4. 选择 选择图片
  5. 从中选择一张图片 资源面板
  6. 标题 场地
  7. 选择 节省

您可以根据需要将多张图片插入图库链接。这些图片将以幻灯片形式在图库模式窗口中展示。

请注意: 目前,画廊元素不支持为画廊内的图像提供替代文本。
灯箱设置的媒体部分中“添加图像”按钮突出显示。

为了将视频插入灯箱模式窗口:

  1. 选择 灯箱链接 在画布上
  2. 导航 元素设置面板 > 灯箱设置 > 媒体
  3. 按 ”添加视频“ 图标
  4. 网址 场地
  5. 点击 节省
灯箱设置的媒体部分中“添加视频”按钮突出显示。

如何从 Collection 字段媒体形成动态灯箱

可以通过从 CMS 或电子商务收藏中的媒体收藏字段(例如图像字段、多图像字段或视频字段)中获取缩略图和/或灯箱媒体来生成动态灯箱。

要将动态收藏夹字段链接到灯箱缩略图:

  1. 整合 灯箱 进入动态链接的收藏列表或 CMS 收藏页面
  2. 选择占位缩略图
  3. 使用权 元素设置 > 图像设置
  4. 勾选“从...获取图像”框 博客文章“(收藏集名称可能因您选择的收藏集不同而不同)
  5. 从中选择一个图像集合字段 选择字段 落下

接下来,您可以建立灯箱和收藏夹字段之间的连接,以使您的动态收藏夹图像可以在灯箱中访问。要将动态收藏夹字段附加到灯箱媒体:

  1. 选择 灯箱链接
  2. 使用权 元素设置 > 灯箱设置 > 媒体
  3. 勾选“从以下位置获取媒体 博客文章“(收藏夹名称可能因您选择的收藏夹不同而不同)
  4. 从中选择一个媒体收藏字段 选择字段 落下
在图像设置中选中“从博客文章中获取图像”checkbox,并在下拉菜单中选择“主图像”集合字段。
在灯箱设置中选择了“从博客文章中获取媒体”checkbox,并在下拉菜单中突出显示了“博客图像”多图像收集字段。

使用灯箱集群连接灯箱单元的步骤

您可以选择将多个灯箱连接起来以建立幻灯片库。访客点击链接的灯箱后,将显示与相关灯箱组相关的所有媒体。

制定灯箱集群的过程

  1. 灯箱
  2. 继续 元素设置 > 灯箱设置
  3. 勾选“与其他灯箱链接”
  4. 输入名称
灯箱设置板包括图像的添加图标、视频的包含图标、文件标题和带有删除符号的微型图像、“与其他灯箱链接”的已确认 checkbox 和名为“2021 公路旅行”的集群标题。

将其他灯箱链接到同一集群

要将其他灯箱连接到集群,请对每个灯箱单独执行以下步骤:

  1. 选择任意元素 灯箱
  2. 导航 元素设置 > 灯箱设置
  3. 标记标题为“与其他灯箱链接”的框
  4. 输入相同的 集群名称
一组灯箱展示了四张图片,其中一张是旧金山著名的苏特罗温泉浴场。附加的标题写着“旧金山苏特罗温泉浴场”。

处理收藏列表中的灯箱时,在收藏项中创建和连接一个灯箱的操作将自动链接收藏列表中存在的所有灯箱。

灯箱设置部分突出显示了一个用于“从产品中检索媒体”获取主图像的确认框、一个用于与其他灯箱互连的确认框以及一个名为“2021 公路旅行”的集群名称。

在单个页面上建立多个灯箱集群

当同一页面上显示多个灯箱时,您可以通过分配不同的 集群名称.

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