按钮元素

此 按钮元素 是提示用户在您的网站上采取特定操作的交互元素。但是，如果您希望用户将商品添加到购物车，我们建议使用 购物车按钮元素 代替。

关于按钮元素

此 按钮元素 是一种交互元素，可提示用户在您的网站上采取特定操作，例如导航到另一个页面、打开弹出窗口或联系您。

如果您希望将商品添加到购物车，我们建议您使用 购物车按钮元素 代替。

将按钮元素添加到您的页面

第三步： Access GemPages 仪表板 > 前往，找到目标页面打开编辑器。

第三步： 在左侧边栏的搜索栏中输入“Button”来查找Button元素。 

您可以从两种按钮样式中进行选择，一种带有符号，一种不带有符号，然后将其拖放到所需位置。

选择元素后，您会在左侧边栏的 个人设置 以及 先进的 标签。

配置设置选项卡

此 个人设置 选项卡可让您完全控制按钮元素的外观、布局和行为，包括：

尺寸

使用灵活的宽度和高度选项控制按钮的整体尺寸：

宽度：选择按钮的水平缩放方式：

• 适合内容：按钮将根据其内容（文本和图标）的大小进行调整。
• Auto：根据父容器或其他样式继承大小。
• 完整（100%）：按钮将扩展以填充其容器的整个宽度。

高度：将高度设置为适合内容（自动）或固定像素值。

填充：定义按钮内部的间距。

背景

设置一个 纯色或渐变色背景 您的“添加到购物车”按钮。您可以通过以下方式调整颜色：

• 输入颜色代码
• 拖动或从颜色样本中选择
• 使用颜色选择器选择当前页面上的任意颜色
• 从中选择一个 最近的颜色  or 为您推荐 名单

如果你更喜欢一个 图片背景，上传新图像或从图库中选择一张作为元素的背景，然后配置图像：

• 规模： 覆盖、包含或自动
• 位置： 设置图像对齐方式（居中、左上等）
• 重复： 切换重复设置
• 附件： 选择滚动或固定
• 搜索引擎优化： 添加 Alt 文本和图像标题以实现可访问性和 SEO
• 预载： 切换预加载以改进最大内容绘制 (LCP)

形状

• 边境：您可以更改边框颜色、粗细和描边。
• 角落：部分角可以是方形、圆形或药丸形。此外，您还可以输入精确的半径来自定义元素的角。
• 阴影：添加阴影并调整其显示（大小、颜色、模糊度和距离）。

图标

启用此切换按钮可在按钮内显示图标：

• 图标：从内置图标中选择或上传自定义 .SVG 图标。
• 职务：将图标放置到 左 or 右 的文字。
• 间隙：使用滑块或数字输入调整图标和文本之间的间距。

文本

此部分允许您自定义按钮标签的字体和外观：

• 样式： 选择文本预设，例如第 1 段、标题或自定义文本样式。
• 字体： 从可用的字体系列（例如，Ui-sans-serif）中进行选择，以匹配您的商店品牌。
• 规格： 使用 +/– 控件调整文本大小。
• Formatting: 根据需要应用粗体、斜体或下划线样式。
• 颜色： 使用十六进制代码或颜色选择器设置字体颜色。
• 字体粗细： 从正常、中等、半粗、粗等中选择。
• 线高： 控制文本行之间的垂直空间（例如 160%）。
• 字母间距： 调整字母之间的间距（例如 0.6）。
• 转变： 选择文本的显示方式： 
  • AA：大写
  • Aa：每个单词大写
  • aa：小写
• 阴影： 应用文本阴影以增加对比度或视觉深度。

悬停效果

自定义按钮悬停时的反应：

• 背景：悬停时更改背景颜色。
• 图片：为悬停状态添加背景图像。
• 文字颜色：悬停时更改文本颜色。
• 边境：添加或自定义悬停时的边框样式（颜色、粗细、描边）。
• 角落：调整悬停时的角半径，使边缘更圆润或更方正。
• 阴影：应用阴影效果，使按钮在悬停时更具深度。

链接

通过启用 链接 切换。启用后，您可以定义用户点击按钮时发生的情况：

点击后：选择按钮触发的操作：

• 打开页面：将用户重定向到特定页面或 URL。
• 滚动至： 使用锚点 ID（例如 #features）平滑滚动到同一页面上的特定部分。
• 打开弹出窗口：触发使用 GemPages 构建的弹出窗口。
• 发送电​​子邮件：打开用户的电子邮件客户端，其中包含预先填写的收件人地址。
• 打电话：使用移动设备拨打电话 手机： 链接。

页面/链接：点击“+ 添加...= 按钮进行搜索或直接将 URL 粘贴到搜索栏中

• 从您现有的 Shopify 页面中选择 
• 使用下拉过滤器（例如“着陆页”）来缩小搜索结果
• 单击“查看”预览页面，然后确认

对齐

设置按钮在其容器内的水平对齐方式： 左, 中心 或 右.

配置高级选项卡

如需更多高级定制，请导航至 高级选项卡 并按照中的说明进行操作 本文.

常见问题

1. 如何更改按钮颜色？

去 设置选项卡 > 背景 > 颜色。使用颜色选择器或输入十六进制代码来更新按钮的背景颜色。

2. 为什么我的按钮颜色在悬停时不会改变？

访问 悬停效果 设置。确保悬停背景或文本颜色设置为与正常状态不同的值。

3. 我可以为按钮添加渐变色或背景图像而不是纯色吗？

是的。根据 设置选项卡 > 背景，您可以上传图片并调整比例、位置和重复选项。对于渐变，您可以在 高级选项卡.

4. 为什么我的按钮在实时页面上没有显示新颜色？

确保点击 发布 编辑后。如果问题仍然存在，请清除浏览器缓存或禁用冲突的自定义代码。

5. 如何将我的按钮连接到 Shopify 中的产品类别（集合）？

第三步： 添加 按钮元素 到您的产品页面（或您希望类别按钮出现的任何页面）。

第三步： 去 个人设置 标签> 链接 > 点击后，然后选择 打开页面.

第三步： 在 页面/链接 字段，可以是：

• 选择你想要的 收藏（类别） 从 Shopify 页面列表中，或
• 粘贴您想要重定向到的收藏链接。

第三步： 点击 已保存 以及 发布 你的改变。