跳到内容

使用图像滑块模块

上次更新时间: 二月 13, 2025

除非另有说明,否则适用于以下任何订阅

所有产品和计划

您可以使用图片滑块模块在同一模块中显示多张图片。您可以设置图片自动循环播放,也可以支持访客在图片之间手动切换。

在图像滑块模块中添加和编辑幻灯片

  • 导航至您的内容:

    • 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面
    • 博客:在 HubSpot 帐户中,导航到内容 > 博客
  • 将鼠标悬停在内容上,然后单击 "编辑"
  • 在内容编辑器中,点击左侧边栏的add 添加 图标。
  • 单击展开 "媒体 "类别,然后单击 "图像滑块 "模块并将其拖动到位。
  • 在左侧边栏,将鼠标悬停在幻灯片上,点击edit 编辑 图标,即可为该幻灯片添加图片:
    • 在 "图像 "部分,单击 "上传 "从电脑中选择图像,或单击 "浏览图像 "从文件工具中选择图像。
    • 在标题字段 中,输入将显示在图片下方的标题 。要显示无标题的图像,请删除默认文本。
    • 为幻灯片添加链接:
      • 单击链接到 下拉菜单并选择链接类型。
      • 在出现的字段中指定链接目标。了解有关在 HubSpot 中使用链接的更多信息。
      • 要保持内容打开并在新窗口中打开链接,请单击 "在新窗口中 打开链接 "开关。
      • 要向搜索引擎表明链接目的地不属于网站的一部分,请选择 "不跟踪 "复选框。
    • 单击 "应用更改 " 保存对该幻灯片的更改。
  • 在侧边栏编辑器顶部,单击 "图像滑块 " 返回模块概览。

  • 要添加更多幻灯片,请将鼠标悬停在不同的幻灯片上,然后点击edit 编辑 图标。
  • 要最终完成更改,请单击 "应用更改"。

编辑图像滑块模块的设置

  • 导航至您的内容:

    • 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面
    • 博客:在 HubSpot 帐户中,导航到内容 > 博客
  • 将鼠标悬停在内容上,然后点击编辑
  • 在内容编辑器中,点击图片滑块模块。
  • 在侧边栏编辑器中,单击 "设置 " 编辑模块设置。
  • 单击展开幻灯片 部分,编辑幻灯片选项:
    • 在 "每页幻灯片 " 字段中,输入图片幻灯片一次显示的幻灯片数量 。一次最多可显示五张幻灯片。选择同时显示多个幻灯片时,将不显示标题和缩略图。
    • 在 "图像大小 "部分,选择宽高比选项。默认情况下,图像将使用各自的纵横比显示。要在所有图像中统一纵横比,请选择强制纵横比。这可能会导致某些图像出现扭曲。

  • 单击展开 "移动 " 部分,编辑幻灯片过渡选项:
    • 要在播放到最后一张幻灯片时重复播放幻灯片 ,请选择循环幻灯片 复选框。
    • 要让幻灯片自动循环播放,请选择自动播放 复选框。如果幻灯片数量少于每页幻灯片 数量设置,则无法循环播放。
  • 单击展开导航 部分,编辑导航选项:
    • 要显示箭头让游客手动切换幻灯片,请选择显示导航箭头 复选框。
    • 要在导航下方显示图片缩略图,请选择显示缩略图 复选框。
    • 要在图片下方显示点,以显示幻灯片总数并允许游客选择特定图片,请选择显示点导航。
  • 要最终完成更改,请单击 "应用更改"。

编辑图片库模块的样式

  • 导航至您的内容:

    • 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面
    • 博客:在 HubSpot 帐户中,导航到内容 > 博客
  • 将鼠标悬停在内容上,然后点击编辑
  • 在内容编辑器中,点击图片滑块模块。
  • 在侧边栏编辑器中,单击 "样式"选项卡。
  • 要设置图像边角的圆角显示,请单击幻灯片,然后单击展开图像 部分。在边角半径 字段中输入像素值 。数值越大,边角越圆润。
    • 要在标题上方或下方添加边距,请单击展开 "背景 "部分,然后在 "上方 边距 "和 "下方边距 "字段中输入像素值。
    • 要为标题添加填充,请在 "填充 "字段中输入像素值 。要为每一侧添加单独的值,请单击 "单独编辑",然后在字段中输入像素值。
    • 要为标题添加背景颜色,请在颜色 部分的第一个字段中输入十六进制值 ,或单击颜色 选择器 并选择一种颜色。自定义颜色可在 "高级 "选项卡中添加。
    • 要设置背景色的透明度,请在 "颜色 "部分第二个字段中输入百分比值。透明度为 100% 的背景色将不透明,而透明度为 0% 的背景色将不可见。
    • 要编辑标题的字体,请单击展开文本部分,然后单击选择字体 下拉菜单并选择一种字体。
    • 要更改字体大小,请单击大小 下拉菜单并选择字体大小。
    • 要更改字体颜色,请单击颜色 选择器 并选择一种颜色。可在 "高级 "选项卡中添加自定义颜色。
    • 要更改字体大小,请单击bold 字体大小图标,选择粗体、斜体或下划线文本。要编辑图片标题的外观,请单击幻灯片,然后单击标题:
  • 编辑滑块箭头的外观
    • 单击导航。
    • 单击展开滑块箭头 部分。
    • 要设置左右图标的背景颜色,请在背景颜色 部分的第一个字段中输入十六进制值 ,或单击颜色选择器 并选择一种颜色。可在 "高级 "选项卡中添加自定义颜色。
    • 要设置背景颜色的透明度,请在 "背景颜色 "部分第二个字段中输入百分比值。透明度为 100% 时,背景色将不透明,而透明度为 0% 时,背景色将不可见。
    • 要替换左右箭头的图标,请单击左图标 和右图标 字段上方的替换 。在右侧面板中选择一个图标。
    • 要设置左右图标的颜色,请在图标 颜色部分的第一个字段中输入十六进制值 ,或单击颜色选择器 并选择一种颜色。可在 "高级 "选项卡中添加自定义颜色。
    • 要设置背景色的透明度,请在图标颜色 部分第二个字段中输入百分比值。透明度为 100% 时,背景色将不透明,而透明度为 0% 时,背景色将不可见。
  • 更改图像和自动播放按钮下方圆点的外观:
    • 单击导航。
    • 单击展开点和自动播放按钮部分。
    • 在 颜色 部分的第一个字段中输入十六进制值 ,或单击颜色 选择器 并选择颜色。可在 "高级 "选项卡中添加自定义颜色。
  • 更改缩略图导航的外观:
    • 单击导航。
    • 单击展开缩略图导航 部分。
    • 要设置左右箭头图标的背景颜色,请在箭头背景颜色 部分的第一个字段中输入十六进制值 ,或单击颜色选择器 并选择一种颜色。自定义颜色可在 "高级 "选项卡中添加。
    • 要设置背景色的透明度,请在箭头背景色 部分的第二个字段中输入百分比值。透明度为 100% 时不透明,透明度为 0% 时不可见。
    • 要替换左右箭头使用的图标,请单击箭头左图标 和箭头右图标 字段上方的替换 。在右侧面板中,选择一个图标。
    • 要设置左右箭头图标的颜色,请在箭头图标填充 颜色部分的第一个字段中输入十六进制值 ,或单击颜色选择器 并选择一种颜色。自定义颜色可在 "高级 "选项卡中添加。
    • 要设置箭头的透明度,请在图标颜色 部分第二个字段中输入百分比值。透明度为 100% 时,箭头不透明,透明度为 0% 时,箭头不可见。
    • 单击展开缩略图 部分。
    • 要设置所有缩略图使用的纵横比,请单击纵横比 下拉菜单并选择一个纵横比。
    • 要设置所有缩略图使用的宽度,请在宽度 字段中输入像素值 。
    • 要设置缩略图边角的圆角程度,请在 半径 字段中输入像素值 。数值越大,边角越圆滑。

  • 编辑滑块间距:
    • 单击滑块。
    • 单击展开 "间距 "部分。
    • 要在滑块上方和下方添加边距,请在 "上方 边距 "和 "下方边距 "字段中输入像素值 。
    • 要为滑块添加衬垫,请在 "衬垫 "字段中输入像素值 。要为每一侧添加单独的值,请单击单独编辑,然后在字段中输入像素值。
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助