如何使任何 Divi 元素具有粘性？ （分步指南）

您想自定义您的网站并修复元素吗？ 在本指南中，我们将向您展示如何使任何 Divi 元素在使用和不使用编码的情况下都具有粘性。

我们最近看到了如何使用 Divi 使您的标题具有粘性，以帮助用户浏览您的内容。 这是一个很好的第一步，但你可以做的还有很多。 Divi 是一个高度可定制的主题，可让您个性化 WordPress 网站的每一寸。 这就是为什么在本教程中，我们将看看使任何 Divi 元素具有粘性的不同方法。

为什么要让 Divi 元素具有粘性？

默认情况下，网站上的元素不具有粘性，因此当用户向下滚动时，这些元素会从屏幕上消失，用户会看到新内容。 但是，您可能希望使网站上最重要的元素始终可见，以帮助您的客户找到他们需要的东西。 这意味着即使用户向下滚动，元素也将始终固定在屏幕上。 例如，您可以粘贴主菜单、注册表单或包含用户需要的关键信息的列。

我们的想法是让这些元素更明显，以帮助您的访问者。 粘性元素也可以非常有助于增加销售和转化。 例如，许多在线商店会提供优惠和主要的号召性用语 (CTA)，以提高销量。

如何使任何 Divi 元素具有粘性/固定？

有两种主要方法可以使任何 Divi 元素具有粘性：

1. 使用内置的 Divi builder 插件
2. 有点编码

在本指南中，我们将解释如何使用这两种方法固定元素。 两种选择都可以完成工作，因此请选择最适合您技能的一种。

1) 使用 Divi Builder

Divi Builder 带有 Divi，因此，如果您已经在使用此主题，则无需安装任何东西。 要使任何元素具有粘性，首先，您需要创建一个页面并使用可视化构建器来添加或删除元素、编辑它们等等。 对于这个演示，我们将使用他们的一个名为Accountant的预制布局包，但您也可以使用实时页面或全新页面。

创建一个页面

首先，在您的 WordPress 仪表板中，转到Pages > Add New并创建一个新页面。

从现在开始，我们将使用 Divi 视觉构建器，因此按下Use the Divi Builder按钮，您将看到一个拖放视觉构建器。

导入首选模板

构建器打开后，您将看到三个选项：

• 从头开始构建
• 选择预制布局
• 克隆现有页面

如果要创建自定义设计，请选择第一个选项。 使用 Divi 构建器，为您的网站创建独特的页面设计将非常简单。 或者，您可以克隆现有的页面设计或选择预制布局。 在我们的例子中，我们将使用预制的布局模板 ( Accountant) 。 因此，要导入会计模板，我们选择选择预制布局选项，然后从列表中选择您喜欢的一个。

之后，当我们使用经典编辑器时，您将在屏幕上看到如下内容：

但是，使用可视化构建器更容易，因此我们将切换到它。

切换到可视化生成器

在标题中，您将看到一个使用名为Build On the Front End的可视化构建器的选项。 按下它，你会看到屏幕是如何变化的，并且更容易从前端看到修改的结果。

会计模板带有右侧边栏和时事通讯注册表单。 但是，它不是固定的，所以当我们向下滚动时，它会消失。 那么，让我们看看如何使时事通讯注册框具有粘性。

安装和激活粘滞菜单 WordPress 插件

为了使任何 Divi 元素具有粘性，我们将使用 Sticky Menu 插件。 因此，打开您的WordPress 仪表板，转到Plugins > Add new，然后搜索Sticky Menu、Sticky Header on Scroll 。 然后，单击安装并激活它。

使用这个简单的插件，我们将能够立即使我们的菜单、标题或任何元素具有粘性。 要设置插件，请转到设置 > 粘性菜单（或任何东西！） 。

设置粘滞菜单

有两个主要的自定义设置选项：

• 基本的
• 先进的

首先，让我们看看如何自定义基本设置。 您将需要命名一个粘性元素。 在我们的例子中，我们将其命名为#sticky ，并将首页和元素之间的空间设置为50px 。 如果您不确定间距，请不要担心，您可以稍后更改。

然后，保存基本设置并转到高级设置选项卡。 在这里，我们将进一步细化粘性元素。 例如，我们将 Z-Index 字段设置为99998 ，并在俯卧撑元素字段中添加#stop 。 俯卧撑元素将帮​​助您停止浮动粘性小部件（稍后会详细介绍）。

那里还有一些其他高级定制选项，但我们暂时不会触及。 所以，一旦你添加了这些值，保存设置就可以了。 之后，打开您使用 Divi 可视化构建器创建的页面。 我们将通过向其添加 CSS 类来使时事通讯注册小部件具有粘性。 有两列。 左栏显示博客文章，右栏显示时事通讯注册栏。 因此，我们需要将 CSS ID 应用到右列。

添加自定义 CSS ID

为此，请打开Divi 设置部分并选择第2 列。 在高级选项卡下，您将看到添加 CSS ID、CSS 类和 CSS 自定义代码的部分。 要使此元素具有粘性，您只需添加您在基本设置中设置的粘性元素。 在我们的例子中，我们将在 CSS ID 字段中添加粘性并保存设置。

确保保存整个 Divi builder 设置，否则将无法正常工作。 然后，您可以预览页面。

正如您在上面看到的，时事通讯注册表单现在已修复。 但是，它与网站上的其他元素重叠，因此我们将进行一些更改。 这是高级设置中的俯卧撑元素 ID发挥作用的时候。 在我们的例子中，我们将让时事通讯小部件在联系表单之前停止。

添加停止 CSS

因此，正如我们之前所做的那样，我们需要在联系表单部分提及俯卧撑 CSS ID 。 为此，请在 Divi 中打开 Newsletter Section 设置，转到Advanced 选项卡，将stop添加到 CSS ID，然后保存更改。

然后，在前端刷新页面，您会看到时事通讯注册框是粘性的，但在到达联系表单时会停止，并且不会与网站上的任何其他小部件重叠。

同样，您可以按照相同的步骤在您的网站上制作任何 Divi 元素。 让我们看看如何使用 Sticky Menu 和 Divi Builder 修复社交图标。

使社交媒体图标具有粘性

使社交媒体图标具有粘性的过程非常相似。 但是，在我们开始之前，请记住，使用免费版本的 Sticky Menu，您只能同时使一个元素具有粘性，因此请记住从第 2 列中删除粘性CSS ID。

之后，您需要将粘性CSS ID 添加到您的社交媒体图标元素。 就像我们之前做的那样，单击元素，转到高级选项卡，然后在相应字段中添加自定义 CSS ID 。

然后保存设置并在前端检查结果。

如您所见，我们刚刚使社交媒体图标具有粘性！

如果您不想安装任何插件，您可以通过编程方式固定元素。 让我们看看怎么做。

2）通过一些编码使任何 Divi 元素具有粘性

在本节中，我们将向您展示如何以编程方式固定任何 Divi 元素。 在这种情况下，我们不会修复时事通讯注册小部件，而是向您展示如何通过一些编码使标题具有粘性。

创建自定义标题

从 Divi 主题生成器，您可以创建自定义网站模板。

对于这个演示，首先，让我们创建一个 Global Header。

您将有三个选择：

• 从头开始构建
• 选择预制布局
• 克隆现有页面

对于这个演示，我们将从头开始创建一个标题。

在下一步中，您需要选择标题中所需的行数。

对于本教程，我们将选择单行布局。 正如我们之前所见，创建标题后，您将能够对其进行编辑并添加多个元素，例如菜单、图像、自定义链接等。 通过拖放 Divi Builder，您只需单击几下即可调整标题的大小和填充。

在我们的例子中，我们将在标题中添加一个菜单。

添加一个 CSS 类

在继续之前，您需要为您的标题提及一个CSS 类。 从标题设置中，转到高级选项卡并添加自定义CSS 类。 我们将添加pa-sticky-header作为自定义 CSS 类。

之后，保存更改并在 Divi 主题选项中，您将看到在Integration settings下插入代码的部分。

添加 JavaScript 代码

现在有趣的部分开始了。 复制以下 JavaScript 代码：

 <脚本>
jQuery（函数（$）{
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(window).bind('scroll', function () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
别的 {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</脚本>

将其粘贴到编辑器中并保存更改。

添加额外的 CSS

之后，我们将设置要在网站上粘贴的元素。 在我们的例子中，要使标题固定在顶部，请复制以下 CSS 代码并将其粘贴到 CSS 编辑器中并保存更改。

 /*使特定元素具有粘性*/

.pa-sticky-header {
	位置：固定！重要；
	顶部：0； /*设置页眉到页面顶部的距离*/
	宽度：100%；
} 

现在，检查您网站的前端，您会看到标题已修复。

此外，您可以自定义标题并更改其位置、大小等。 同样，您可以使用代码作为基础，并使 Divi 中的任何其他元素具有粘性。 例如，您可以使用它来固定表单、按钮或列。

建议

现在您知道如何在 Divi 安装上创建粘性元素，但在结束我们的指南之前，让我们看一些技巧。

没有动画

使用 Divi builder 插件，您可以为元素、部分等添加悬停效果。 但是，我们不建议在您的粘性元素上使用悬停效果，因为它们可能会破坏您的网站。 如果您在安装过程中遇到任何技术问题，只需停用悬停动画效果，一切都会恢复正常。

发布前预览更改

Divi Builder 允许您在屏幕上查看您所做的更改。 这对于确保对齐正确并且元素不与站点上的任何其他小部件重叠非常有用。

免费版中的有限粘性元素

WP Sticky Menu 的免费版本只允许您添加一个粘性元素。 因此，如果您想为您的网站添加更多元素，您可能需要考虑升级到起价为 39 美元的专业版。

结论

总而言之，当您想让用户更容易看到某些元素时，修复某些元素是一个不错的选择。 在本教程中，我们看到了使任何 Divi 元素具有粘性的两个选项：

• 使用 Divi Builder 插件
• 以编程方式

如果您没有编码技能，可以使用 Divi Builder 插件。 这是最简单和最适合初学者的方法。 使用实时预览模式，您可以立即看到每一个变化。

另一方面，如果您不想安装任何插件或只想编写代码，则可以通过编程方式修复任何元素。 只需使用 JavaScript 代码作为基础并对其进行自定义以使您想要的任何元素具有粘性。 您可以将 CSS 代码添加到主题的style.css或使用 Divi 中的附加 CSS 部分。 在你这样做之前，确保你在你的元素上提到了 CSS 类。

您使用哪种方法使元素具有粘性？ 你知道其他的吗？ 在下面的评论部分让我们知道。

如果本教程有用，请在社交媒体上与您的朋友和博主分享。 如需更多教程，请查看我们的博客。