选框元素

什么是主视觉元素？

Marquee 元素 用于为包含其他元素的行创建类似水平滚动的效果。

以下是 Marquee 元素的一些主要特性，可能用于：

• 重点促销和特别优惠：电子商务网站可能使用 Marquee 元素来突出显示特别促销、折扣或限时优惠。滚动效果可以吸引人们对这些优惠的注意，使访问网站的用户更容易看到它们。
• 展示品牌合作伙伴关系： 电子商务网站可能使用 Marquee 元素来显示合作伙伴徽标的滚动列表。这可以展示相关品牌并提高网站的可信度，通过可识别的徽标与用户建立信任。
• 滚动客户评价： Marquee 元素还可用于显示滚动的客户评论。这种动态显示可以突出显示积极的反馈，通过展示满意的客户体验来增强网站的可信度。
• 显示行动号召：在某些情况下，电子商务网站可能使用 Marquee 元素来显示滚动的 CTA。这可以吸引用户注意“立即注册”或“了解更多”等重要操作，通过清晰可见的提示来促进参与并提高转化率。

如何在 GemPages v7 中添加跑马灯元素

第四步：去吧 GemPages 编辑器 V7 并在搜索栏中找到 Marquee 元素。

第四步：将元素拖放到所需区域。

请注意：

• 您可以在字幕中添加任何元素 除：标签、手风琴、联系表单、产品、英雄横幅、产品列表、文章列表和轮播。
• 避免放置超过 每页 20 个字幕 以防止性能问题。
• 在速度较慢的连接中，大图像加载完成后，字幕尺寸可能会进行调整。

配置“设置”选项卡

物品管理 

在商品管理部分，您可以：

• 重新排序项目：拖动以重新排列。
• 重复项目：克隆现有项目。
• 删除项目：删除不需要的项目。
• 添加项目：创建一个新的选取框项目。

项目间距

使用滑块调整项目之间的间隙（默认值：60px）。

物品样式

1.最大宽度： 字幕中单个项目的最大宽度 - 字幕中的所有项目将共享相同的最大宽度。

默认最大宽度值是“适合内容”，这意味着每个 Marquee 项目的宽度将自动适合其中的内容。

有 3 种宽度选项：

• 适合内容：项目的宽度 = 内部内容的宽度。
• 根据项目数量：项目宽度 = Marquee 宽度/项目数量。
• 自定义：设置固定最大宽度：用户可以手动输入他们想要的像素宽度值。

2. 背景： 应用背景颜色或图像。

3. 边框、角落、阴影： 自定义每个物品的形状和深度。

分隔器

在项目之间打开/关闭分隔符，以获得更好的视觉区分。

跑马灯效果

• 方向：设置滚动方向（左或右）。
• 悬停时停止：当用户悬停时暂停动画。
• 速度：调整滚动速度。

尺寸

• 宽度： 调整跑马灯的宽度。默认宽度值为 100%，这意味着跑马灯会自动调整大小以匹配屏幕宽度。
• 起升高度： 调整跑马灯的高度。默认高度值为“自动”，这意味着跑马灯会自动调整大小以匹配其内部内容。
• 填充： 调整每个项目边框到内容之间的间距。

背景

颜色： 为跑马灯应用背景颜色。

形状

配置边框、角落和阴影。

对齐

• 当宽度为 100% 时，对齐功能将被禁用。
• 否则，默认对齐方式为居中对齐。

配置高级选项卡

请参阅 本文 有关配置跑马灯元素“高级”选项卡的更多说明。

显示在

您可以决定 Marquee 元素将显示在哪些设备上： 桌面, 坚固型平板电脑和 电话。只需切换每个选项即可在特定设备上显示或隐藏元素。

间距（px）

调整 边 金益辉 填充 使用可视框模型围绕 Marquee 元素的值：

• 外部值 （上、右、下、左）控制 边 （元素外部的空间）
• 内在价值 控制 填充 （元素容器内的空间）
• 点击 链接图标 在中心同步/取消链接值。

形状

在“形状”部分，您可以：

• 为元素添加边框并从不同的样式（实线、虚线、点线）中进行选择。
• 自定义角半径：选择方形、圆形或药丸形角。
• 启用阴影以帮助元素从背景中脱颖而出。

职务

更改 Marquee 在其部分内或相对于其他元素的位置，包括：

• 静止
• 亲属
• 绝对
• 黏
• 固定

不透明度

调整元素的透明度级别：

• 100% = 完全可见
• 0% = 完全透明

使用滑块或输入框微调可见性。在分层元素或创建微妙的视觉效果时非常有用。

动画

启用此选项可为 Marquee 元素添加进入或悬停动画。启用后，您可以使用以下选项自定义动画行为：

• 当出现/悬停时： 选择当元素出现在屏幕上或当用户将鼠标悬停在元素上时是否触发动画
• 动画类型： 您可以从多种动画样式中进行选择：无、淡入淡出、滑动、缩放、摇动
• 速度： 使用滑块调整动画速度。向右移动滑块可加快动画播放速度
• 显示更多： 单击此按钮可访问其他动画效果（如果有）。
• 预习： 使用预览按钮直接在编辑器中测试动画的外观。
• 延迟： 设置动画开始前的延迟时间（以秒为单位）。如果你想在多个元素之间交错播放动画，这个功能非常有用。
• 宽松： 选择动画随时间如何进行，可用选项包括：缓入缓出、缓入缓出、线性
• 预习： 点击 预览 按钮即可在编辑器中立即测试动画。

过度使用会影响性能并分散用户的注意力。

互动

无需编码即可为 Marquee 元素创建自定义行为。点击 创建 打开交互设置面板。

您将设置：

• 触发： 选择互动开始的时间 – 点击元素 or 悬停元素。
• 行动： 选择页面上的目标元素并定义发生的事情，包括 更改文本样式, 更改内容, 显示/隐藏， or 滚动到.

CSS类

输入自定义 CSS 类名（以空格分隔），将您自己的样式规则应用于元素。如果您想在主题或 GemPages 全局样式中通过自定义 CSS 添加高级样式，这将非常有用。

关于 Marquee Element 的常见问题

1. 为什么我的跑马灯滚动速度在不同设备上不一致？

在某些网络环境下，加载大量图片的内容速度较慢时，可能会出现速度差异。所有图片加载完毕后，滚动效果就会稳定下来。为避免这种情况，请优化或压缩大图片。

2. Marquee 元素会降低页面加载速度吗？

是的，如果您添加过多项目或在同一页面上嵌套多个跑马灯效果，就会出现问题。我们建议每页使用的跑马灯元素少于 20 个，以保持性能和流畅的动画效果。

3. 为什么我的跑马灯加载后会改变大小？

当元素包含大尺寸图片，且这些图片在动画开始后才加载完毕时，就会出现这种情况。元素会在图片完全加载后重新计算自身大小。使用压缩图片或固定元素宽度可以最大限度地减少这种偏移。

4. 我能否让跑马灯在点击时暂停，而不是在悬停时暂停？

内置的“悬停时停止”选项仅在鼠标悬停时暂停。如果您需要点击时暂停的功能，可以通过交互功能来模拟，方法是切换显示/隐藏行为或切换到非动画版本。

5. 我可以在 GemPages v7 中创建垂直跑马灯吗？

目前，GemPages v7 中的跑马灯元素支持 仅水平滚动 （从左到右或从右到左）。垂直滚动字幕（从上到下或从下到上）是 原生不支持.

如果您想创建类似的视觉效果，请联系我们的支持团队以获取更多指导。

6. 如何给 Marquee 元素添加阴影？

• 点击编辑器中的选框元素。
• 去 个人设置 标签。
• 打开 形状 部分。
• 启用 阴影然后根据需要调整阴影类型、颜色、模糊程度、距离和大小。