粘性返回顶部元素

什么是“粘性返回顶部”？

此 返回顶部 元素是一个浮动按钮，旨在提升您网站的导航体验。当访问者向下滚动到页面底部时，此按钮允许他们 至 返回顶部 只需单击一下即可.

此元素对于内容丰富的长页面特别有用，因为它有助于减少用户的努力并提高整体参与度。

如何添加粘性返回顶部元素？

按照以下步骤，使用 GemPages Editor v7 将“返回顶部”固定元素拖放到页面中：

• 登录到您的 Shopify 管理员 > GemPages 构建器 应用> 前往.
• 点击要添加置顶元素的页面进入编辑器。
• 从左侧边栏搜索此元素，然后将其拖放到页面上的所需位置。

• 找到该元素以打开其设置进行进一步的自定义。

配置“设置”选项卡

在下面 个人设置 选项卡中，您可以根据需要配置图标的可见性：

尺寸

宽度 以及 高度：定义按钮的尺寸以确保其显眼但不突兀。

填充：调整按钮内的内部间距，以便更好地对齐文本或图标。

举个例子，我们设置宽度 = 100%（全屏），高度 = 自动。粘性返回顶部按钮将全屏显示。 

背景

设置纯色/渐变色或图像作为背景。

• 颜色： 输入颜色代码，从“最近的颜色”/“为您建议”列表中选择，或使用颜色选择器设置背景颜色。

• 图片： 上传新图像或从库中选择一张图片设置为背景。

形状

使用以下方法自定义形状：

• 边界： 选择边框样式（线条/虚线/点划线），并更改边框颜色和粗细以符合您的品牌设计。

• 角： 调整角半径以获得更好的可见性。

• 阴影： 应用阴影效果来增加深度。

图标

切换图标可见性。您可以将其关闭以仅显示文本。

如果开启:

• 选择图标：从库中选择一个与您网站主题相匹配的图标或上传自定义图标（仅限 SVG 文件）。
• 职务：决定按钮是否出现在 左 or 右 屏幕的一侧。
• 间距：调整按钮与屏幕边缘之间的距离，以实现精确放置。

文本

如果在按钮中包含文本，则可以设置其样式以适合您的品牌：

• 样式：从标题样式中选择突出的样式。
• 字体：选择与您的商店字体相匹配的字体系列。
• 尺寸：调整文本大小以提高可见度。
• 粗体/斜体/下划线：强调这些文本样式。
• 字体粗细：控制文字的粗细。
• 线高：微调多行文本的行距。
• 字母间距：调整各个字符之间的间距以提高可读性。
• 改造：将文本格式化为 大写, 小写 或 利用 每个字。

影响

自定义悬停状态下按钮的外观：

• 背景颜色：为每种状态选择不同的颜色以改善视觉反馈。
• 图片： 当鼠标悬停在按钮上时，按钮的背景会变为图像。
• 文字颜色：设置与背景相辅相成的可读文本颜色。
• 边境：定义按钮的边框宽度、样式和颜色。
• 角落：调整按钮角的圆度以获得现代或古典的外观。
• 阴影：添加阴影效果以创建深度并使按钮脱颖而出。

链接

由于这是一个返回顶部按钮，因此点击后操作设置为 滚动到 置顶 默认情况下。因此，您可以忽略此 链接 部分。

对齐

如果按钮的宽度 = 适合内容（自动），请选择按钮的对齐方式：

• 左：将按钮与左边缘对齐。
• 中心：将按钮置于按钮的中心。
• 右：将按钮与右边缘对齐。

配置高级选项卡

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