旋转木马元素

关于轮播元素

此 轮播元素 指特定功能或小部件，允许用户在其网站上创建和显示产品、图片或促销内容的轮播。以下是轮播元素的几个主要功能和优点：

• 产品展示柜：电商轮播通常展示商店库存中的产品。每张幻灯片可以显示不同的产品，包括其标题、图片、价格，以及简短的描述。
• 促销横幅：轮播元素还可以显示销售、折扣或新品的促销横幅或广告。
• 可定制的布局：用户通常可以自定义轮播的布局，调整每张幻灯片可见项目的数量、幻灯片之间的过渡效果以及整体样式等方面以符合其品牌的审美。
• 导航控件：这通常包括箭头或点等导航控件，以允许用户手动浏览轮播幻灯片。
• 响应式设计：与现代网页设计中的其他元素一样，电子商务页面构建器中的轮播元素也设计为响应式，确保它们能够在各种设备和屏幕尺寸上正确显示。

在 GemPages v7 中添加轮播元素

第四步： 在里面 GemPages 仪表板，选择要添加轮播元素的页面。 

第四步：搜索 旋转木马元素， 选择所需的类型，然后将其拖到页面上的首选位置。

第四步：D拖放任何 GemPages 元素（文本、图像、按钮、产品等）以自由构建您的布局。

要访问 Carousel 的设置面板，只需单击该元素即可。

左侧边栏将显示 个人设置 以及 先进的 标签，允许您自定义其行为和外观。

配置设置选项卡

每张幻灯片的项目数

此设置控制每张轮播幻灯片中显示的项目数量。您可以从预设的布局选项中选择，也可以设置自定义数量以满足您的设计需求。

• 预设布局： 使用可用的网格选项，每张幻灯片快速选择 1 到 5 个项目。
• 自定义值： 如果你想显示 超过5个项目，点击 ⚙️ 设置图标 并输入您想要的确切数字。这对于在一个视图中展示多个商品的产品轮播尤其有用。

展示

此部分可让您调整每个轮播幻灯片中项目的显示方式，以实现设计的理想布局和间距。

• 最大件数： 定义轮播中可显示的最大商品数量。您最多可以显示 12 项 每张幻灯片。
• 间距： 控制每个项目之间的间隙。增加间距可使布局更加通透，而减少间距则有助于在更紧凑的设计中容纳更多内容。
• 抢先看： 启用此选项可显示下一张或上一张幻灯片的一小部分内容。此视觉提示有助于表明您的轮播包含更多可供用户探索的内容。

物品管理

此部分允许您管理轮播中的项目，包括添加/删除幻灯片以及根据您的喜好重新排列其顺序：

• 当您将鼠标悬停在某个项目上时，您可以 重命名, 复制 该物品，或 删除 它。

• 要添加更多项目，请点击“+ 添加项目” 按钮。

项目间距

您可以调整轮播图中项目之间的间距（间隙）。默认情况下，间隙设置为 16 PX.

物品样式

此部分允许您自定义轮播中每个项目（或幻灯片）的方式。

这些设置可帮助您保持视觉一致性并提高轮播的整体吸引力。

• 填充： 调整每个轮播项的内部间距。您可以为顶部、底部、左侧和右侧设置不同的值，以确保内容不会接触到项的边缘。

• 背景： 定义轮播中每个商品的背景。您可以：
  • 选择 纯色 （使用颜色选择器或输入十六进制代码）。
  • 上传一个 图片背景 如果您希望每件物品都有独特的视觉设计。
• 边界： 为轮播项目添加或自定义边框。您可以修改边框宽度、颜色和样式（实线、虚线等），以匹配您的品牌风格。
• 角落：将每个轮播项目的角设为圆角，以创建更柔和的外观。该值（以像素为单位）决定了角的弯曲程度。
• 阴影：为轮播项目添加阴影，使其从背景中脱颖而出。调整阴影大小、模糊度、颜色和不透明度，以获得所需的深度效果。

导航

在本节中，您可以自定义用户使用导航箭头在轮播中移动的方式。

职务：选择将导航按钮放置在轮播区域内还是外。

导航图标：选择导航按钮的图标样式，包括：

• 图标：默认选项是箭头，但您可以将其更改为更适合您的设计的其他图标。
• 图标大小：使用加号或减号按钮调整图标大小，或输入精确值以进行精确控制。
• 图标颜色：为导航图标选择一种颜色，以确保它们在轮播背景中脱颖而出。

导航按钮： 修改导航按钮（左箭头和右箭头）以匹配您的页面样式并增强可见性。

• 按钮大小：点击“编辑”展开完整设置，并调整导航按钮的宽度和高度。增加按钮大小可以增强移动设备上的可访问性。
• 背景：为按钮添加背景颜色，以便与轮播内容形成更好的对比。
• 边框：添加边框，使按钮更加醒目。您可以自定义其样式、宽度和颜色。
• 角落：将导航按钮的角弄圆，以获得更柔和或药丸状的风格。
• 边缘间隙：控制导航按钮与轮播边缘之间的距离。
• 悬停时显示：选择导航按钮是否始终可见（否）或仅当客户将鼠标悬停在轮播上时显示（是）。

点

此 点 部分允许您自定义轮播底部显示的导航点，帮助访问者识别他们当前正在查看哪张幻灯片。

• 职务：选择圆点相对于轮播的位置。您可以将它们放置在 内 or 学校以外 幻灯片，取决于您的设计布局。
• 活动颜色：选择代表 当前（可见） 滑动。
• 非活动颜色：为代表的点选择不同的颜色 隐 幻灯片。
• 点大小：使用加号/减号按钮调整点的大小或输入精确的像素精度值。
• 边缘间隙：定义点与轮播边缘之间的间距。增加此值有助于提高可见性或平衡不同屏幕尺寸之间的间距。

互动

自定义轮播元素中的交互：

• 自动播放：激活此开关可自动前进幻灯片。为获得最佳功能，请将自动播放与循环功能结合使用。同时启用这两个功能后，幻灯片将自动前进并循环回到第一张幻灯片。
• 延迟： 设置切换幻灯片之前的持续时间（以毫秒为单位）。
• 悬停时暂停： 当用户将鼠标悬停在轮播上时停止自动播放。
• 滑动方向： 选择向左或向右滑动。
• 无限循环：激活此开关可允许轮播在到达最后一张幻灯片后从头开始重复。 
• 拖动/滑动： 启用此选项可允许客户使用鼠标滑动到下一张图片。 
• 滑动速度：编辑轮播幻灯片的速度
• 动画：选择动画效果，例如缓入、缓出、缓入缓出。在轮播元素中应用动画效果时，您可以预览动画效果。

尺寸 

根据您的喜好自定义轮播元素的宽度和高度。您可以按照以下步骤设置全宽轮播：

• 米 宽度 至 100% or 全宽。
• 在MyCAD中点击 软件更新 设置 > 对齐 并选择 中心 or Stretch.

确保轮播容器部分或行在布局结构中也设置为全宽。

背景

自定义轮播的整体背景，以匹配您商店的设计。您可以 选择纯色/渐变色 or 上传图片 用作旋转木马的背景。

有关自定义背景的更多详细信息，请参阅 本文.

形状 

在本节中，您可以通过自定义轮播来微调轮播的整体外观 边界, 拐角半径和 阴影效果。这些设置可帮助您的轮播无缝融入商店的布局或脱颖而出成为突出显示的部分。

• 边境：添加或修改轮播周围的边框。您可以定义其 厚度, 样式 （实线、虚线、点线）和 颜色 以符合您的品牌风格。
• 角落：调整 拐角半径 使轮播的边缘变圆或变尖。例如，值越大，效果越柔和，更具现代感。
• 阴影: 应用一个 阴影 让轮播更具深度感，并与页面背景形成视觉分离。您可以调整阴影的 抵消, 模糊和 颜色 以获得微妙或戏剧性的效果。

请参阅 本文 有关使用边框、角落和阴影设置修改形状的完整指导。

对齐

在此部分中，您可以从三个选项中进行选择： 左对齐, 中心 或 右对齐.

配置高级选项卡

如需更多高级自定义，请导航至“高级”选项卡并按照 Free Introduction 刊文.

轮播图元素是一款功能强大的工具，可为您的 Shopify 商店添加动态、交互式视觉效果。借助 GemPages v7，您可以完全控制每个商品的样式、动画和布局，轻松打造引人注目的产品展示或品牌故事，吸引所有设备上的访客。

例如，要添加一个 过渡效应 在你的旋转木马上 高级设置 轮播元素的默认值可以切换。 滑 过渡到一个 淡化效果 为了获得更流畅、更优雅的视觉效果。

要应用它，请前往 先进的 标签，找到 动画 部分，然后选择 褪色 从过渡类型下拉菜单中选择。

淡入淡出效果与 自动播放 以及 循环使每张幻灯片都能自动淡入淡出。

关于旋转木马元素的常见问题

1. 为什么我的轮播没有全宽显示？

要在您的页面上显示全宽轮播，请尝试以下操作：

• 检查一下 宽度 被设置为 100% 设置 > 尺寸.
• 确保轮播放置在 也跨越整个宽度.
• 米 对齐 = 居中或拉伸 in 设置 > 对齐.
• 避免将轮播放置在狭窄的列或嵌套部分内。

2. 为什么我的轮播不能自动播放？

要设置轮播自动播放，请按照以下步骤操作：

• 在MyCAD中点击 软件更新 设置 > 交互 并确保 自动播放 开启。
• 为了保持循环，还启用 无限循环.

3. 我可以在轮播中动态显示产品吗？

在 GemPages 中，轮播功能不会像产品列表元素那样自动从 Shopify 拉取产品数据。因此，你需要 手动拖动产品模块 进入旋转木马进行自定义控制。

4. 为什么图像看起来被切断或错位？

如果您的图片在轮播中看起来被切断了：

• 访问 图像比例, 填充 或 滑动宽度 设置。
• 绝大部分储备使用 适合图像 而不是 填充图像 如果保持纵横比是优先事项。

5. GemPages Carousel 是否支持淡入淡出过渡效果？

是的。 在 GemPages v7 中，轮播元素包含一个 淡化效果 下 高级设置 > 动画。 启用 自动播放 以及 无限循环 用于幻灯片之间的连续淡入淡出过渡效果。

6. 如何更改轮播图的滑动时间？

在MyCAD中点击 软件更新 设置 > 交互.

• 调整 延迟 控制每张幻灯片的显示时间。
• 调整 滑动速度 控制幻灯片切换的速度。

7. 我可以将元素拖放到轮播图中吗？