WordPress divi主题

如何使用 Divi 创建粘性页脚显示

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

为您的网站添加粘性页脚显示可以为您的网站页脚带来额外的小触感。 当您滚动到页面底部和从页面底部滚动时,页脚显示效果会打开和关闭页脚的可见性(像窗口上的百叶窗一样打开页脚)。 通常,这种效果需要自定义的 CSS 限制且难以使用。 但是使用 Divi 的主题构建器选项,您可以轻松地为使用 Divi 内置选项构建的任何自定义页脚设计添加页脚显示效果。

google广告开户

在今天的 Divi 教程中,我们将向您展示如何在 Divi 中创建粘性页脚显示。 只需几个简单的步骤。

让我们开始吧!

抢先看

这是我们将在本教程中构建的粘性页脚显示设计的快速浏览。

免费下载带有 Sticky Footer Reveal 的全局页脚模板

要掌握本教程中的模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将模板布局导入您的网站,您需要转到 Divi 主题生成器并使用可移植性选项将 .json 文件导入主题生成器。

divi 粘页脚显示

让我们进入教程,好吗?

使用 Divi 主题生成器创建粘性页脚显示

创建新的页脚模板

首先转到 WordPress 网站后端的 Divi Theme Builder。 在那里,添加一个新的全局或自定义页脚。

divi 粘页脚显示

WordPress divi主题

构建页脚布局

接下来,选择“选择预制布局”选项。 对于本教程,我们将使用预制布局来加快设计过程。 但是,如果您愿意,您可以从头开始构建一个。

divi 粘页脚显示

在 Add From Library 弹出窗口下,找到并使用 Marina Layout Pack 中的 Marina About Page Layout。

divi 粘页脚显示

加载布局后,删除除底部页脚部分之外的所有部分。 我们将使用此页脚部分来添加页脚显示效果。

divi 粘页脚显示

将粘滞页脚显示效果添加到页脚部分

要将页脚显示效果添加到页脚部分,我们需要执行以下操作。

1:在页脚部分添加粘性位置

首先,我们需要给页脚部分一个粘性位置。 为此,请打开部分设置并单击高级选项卡。 在滚动效果下,更新粘滞位置,使其粘在底部:

  • 粘性位置:粘在底部

divi 粘页脚显示

1:更新粘性状态的 Z-Index

接下来,当页脚部分处于粘性状态时,我们需要给页脚部分的 z-index 设置为 0。 这将允许该部分在滚动时位于页面主体上的其他部分或元素之后。

fiverr建站WordPress程序员

为此,通过单击 Z 索引选项旁边的粘性图标来激活粘性样式选项卡来更新位置 Z 索引。 然后,在粘性选项卡下将 Z 索引更新为 0。

divi 粘页脚显示

3:更新粘滞页脚占位符 Z 索引

当一个元素在 Divi 中被赋予一个粘性位置时,一个重复的占位符元素也会在幕后自动创建。 这有助于提供使用 Divi Builder 定位和设计粘性元素所需的功能。 在这种情况下,创建了一个默认 z-index 为 1 的页脚部分占位符。我们不希望我们实际的粘性页脚部分(现在 Z 索引为 0)位于占位符部分后面,因此我们需要更新占位符的 Z 索引为 -1。

为此,首先将自定义 CSS 类添加到页脚部分,如下所示:

  • CSS 类:sticky-footer-reveal

divi 粘页脚显示

独立站选品工具

然后使用构建器设置菜单打开页脚模板的页面设置。 在页脚模板设置模式中,选择高级选项卡并在自定义 CSS 框中输入以下 CSS:

.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}

divi 粘页脚显示

这将强制占位符部分位于具有粘性页脚显示效果的页脚后面,以便您可以与页脚部分内容进行交互。

4:保存更改

完成后,将更改保存到页脚模板和主题生成器。

divi 粘页脚显示

高质量外链购买

最后结果

要查看最终结果,请查看实时页面并滚动离开。 这里是!

最后的想法

在 Divi 中,向您的网站添加粘性页脚显示不需要插件或复杂的自定义 CSS。 使用主题生成器,您可以在几分钟内轻松创建页脚模板并设计具有页脚显示效果的页脚部分。 希望这将为您的页脚设计提供微妙的提升,并为访问者带来诱人的互动。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题