如何通过 Elementor 使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的东西，它是他们探索网站的基础。

无论您有电子商务网站、个人网站、教育网站、社区论坛还是媒体网站，标题都可以使浏览变得简单且使用起来愉快。

粘性标题在网页设计师中越来越受欢迎，用于组织和构建网站以改进用户导航。

在本教程中，我们将向您展示如何使用 Elementor 制作粘性标题。

粘性标题允许用户查看页面的标题和菜单部分，无论他们向下滚动多远。

第 1 步：制作菜单
第 2 步：在 Elementor 中创建标头
步骤 3：使用 Elementor 制作标题模板
第 4 步：如何使 Elementor 标题具有粘性
第5步：定制我们的CSS
结论

立即以Holdersing价格购买 Elementor Pro

第 1 步：制作菜单

要向您的网站添加粘性标题，请转到wp-admin > 外观 > 菜单 并创建主菜单。在标题中，键入要显示的部分。

第 2 步：在 Elementor 中创建标头

完成主菜单的构建后，转到Elementor 模板 > 主题生成器选择主题构建器页面上的标题区域，然后单击“添加新标题”。

为标题模板命名，然后在弹出屏幕上创建模板

之后您将被带到 Elementor 编辑页面。您可以使用预制标题模板之一，也可以从头开始设计自己的标题模板。

在本教程中，我们将从头开始使用 Elementor 粘性标题。

在我们开始设计模板之前，您可以在 Elementor 编辑器中看到各种标题小部件。我们可以使用这些部分快速轻松地设计标题。

步骤 3：使用 Elementor 制作标题模板

创建两列布局。确保该部分的内容宽度设置为“盒装”。

在 Elementor 编辑部分的内容宽度设置中，将“编辑”列下的第一列宽度设置为 20%。

将您网站的网站徽标放在第一列中，并将其左对齐。

在第二列中添加导航菜单，然后选择您在步骤 1 中构建的主菜单。将导航菜单向右对齐。

在本教程中，我们将保持标题简单。您可以通过添加背景颜色、悬停动画效果、按钮和其他元素来使标题更加详细。

第 4 步：如何使 Elementor 标题具有粘性

现在我们已经创建了基本的 Elementor 标头，是时候将其转换为 Sticky 标头了。

为此，请转到编辑部分（整个标题部分）。从下拉菜单中选择高级 > 动态效果

立即以Holdersing价格购买 Elementor Pro

在运动效果下选择“粘到顶部选择要显示粘性标题的设备

在平板电脑大小的设备上，粘性标题几乎总是不受欢迎的，在移动屏幕上也几乎总是不受欢迎的。因此，单击粘滞下两个选项旁边的“x”，仅选择“桌面”。

当您对自己的作品感到满意时，点击“发布”；这将激活粘性标题，但此时它不会替换您当前的主题标题。

发布标头后，Elementor 会提示您为标头添加条件。您可以通过添加条件在网站上的任何位置显示标题。

我们希望此标头出现在整个网站上，省略 404 页面。因此，我们将整个网站包含在选择中，而忽略了 404 页面。

如您所见，使用 Elementor 创建个性化粘性标题非常简单且轻松！

使用自定义 CSS 让您的 Elementor 粘性标题看起来更好 Elementor 允许您通过添加 CSS 类来自定义粘性标题，使其更加时尚。

您可以在此处自定义粘性标题的高度、背景颜色、过渡和粘性效果。

返回编辑区域，使您的粘性标题更加时尚（整个标题部分）。从下拉菜单中选择高级 > 动态效果

将“效果偏移”设置为 100。当访问者使用您的网站时，这是发生滚动效果的滚动距离。

运动偏移设置为 100。

请记住，偏移效果选项仅在使用自定义 CSS 时才有效。因此，如果您不添加自己的任何自定义 CSS，则可以跳过最后一个选项。

在发布最终的粘性标头之前，您可以选择向最后一个粘性标头添加条件。一个示例amp您希望显示粘性标头的位置。例如amp您可以选择标准“整个站点”。

您现在需要在您的网站上包含一些自定义 CSS。自定义CSS非常灵活，如果您熟悉其操作，您可以添加任何您想要的内容。

立即以Holdersing价格购买 Elementor Pro

我们已经完成了清洁工作；我们现在转向网站的复杂性，包括添加自定义 CSS 代码。我们将演示获得 Elementor 免费粘性标题效果的基础知识和高级技术。如果您使用 Elementor 2.9 或更高版本，则可以使用全局样式规则将此 CSS 合并到您的网站中。

请按照下面概述的过程添加自定义 CSS：

要访问汉堡菜单，请在 Elementor 菜单的左上角找到它并选择它。
从“全局样式”部分下方的下拉菜单中选择“选择主题样式”。
从该部分的下拉菜单中选择“自定义 CSS”（颜色将从之前的遗传红色变为蓝色）。

之后，粘贴下面的 CSS 代码。

header.sticky-header { --header-height: 90px; --不透明度：0.90； --收缩我：0.80； --粘性背景颜色：#0e41e5； --transition: .3s 缓入缓出；过渡：背景颜色 var(--transition)、背景图像 var(--transition)、背景滤镜 var(--transition)、不透明度 var(--transition)； } header.sticky-header.elementor-sticky--effects { 背景颜色：var(--sticky-background-color) !important;背景图像：无！重要；不透明度：var(--opacity)！重要； -webkit-backdrop-filter：模糊（10px）；背景过滤器：模糊（10px）； } header.sticky-header > .elementor-container { 过渡：最小高度 var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important;高度： calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { 过渡：填充 var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important;顶部填充：10px！重要； } header.sticky-header > .elementor-container .logo img { 过渡：最大宽度 var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { 最大宽度： calc(100% * var(--shrink-me)); }

第5步：定制我们的CSS

上面列出的说明将指导您完成在 Elementor 中创建递减粘性标头的过程。如果您想了解有关如何进一步个性化标题的更多细节，您可以查看下面提供的 CSS 代码，这将使您在标题设计上更具创意。根据您的需要，您可以通过更改许多设置并增加或减少粘性来个性化 Elementor 粘性标题。我们建议您使用代码编辑器将此 CSS 更改直接合并到 Elementor 中。您可以使用 Visual Studio Code 或 Atom，它们将帮助您快速地将代码组合在一起并从中受益。这些编辑器可以免费使用，并且可以从各种系统访问，包括 Windows、Mac OS X 和 Linux。

本节将演示如何使用 CSS 样式表调整 Elementor 收缩标题的效果。如果您仅对自定义属性进行一项更改，它将立即更改以匹配 CSS 代码的其余部分。

递减标头的自定义选项总共有五种不同的方式可用。并非所有变量都必须自定义，但如果您愿意，您可以选择这样做。一旦您决定要修改哪些变量，您就只能修改这些变量，而其余参数保持不变。

立即以Holdersing价格购买 Elementor Pro

以下是五个 CSS 变量，每个变量的默认值显示为红色。

粘性背景颜色为#0e41e5，标题高度为90px。其他样式选项包括：不透明度 0.90、shrink-me 0.80、不透明度 0.90 以及缓入/缓出过渡 300 毫秒。

自定义属性是amp代码中出现在双破折号“-”之后的元素，您可以在amp代码的顶部找到它们。所需要做的就是调整句子中冒号之后和分号之前出现的值。

amp，如果您想将标题的高度增加到 100px，以下是更改高度之前和之后的外观：

之前，标题高度为 90 像素；之后，标题高度为 100 像素。

使用 Elementor，您可以通过多种不同的方式设计粘性标题菜单。您不仅可以构建免费的 Elementor 粘性标题，还可以通过添加自定义 CSS 来个性化标题。您可以获得有关如何使用 Elementor 构建粘性递减的 Elementor 标头的详细说明，并通过此分步指南调整 CSS。

Elementor 包含多种标题模板；每一个都独特而优雅，可以帮助您的观众浏览您的网站。

使用 Elementor，您可以完全控制网站标题的样式。amp，您可以将站点徽标放置在页面中央，将主菜单放置在其下方。您可以在主标题上方添加标题来显示电话号码、社交媒体链接和其他信息。

以下只是 Elementor 用户可用的众多标头设计选项的几个amp。