VizupCommerce

如何自定义滑块小组件?

如何更改滑块的外观

步骤 1:点击”自定义设计”按钮

宽度和高度

您可以通过宽度和高度设置来设定视频或小组件的宽度和高度。这有助于确保一切都能完美融入您的设计中。

对齐标记内容

您可以选择内容在布局中的位置。您可以将其对齐到中心或左侧。这有助于您决定整体外观效果。

居中对齐示例

Center Alignment - Output
此图展示了内容居中对齐时的效果。

左对齐示例

Left Alignment - Output
此图展示了内容左对齐时的效果。

移除视频卡片阴影

“移除视频卡片阴影”切换开关允许用户控制视频卡片上阴影效果的可见性。此选项以切换开关的形式呈现,有两种状态:“是”和”否”。

  • :切换为”是”时,视频卡片上的阴影效果将被隐藏,呈现出简洁现代的外观。

  • :切换为”否”时,阴影效果将正常显示,为视频卡片提供深度和对比度。

自动循环滑块

“自动循环滑块”设置允许您开启或关闭自动播放的滑块。开启后,滑块将持续循环展示图片或视频,无需手动干预。此功能非常适合无缝高效地展示一系列图片或视频。

视频卡片预览

“视频卡片预览”设置允许您选择视频卡片的显示方式。您有三个超酷的选项可以选择!

选项:

  1. 循环播放视频

    • 如果选择此项,视频一旦可见就会不断循环播放。这非常适合确保每个人都能看到!
  2. 悬停时播放

    • 如果选择此选项,只有当您将鼠标移到视频卡片上时,视频才会播放。这很有趣,因为您只需悬停就能看到预览!
  3. 显示图片

    • 此选项显示静态图片而不是播放视频。图片充当视频的封面。如果您想节省资源或只想要简洁的外观,这是个不错的选择。
Show Image - Output

视频卡片上的”加入购物车”

“视频卡片上的加入购物车”设置允许您控制视频卡片上”加入购物车”按钮的可见性。此功能有助于简化客户的购买流程。

选项:

  • :启用后,“加入购物车”按钮将直接显示在视频卡片上,允许客户快速将商品加入购物车,无需额外导航。

    Add to Cart Button Enabled
  • :禁用后,“加入购物车”按钮将从视频卡片上隐藏,呈现更简洁、极简的外观。

    Add to Cart Button Disabled

标记产品设计

“标记产品设计”设置允许您选择标记产品在视频卡片中的显示方式。您有三个绝佳选项可以选择!

选项:

  1. 卡片

    • “卡片”设计以简洁的白色背景和垂直堆叠的布局展示产品图片、标题和价格。它支持可自定义的对齐方式(左或中),并支持点击交互,实现无缝的用户体验。
    white container - Output
  2. 叠加层

    • “叠加层”设计在视频卡片底部显示简洁的黑色渐变叠加层,展示产品图片、标题和价格。它支持点击交互,提供现代且引人入胜的用户体验。
    black gradient - Output
  3. 极简

    • “极简”设计以简洁、最小化的布局垂直对齐展示产品标题和价格。它使用浅色文字主题,并支持点击交互,便于用户参与。
    simple align - Output
← Back to All Tutorials