面包屑元素

GemPages 中的 Breadcrumb 元素是什么？

A 面包屑 是一种导航元素，可帮助用户了解他们在网站或应用程序中的当前位置。它通常显示为网页或界面顶部的可点击链接轨迹，显示用户在到达当前页面之前浏览过的页面或部分的层次结构。

在工作时 子类别页面 在 Shopify 中（例如，“鞋履”下的“男鞋”），面包屑导航变得更加重要。它们允许客户快速跳转回父级产品系列或在同级子类别之间导航，而无需手动浏览菜单。

使用面包屑导航子类别页面还可以帮助搜索引擎更好地了解网站结构，通过清楚地表明主类别与其子类别之间的关系可以改善 SEO。

如何添加和配置Breadcrumb元素？

我们将在 GemPages 编辑器版本 7 在下面的部分。

第三步： 在MyCAD中点击 软件更新 GemPages 仪表板 > 优先 > 商店设置。 在下面 其他设置 部分，打开“将集合句柄包含在从集合访问的产品的 URL 路径中。“

第三步： 回去 这个 前往 部分并找到您的目标页面以打开编辑器。 

第三步： 从左侧边栏输入 面包屑 在搜索栏中，然后将元素拖放到页面顶部。

配置“设置”选项卡

此 个人设置 面包屑元素的选项卡可帮助您微调导航轨迹的外观、布局和交互行为。

分隔符图标

自定义面包屑项目之间的分隔符（例如， /, >, →):

• 图标：选择图标或字符。您也可以上传自己的 .SVG 图标。
• 颜色：通过 HEX 或颜色选择器选择图标颜色。
• 尺寸：使用 +/– 按钮调整图标大小。

文字样式

使用完整的排版控件来设置面包屑文本的样式：

项目间距、大小和背景

差距： 通过拖动滑块或手动输入特定值来调整面包屑项目之间的水平间距。

填充：调整面包屑容器的内部间距（顶部、右侧、底部、左侧）以创建呼吸空间或使元素与布局对齐。

背景颜色：使用颜色选择器或输入十六进制代码设置面包屑栏的背景颜色，以进行精确控制。

形状

您可以为面包屑容器赋予独特的外观：

• 边界： 设置颜色、粗细和描边样式。
• 角： 将边框半径定义为圆角（例如 8px）。
• 阴影： 添加微妙或大胆的阴影，然后修改类型、方向、颜色、距离、模糊和大小。

影响

• 徘徊： 当用户与面包屑链接交互时启用悬停样式。
• 活性： 以不同于其他的方式突出显示当前（活动）面包屑项目。

显示选项

隐藏活动页面:

• 是：隐藏当前页面（最后一个面包屑项目，例如 Happy Dog Snack）。
• 没有：显示完整的面包屑路径。

对齐

此参数允许您确定元素在页面上的定位方式。您有三个选项：左对齐、居中和右对齐。

配置高级选项卡

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

您还可以在以下网址找到更多有用的提示和视频教程： GemPages 学院.

常见问题

1. 面包屑如何帮助子类别页面？

面包屑导航清晰地展现了从主类别到子类别的层级结构，提升了用户导航和 SEO 体验。这有助于用户准确了解当前位置，并轻松地在不同板块之间切换。

2. 我可以为子类别页面定制不同的面包屑导航吗？

是的。您可以为子类别页面上的面包屑导航应用不同的样式、分隔符或背景颜色，以使其脱颖而出。

3. 如果我的子类别页面没有显示在面包屑中，会发生什么情况？

如果产品 URL 不包含产品系列/子类别名称，则可能会发生这种情况。请确保 Shopify 设置“在 URL 路径中包含产品系列名称”已启用。

4.面包屑导航能改善子类别页面的 SEO 吗？

是的。它们帮助搜索引擎了解主类别和子类别之间的关系，从而改善索引和内部链接结构。