你想知道如何在你的 WordPress 网站上创建一个粘性标题吗？ 粘性标题使用户可以轻松访问您网站的导航，即使他们向下滚动页面也是如此。 通过消除不必要的滚动，您可以增强网站的用户体验 (UX)。

在这篇文章中，我们将向您介绍粘性标头。 然后，我们将向您展示如何通过四个简单步骤使用 Beaver Themer 创建一个。 让我们开始吧！

什么是粘性标头？

在我们深入了解粘性标题之前，让我们先看看传统的非粘性标题：

在上面的例子中，网站的标题有一个简洁的导航菜单，带有指向其他页面的链接。 从左到右，它们是：首页、新闻、日程、关于和联系我们。

这是一个简单而有效的标题，甚至在最左侧还有一个引人注目的徽标。 但是，当您向下滚动屏幕时，标题会完全消失。

这意味着用户必须一直向上滚动页面才能再次访问菜单。 这种布局会产生负面的用户体验，尤其是当您的网站包含大量内容时。

输入：粘性标题。 当用户在网页上向下（或向上）滚动时，“粘性”标题（也称为持久或固定标题）不会移动。 顾名思义，它“固定”在屏幕上的永久位置，通常在顶部：

您通常会发现粘性标头尤其在电子商务商店中非常受欢迎。 这是因为在线商店通常会在其主页上宣传多个热门类别或产品。

对于电子商务站点，滚动可以模拟在实体店中四处走动和浏览。 继续这个比喻，粘性标题允许您立即返回到特定位置（或找到新位置），而无需折回您的步骤。

粘性标题几乎可以使任何类型的大型网站受益，从非营利组织到教育机构。 较小的企业甚至可能希望在其移动网站上实施粘性标头。 总体而言，粘性标头可以显着增强您网站的用户体验。

如何使用 Beaver Themer 创建粘性页眉（简单 4 步）

现在您对粘性标头及其优势有了更多的了解，让我们探讨如何制作粘性标头。 对于本教程，我们将使用我们的 Beaver Builder 插件和 Beaver Themer 附加组件创建一个粘性标头。 请记住，您需要我们的高级页面构建器计划之一才能使用此功能。

第 1 步：设置标题元素

在我们在 Beaver Themer 中配置我们的粘性标题之前，我们将从创建一个菜单开始。

要添加菜单，只需导航到您的 WordPress 仪表板并转到外观> 菜单：

为您的菜单命名并选择您希望其放置的位置。 在这种情况下，我们将使用Primary Menu ，因此它会出现在我们的标题中。 接下来，单击创建菜单：

现在您需要添加菜单项。 从左侧的页面面板中选择要包含在菜单中的页面。 我们将从我们的最新列表中添加所有四个页面：

做出选择后，点击添加到菜单。 添加页面后，您现在应该会在右侧看到它们：

此时，您可以继续拖放页面（或使用箭头）以按照您希望它们出现的顺序组织它们。 然后点击右下角的保存菜单。

请记住，您始终可以在 Beaver Builder 中自定义此菜单，然后再将其设为粘性。 例如，您可以实现自定义 CSS 以将菜单项转换为按钮。 完成任何自定义后，您可以继续下一步！

第 2 步：创建“标题”主题布局

到目前为止，我们只在标准的 WordPress 仪表板中工作，但从现在开始您将需要 Beaver Themer。 如果您不熟悉该工具，请不要担心！ 它易于访问且对初学者友好。 另外，我们将引导您完成整个过程。

尽管如此，如果您想在使用它之前进行一些练习，您可以随时查看我们的免费 Theme Builder 课程。 否则，前往Beaver Builder > Themer Layouts > Add New ：

在此屏幕上，您需要为新的 Themer 布局命名。 然后，确保在Type下选择Themer Layout并为Layout选择Header ：

之后，点击Add Themer Layout 。

请务必注意，如果您在Layout下拉列表中的任何选项旁边看到Unsupported ，这可能是因为您的主题与 Beaver Themer 或 Beaver Builder 不兼容。

为避免此问题，我们建议使用兼容的 WordPress 主题，例如我们自己的 Beaver Builder 主题，该主题专为与我们所有的 Beaver Builder 工具配合使用而设计。

第 3 步：使标题布局具有粘性

创建新的标题 Themer 布局后，您将自动进入一个屏幕，您可以在其中编辑其设置：

这是您可以使布局具有粘性的地方。 只需找到Themer Layout Settings面板。 然后，在Sticky旁边的下拉菜单中选择Yes ：

您还需要选择关键配置，例如布局的Sticky Breakpoint和Location 。 对于这个例子，我们将为所有屏幕尺寸实现我们的粘性标题，并让它出现在我们的整个网站上：

您甚至可以创建更高级的规则（或规则组）来规定您的粘性标头的行为方式。 当您在此处完成选择后，单击发布。

然后，您可以在前端预览您的站点以查看结果：

正如您在我们的示例中看到的，标题现在是粘性的！ 请记住，如果您对结果不完全满意，您可以随时返回并进一步编辑您的 Themer 布局。 否则，是时候自定义粘性标头的设置了。

第 4 步：自定义页眉布局设置

正如我们提到的，Beaver Themer 不仅可以让您的标题具有粘性，还可以让您使用高级粘性标题功能。 例如，您可以缩小粘性标头。

为此，只需返回到 Themer 布局设置屏幕，然后在Shrink旁边的下拉菜单中选择Yes 。 在这种情况下，您的粘性标头如下所示：

如您所见，我们的蓝色粘性标题根据滚动行为收缩和扩展。 此功能可以使您的网站看起来更专业，从而立即提升您的网站。 另外，这个缩小的标题将允许用户一次看到更多的屏幕。

或者，您可以返回到 Themer 布局设置并应用叠加效果。 这将为标题提供透明背景。 请记住单击右上角的更新以保存您的更改。

结论

粘性标头是改善网站用户体验的好方法，因为无论用户浏览页面的哪个部分，它们都可以让用户使用标头导航。

回顾一下，以下是如何通过四个步骤使用 Beaver Themer 创建粘性标头：

1. 设置标题元素。
2. 创建一个“标题”Themer 布局。
3. 使您的页眉布局具有粘性。
4. 自定义页眉布局设置。

相关问题

如何使用 Beaver Builder 主题制作粘性标题？

如果要在 Beaver Builder 主题中启用粘性标题，请转到 Customize > Header > Header layout 。 它使您可以对页眉和页脚进行高级控制。

还有哪些其他设计元素可以帮助改善我网站的导航？

如果您的网站有很多页面，您可以考虑将粘性标题菜单转换为大型菜单。 您可以使用 Beaver Builder Mega Menu 插件设置一个。 此外，向您的内容添加锚链接可以帮助访问者快速轻松地浏览您的页面。