如何使用 Divi 创建页脚展示

已发表: 2017-07-28

在今天的 Divi 教程中，我们将向您展示如何达到某种效果，您可能从未想过将其集成到您自己的网站或客户的网站中。更确切地说; 我们将向您展示如何创建页脚显示。页脚显示基本上等到您到达页面末尾并根据您滚动的方式显示页脚。一旦您一直滚动页面，页脚将以其原始形式显示。

向您的网站添加页脚显示可以为您的网站页脚带来额外的小触感。这也是人们滚动浏览您网站上的任何页面时看到的最后一件事。为了向您展示页脚显示的确切含义，让我们看一下最终结果：

页脚显示

您可以看到，除了使页脚显露外，我们还为我们网站的主要内容添加了一些微妙的阴影。通过这样做，我们在主要内容和页脚之间创建了一种视角。

如何使用 Divi 创建页脚展示

订阅我们的 YouTube 频道

添加所需的 CSS 代码

为了实现页脚显示结果，我们首先需要一些 CSS 代码行。由于将 CSS 代码添加到 Divi 网站的方法有多种，因此我们将向您展示所有三种方法。首先，我们将向您展示如何将代码添加到主题选项。其次，我们将通过 Theme Customizer 添加代码。通过两种方法之一添加代码，您的页脚显示将立即应用于整个网站。另一方面，如果您想让代码特别适用于一个页面，您也可以这样做。通过向您展示如何将代码添加到您正在处理的页面，您可以专门为一个页面创建该效果。

我们在代码中需要的两个主要内容是 z-index 和主要内容的边距底部。为了确保页脚完美贴合，我们需要知道页脚的高度。通常，正在使用的页脚的值为 53px。但是，您可能已经根据需要更改了高度。在向您展示如何标准地添加页脚显示后，我们还将向您展示如何使其适合任何页脚的高度。

通过主题选项添加所需的 CSS 代码

我们将向您展示如何添加 CSS 代码的第一种方法是通过 Divi 主题选项。这是向您的网站添加任何其他 CSS 代码的最常用方法。通过在该区域添加 CSS 代码，您将立即使其适用于整个网站。

要添加代码，请转到您的WordPress 仪表板 > Divi > 主题选项 > 并将以下 CSS 代码行复制粘贴到选项卡底部的自定义 CSS 字段中：

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

添加代码后，转到您的网站并观看页脚显示的工作。

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

将 CSS 代码添加到 Divi 网站的另一种方法是通过主题定制器。通过 Theme Customizer 或 Theme Options 添加代码是一样的。在主题选项中删除代码后，它也会在主题定制器中删除，反之亦然。通过 Theme Customizer 添加代码的优势之一是您可以实时看到所有发生的事情。因此，您对代码所做的额外调整将立即让您清楚地了解您将获得的最终结果。

要将代码添加到主题定制器，请转到您的WordPress 仪表板 > 外观 > 自定义 > 向下滚动到“附加 CSS” > 并添加以下 CSS 代码行：

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

仅将所需的 CSS 代码添加到一页

添加页脚显示 CSS 代码行的最后一种方法是将其添加到特定的页面。例如，如果您想为交互内容较少的页面提供一些附加值，这可能会很有趣。通过添加页脚显示，您仍然会以某种方式使页面更具交互性，并且您会将重点放在页脚中提供的内容上，例如社交媒体图标。

要将 CSS 代码添加到特定页面，请打开该特定页面。在该页面上 Divi Builder 的右上角，您将看到以下图标。

单击该图标并将以下代码行粘贴到自定义 CSS 字段中：

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

保存设置后，您将看到页脚显示特别出现在该页面上。

更改页脚高度

现在，我们上面解释的方法仅对提供的标准页脚计数。一旦您处理另一个高度，代码将无法正常工作。我们已经考虑到了这一点，我们将向您展示如何使页脚显示为其他高度。

在任何时候，您都可以选择要分配给页脚的高度。我们必须为两个 CSS ID 设置高度：主页脚和页脚底部。通过调整这两个位置的高度，页脚将适合到位。当然，一旦你这样做了，你还必须更改主要内容的页边距底部。例如，如果您想要一个高度为 60px 的页脚，您将需要以下代码行：

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

您可以看到我们需要 '60px' 值的三个地方。如果您想为页脚指定另一个高度值，请确保在所有三个位置都进行更改；主要内容，主要页脚和页脚底部。

添加 CSS 框阴影

您可以为网站添加一点透视和交互的另一件事是在主要内容中添加一些框阴影。页脚已经表明它位于主要内容的“下方”。添加框阴影后，您将强调这一点。通过有阴影，主要内容和页脚之间的高度错觉距离会显得更大。

要将框阴影添加到页脚显示中，请使用以下代码行：

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

就是这样！您的页脚显示现在应该可以正常工作。

最后的想法

在今天的帖子中，我们向您展示了如何在您的网站上创建页脚显示效果。确保使用提供的自定义 CSS 代码来创建效果并确保它适合页脚的高度。如果您想为其提供额外的视角，我们建议将框阴影添加到主要内容中，如上一步所示。如果您有任何问题或建议；确保您在下面的评论部分发表评论！

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

特色图片来自 Demja/shutterstock.com