如何修复你的 Divi 页脚

已发表: 2017-07-11

在今天的 Divi 教程中，我们将向您展示如何为您的网站创建固定页脚而不是普通页脚。在上一篇文章中，我们向您展示了如何使其具有粘性，这实际上与使其固定不同，尽管它们起初看起来是一样的。如果你不想让它变得粘人而是固定，这篇文章将帮助你。

添加固定到您网站的页脚可能是您来自一位客户的请求，也可能是您对自己网站的需求。尽管它不像固定标题那样经常使用，但它可能是您正在努力解决的问题之一。我们将向您展示如何在 Divi 网站上使页脚具有粘性的两种方法。第一个将使用一些 CSS 行，第二个将使用 jQuery 代码。这两种方式都会对您网站上页脚的 CSS 样式表进行修改。

这里有一个滚动时固定页脚的示例：

何时使用固定页脚

您希望在网站上使用固定页脚的原因有多种。这些原因之一可能是页脚所含信息的相关性。例如，您可以将社交图标放在页脚中，因为您想鼓励网站上的访问者探索您的社交媒体渠道。另一个原因可能是您只是喜欢它给您的网站带来的效果。

如果您使用固定页脚，您应该知道访问者窗口的一部分将一直被占用。这意味着如果没有固定的页脚，他们需要滚动更多才能看到相同的内容。这是一个挑战，因为访问者喜欢尽可能少地付出努力。

但是，如果您的页脚不是那么大，则可能会增加页脚中正在执行的操作数量。我们不鼓励同时使用固定的页眉、主菜单和页脚。通过将所有三个固定，显示的内容将大大减少，从而导致更高的跳出率。

固定页脚和粘性页脚的区别

在开始之前，我们将解释固定页脚和粘性页脚之间的区别。

粘性页脚通常更复杂一些。如果页面没有足够的内容将页脚推到屏幕底部，它就会表现得像一个固定的页脚。在页面足够长的情况下，页脚将表现得像普通页脚一样，会被向下推到页面底部，而不是屏幕底部。

让我们开始吧

订阅我们的 YouTube 频道

我们将立即开始，向您展示如何通过两种方式将固定页脚添加到您的网站；通过 CSS 代码和 jQuery 代码。这两种方法都有效，但这完全取决于您更喜欢在需要它的网站上使用哪种方法。

通过 CSS 添加固定页脚

创建固定页脚的第一个也是最简单的方法是添加一些 CSS 行。使用 Divi Builder 和 WordPress，我们可以在不同的地方添加这些行。让我们来看看它们。

通过自定义 CSS 为一页添加 CSS 代码

添加 CSS 代码的第一种方法是将其添加到一个页面。尽管最好为您网站上的每个页面设置相同的固定页脚（以在您的网站上保持一致），但您也可以选择让它特别适用于一个页面。

打开要添加 CSS 代码行的页面，然后单击 Divi Builder 的以下按钮。

向下滚动并将以下代码添加到自定义 CSS 字段：

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

通过主题定制器添加 CSS 代码

添加代码的另一种方法是通过主题定制器。通过使用主题定制器，您将在您的网站上实时观察结果。您通过主题定制器添加的代码适用于您网站上的所有页面。

转到您网站上的主题优化器 > 附加 CSS > 粘贴以下 CSS 代码行：

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

通过主题选项添加 CSS 代码

将 CSS 代码添加到网站的最后一种方法是通过主题选项。当您在主题选项的自定义 CSS 字段中添加代码时，该代码也将应用于整个网站。这是将自定义 CSS 代码添加到整个 Divi 网站的最常用方法。

转到Divi > 主题选项 > 常规 > 向下滚动并将以下代码添加到自定义 CSS 字段：

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

通过jQuery添加固定页脚

另一种可能性是通过一些 jQuery 代码行更改 CSS。当您使用固定页脚时，您通常希望确保它适用于您网站上的所有页面。这种一致性使您的访问者可以更轻松地浏览您的网站而不会感到困惑。

特别是通过代码模块为一页添加jQuery代码

打开要应用固定页脚的页面，然后在页面顶部添加一个新的标准部分。接下来，选择一个全角行并向其中添加一个代码模块。打开代码模块并在内容框中粘贴以下 jQuery 代码：

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

通过在特定页面上的代码模块添加 jQuery 代码，代码将仅适用于该页面。您网站的其余部分将有一个普通的页脚，而您使用代码模块的网站将有一个固定的页脚。

通过主题选项添加 jQuery 代码

添加使页脚固定的 jQuery 代码的最后一个选项是通过主题选项。代码行将立即应用于您的整个网站，并将提供您的网站所需的一致性。

转到Divi > 主题选项 > 集成 > 并将以下代码行粘贴到您网站的 <head> 中：

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

最后的想法

我们在之前的一篇文章中向您展示了如何制作粘性页脚。这篇文章特别处理了如何为您的网站制作固定页脚。在访问您的网站时，固定页脚将始终保留在访问者屏幕的底部。如果您有任何问题或建议，请务必在下面的评论部分留言，以便我们与您取得联系！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

特色图片由 Zeeker2526/shutterstock.com 提供