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

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

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

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

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

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

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

立即获取 Elementor Pro（Holdersing价格）

第 1 步：制作菜单

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

第 2 步：在 Elementor 中创建标头

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

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

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

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

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

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

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

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

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

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

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

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

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

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

立即获取 Elementor Pro（Holdersing价格）

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

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

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

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

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

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

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

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

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

在这种情况下，将“效果偏移 当访问者使用您的网站时，这是发生滚动效果的滚动距离。

运动偏移设置为 100。

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

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

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

立即获取 Elementor Pro（Holdersing价格）

我们已经完成了清洁工作；我们现在转向网站的复杂性，包括添加自定义 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 代码的其余部分。

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

立即获取 Elementor Pro（Holdersing价格）

以下是五个 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。