如何使元素具有粘性？

为什么要让元素具有粘性？

粘性元素可以通过以下方式增强用户体验 当用户滚动页面时，保持重要内容可见. 

例如，在设计软文时，你可能希望有一个 CTA 框或关键信息来 在用户滚动时保持可见，确保它始终可访问。

查看页面右侧的粘性 CTA 框设计，当主要内容在左侧滚动时，该框保持固定：

这种方法可确保读者能够不受干扰地参与重要的 CTA，从而提高转化率和整体用户互动。

在 GemPages 中，添加粘性元素非常简单，不需要任何编码知识。

如何在 GemPages 中设置元素粘性

第 1 步：选择您的元素

选择您希望在滚动时保持可见的元素。这可以是按钮、横幅等。

第 2 步：访问高级职位设置

• 在 GemPages 编辑器左侧边栏，点击 个人设置.
• 导航到 先进的 标签。

步骤 3：将位置设置为粘性

• 为您的 职务 高级设置下的选项
• 将位置从默认更改为 黏。此更改使元素在用户滚动时“粘”在其相对于视口的位置。

粘性元素的常见使用案例

根据页面布局和转化目标，您可以将固定定位应用于不同的元素。以下是商家在 GemPages 中使用固定元素的一些常见方法，以便在访客滚动页面时保持重要内容可见。

如何创建粘性 CTA 按钮

如果您希望用户滚动页面时行动号召按钮始终可见，可以使用以下方法使按钮元素保持粘性： 职务 设置。

按着这些次序：

第三步： 点击 按钮元素 你想让它变得粘稠。

第三步： 去 先进的 左侧边栏中的选项卡。

第三步： 向下滚动到 职务 部分。

第三步： 设置 职务 选项 黏.

启用后，CTA 按钮将在访客滚动浏览页面时保持可见，方便他们随时采取行动。

如何在移动设备上添加固定 CTA

在 GemPages 中，当您将按钮设置为 黏 在桌面端，它在移动端也会保持固定显示。这是因为 GemPages 使用 响应设计这意味着位置设置默认应用于所有设备。

但是，如果您希望 CTA 按钮保持粘性 仅限移动设备您可以创建一个单独的移动版按钮，并仅对该版本应用粘性定位。

按着这些次序：

第三步： 复制你想设置为仅在移动设备上固定显示的按钮。

第三步： 点击 原按钮然后更新其 显示设置 显示在 仅限台式机 并把它藏起来 电话.

第三步： 点击 重复按钮然后更新其 显示设置 显示在 电话 （如果需要，可以将其隐藏在桌面上）。

第三步： 选中复制的按钮后，转到 先进的 标签页。滚动到 职务 部分。设置 职务 选项 黏.

完成后，粘性行为将仅适用于按钮的移动版本，而桌面版本保持不变。

如何创建置顶产品描述

粘性产品描述通常用于产品页面，以便在客户滚动浏览产品图片或长描述时，保持重要信息（例如产品详情、价格或添加到购物车按钮）可见。

按着这些次序：

第三步： 点击 产品描述要素.

第三步： 去 先进的 左侧边栏中的选项卡。

第三步： 向下滚动到 职务 部分。

第三步： 设置 职务 选项 黏.