如何在 Elementor 中使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的内容，它是他们浏览网站的基础。

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

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

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

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

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

第 1 步：制作菜单

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

第 2 步：在 Elementor 中创建标题

完成主菜单的构建后，转到Elementor Templates > Theme Builder 选择主题构建器页面上的 Header 区域，然后单击“ Add New Header ”。

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

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

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

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

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

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

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

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

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

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

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

现在我们已经创建了基本的 Elementor 标头，是时候将它变成一个 Sticky 标头了。

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

在运动效果下选择“ sticky to the Top devices ”，您希望在其中显示粘性标题。

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

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

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

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

如您所见，使用 Elementor 创建个性化的 Sticky 标题既简单又轻松！

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

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

返回编辑区域，让您的置顶标题更时尚（整个标题部分）。 从下拉菜单中选择高级 > 运动效果

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

将运动偏移设置为 100。

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

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

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

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

按照下面概述的步骤包含自定义 CSS：

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

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

header.sticky-header { --header-height: 90px; --不透明度：0.90； --收缩我：0.80； --sticky-background-color: #0e41e5; --transition: .3s 缓入缓出； 过渡：背景颜色变量(--transition)，背景图像变量(--transition)，背景过滤变量(--transition)，不透明度变量(--transition)； } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; 背景图像：无！重要； 不透明度：var（--opacity）！重要； -webkit-backdrop-filter: 模糊 (10px); 背景滤镜：模糊（10px）； } header.sticky-header > .elementor-container { transition: min-height 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 { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!important; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

第 5 步：自定义我们的 CSS

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

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

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

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

粘性背景颜色为 #0e41e5，标题高度为 90 像素。 其他样式选项包括：0.90 的不透明度、0.80 的收缩率、0.90 的不透明度和 300 毫秒的缓入/缓出过渡。

自定义属性是双破折号后出现的元素“ - ”在我们的前amp文件的代码，你可以找到他们在我们的S中的顶部列出amp乐代码。 所需要做的只是调整句子中出现在冒号之后和分号之前的值。

对于前amp文件，如果你想增加标题为100px的高度，这里怎么会前和更改后的高度看：

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

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

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

使用 Elementor，您可以完全控制网站标题的样式。 对于前amp嘞，你可以把网站的标志在页面的中心，它下面的主菜单。 您可以在主标题上方添加标题以显示电话号码、社交媒体链接和其他信息。

这里只是一些前amp莱提供给用户Elementor无数头的设计方案。

结论

在您的网站上包含粘性标题可以使访问者轻松浏览您的网站并增加对网站所有区域的点击次数。

Elementor 消除了使用 Javascript 和 CSS 手动生成粘性标题的需要，这在以前是必需的。 由于 Elementor 粘性标题，为您的网站创建粘性标题从未像现在这样简单。