有时候，在移动设备上看起来很棒的设计，在桌面设备上可能效果不佳。例如，您可能想要应用…… 移动设备上的渐变背景 为了创造更强的视觉冲击力，同时保持 桌面和平板电脑的简洁背景.
在 GemPages 中，您可以通过复制一个部分或元素并进行控制来实现这一点。 设备可见性设置本指南解释了如何应用 GemPages 移动端仅支持渐变背景 同时保留原有设计，以适应更大的屏幕。
什么是渐变背景？
A 渐变背景 渐变是一种背景样式，其中两种或多种颜色平滑地融合在一起。与单一的纯色不同，渐变可以在颜色之间创建过渡效果。
渐变背景通常用于：
- 创建更具视觉吸引力的版块
- 突出显示重要内容，例如横幅广告或促销活动
- 提高小屏幕上的视觉对比度
何时使用仅限移动设备显示的渐变背景：
在许多设计场景中，仅在移动端应用渐变效果可以改善用户体验。
例如：
- 制作 移动端英雄区域更具视觉吸引力
- 改善 小屏幕上的文本可读性
- 创造 移动优先的促销板块
- 匹配 针对移动用户优化的营销活动设计
由于移动屏幕较小，渐变效果可以帮助吸引注意力并改善视觉层次感，而不会使布局过于拥挤。
如何在移动设备上应用渐变背景
按照以下步骤显示渐变背景 仅在移动设备上 同时保持桌面和平板电脑上的原始背景。
步骤 1：复制部分或元素
首先，找到 部分或元素 你想在何处应用渐变背景。
然后复制该部分或元素。
复制完成后，您将得到两个版本：
- 此 原始版本 （适用于台式机和平板电脑）
- 此 重复版本 （适用于移动设备）
两个版本乍一看完全一样。
步骤 2：添加渐变背景
接下来，将复制的版本配置为使用渐变背景。
- 点击 重复的部分或元素.
- 打开 个人设置 面板。
- 导航 背景.
- 从我们的数据库中通过 UL Prospector 平台选择 颜色 → 渐变.
- 根据您的设计喜好调整渐变颜色和方向。
有关如何使用渐变背景的更详细指南，请参阅这篇文章： 添加渐变背景.
至此，您已拥有：
- 其中一个版本 原始背景
- 其中一个版本 渐变背景
步骤 3：配置设备可见性
现在你需要控制 每个设备上显示的是哪个版本.
原始部分（桌面+平板电脑）
点击 原文然后配置其 显示设置 所以它只出现在较大的屏幕上。
启用以下内容的可见性：
- 桌面
- 坚固型平板电脑
禁用以下可见性：
- 电话
重复部分（仅限移动设备）
接下来，选择 重复部分 带有渐变背景。
将其显示设置设为：
启用以下内容的可见性：
- 电话
禁用以下可见性：
- 桌面
- 坚固型平板电脑
这样可以确保渐变版本只在移动设备上显示。
步骤 4：保存并发布页面
配置完成后：
- 点击 已保存.
- 发布或更新您的页面。
您的页面现在将显示：
- 此 原始背景 在台式机和平板电脑上
- 此 渐变背景 仅限移动设备
您还可以使用此方法应用其他设计自定义功能。
这种针对特定设备的复制方法也可用于其他设计调整，例如：
- 使用不同的背景图片来区分手机
- 调整间距和布局结构
- 显示简化的移动部分
- 创建移动端专属的营销活动设计
重要注意事项
这种方法的原理是 重复部分或元素这会增加页面上的元素数量。 因此，我们建议使用此方法。 只有在必要时过多的重复内容会使页面更难维护和管理。 尽可能尝试使用 响应式设置 首先，在创建重复部分之前。
谢谢您的意见