WordPress divi主题

如何创建漂亮的页脚滚动显示在 Divi 的部分分隔符下方

by | May 11, 2022 | Divi主题使用教程 | 0 comments

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

在所有设计趋势中,页脚仍然必不可少。 人们已经习惯了它们,这反过来又使它们高度用户友好。 它们帮助访问者组织他们在您网站上的逗留,并导航到他们正在寻找的精确页面。 使用 Divi,您可以轻松地在一个部分中创建任何类型的页脚。

google广告开户

现在,如果你想给你的页脚一些额外的维度和交互,你会喜欢这篇文章的。 我们将创造性地结合页脚部分和部分分隔线来创建页脚滚动显示。

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

页脚滚动

移动的

页脚滚动

免费下载布局

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

订阅我们的 Youtube 频道

1.创建新的空白页面并上传选择的布局

添加新的空白页

您需要做的第一件事是创建一个新的空白页。

WordPress divi主题

页脚滚动

上传 SaaS 公司布局包登陆页面

切换到 Visual Builder 并上传 SaaS Company Layout Pack 的登录页面。 尽管我们正在使用这种特定的布局,但您可以使该技术在您正在处理的任何类型的页面上工作。

页脚滚动

2.为每个部分添加Z索引并删除部分动画

将 Z 索引添加到英雄部分

继续更改页面上 hero 部分的 z 索引。

页脚滚动

复制 Z 索引并粘贴到页面上的所有其他部分

复制 z 索引并将其粘贴到页面上的所有其他部分。 增加每个部分的 z 索引是使教程工作的关键步骤。 它将允许每个部分出现在页脚部分的顶部,我们稍后将在帖子中添加。

页脚滚动

页脚滚动

移除英雄部分动画

为了确保页脚一直隐藏到页面底部,我们还将删除所有部分动画。 打开英雄部分并删除动画。

页脚滚动

fiverr建站WordPress程序员

将动画扩展到页面上的所有部分

将动画样式扩展到整个页面的所有部分。

页脚滚动

页脚滚动

3.修改页面最后一节

更改背景颜色

转到页面的最后一部分并更改背景颜色。

  • 背景颜色:#f2f2f2

页脚滚动

独立站选品工具

4.将常规部分#1添加到页面底部

部分设置

背景颜色

正如您在这篇文章的预览中看到的那样,页脚将出现在部分分隔符下方。 我们将在页面底部专门设置一个新部分用于此部分分隔符。 打开部分设置并使用完全透明的背景颜色。 这将允许页脚通过部分容器显示,即使它的位置将在它下方。

  • 背景颜色:rgba(0,0,0,0)

页脚滚动

顶部分隔线

转到该部分的设计选项卡并添加您选择的顶部分隔线。

  • 分隔线样式:在列表中查找
  • 分隔线高度:250px(台式机)、150px(平板电脑)、100px(手机)
  • 分隔线水平重复:2x

页脚滚动

Z 指数

这个新部分也需要增加 z 索引。

高质量外链购买

页脚滚动

5.将常规部分#2添加到页面底部

部分设置

背景颜色

是时候创建页脚部分了! 在页面底部添加另一个新的常规部分,然后选择您选择的背景颜色。

  • 背景颜色:#202332

页脚滚动

浆纱

转到设计选项卡并确保宽度为“100%”。

页脚滚动

JasperAI 10000字免费额度试用

间距

我们还需要增加该部分的顶部填充。

页脚滚动

Z 指数

我们分配给此部分的 z 索引低于页面上其他部分的 z 索引。 这将帮助我们隐藏该部分,直到我们位于页面底部。

页脚滚动

添加新行

立柱结构

继续使用以下列结构添加新行:

WordPress备份工具updrafplus

页脚滚动

浆纱

打开行设置并相应地更改大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是

页脚滚动

列间距

接下来打开第 1 列设置并添加一些左侧填充。

页脚滚动

页脚滚动

列右边框

也为列添加右边框。

  • 右边框宽度:1px
  • 右边框颜色:#515151

页脚滚动

复制粘贴列样式

通过扩展样式或使用复制粘贴选项将更改应用于所有列。

页脚滚动

页脚滚动

将图像模块添加到第 1 列

上传图片

是时候开始添加模块了! 将新的图像模块添加到第一列并上传您的徽标。

页脚滚动

浆纱

转到设计选项卡并更改不同屏幕尺寸的宽度。

  • 宽度:35%(台式机)、30%(平板电脑)、25%(手机)
  • 模块对齐:左

页脚滚动

间距

也添加一些底部边距。

  • 在图像下方显示空间:是
  • 下边距:50px

页脚滚动

将文本模块 #1 添加到第 2 列

添加内容

进入第二列! 添加具有您选择的一些内容的第一个文本模块。

页脚滚动

文字设置

修改文本设置。

  • 文字字体:Nunito Sans
  • 文本字体粗细:半粗体
  • 文字颜色:#ffffff
  • 文字大小:19px

页脚滚动

间距

并在不同的屏幕尺寸上添加一些自定义的顶部和底部边距。

  • 上边距:15px(台式机和平板电脑),10px(手机)
  • 下边距:15px(台式机和平板电脑),10px(手机)

页脚滚动

将文本模块 #2 添加到第 2 列

添加内容

将第二个文本模块添加到第二列并输入您选择的一些内容。

页脚滚动

添加链接

添加与页脚项目匹配的链接。

页脚滚动

文字设置

接下来修改文本设置。

  • 文字字体:Nunito Sans
  • 文字颜色:#dbdbdb
  • 文字大小:17px

页脚滚动

间距

并在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

  • 上边距:15px(台式机和平板电脑),10px(手机)
  • 下边距:15px(台式机和平板电脑),10px(手机)

页脚滚动

根据需要多次克隆文本模块 #2

根据需要多次克隆第 2 列中的第二个文本模块。

页脚滚动

更改内容

确保更改内容。

页脚滚动

更改链接

连同链接。

页脚滚动

克隆第 2 列中的模块并放置在其余列中

完成第二列后,您可以根据需要克隆这两个模块最多多次,并将重复项放在该行的剩余两列中。

页脚滚动

更改内容

更改每个副本的内容。

页脚滚动

更改链接

连同链接。

页脚滚动

6. 将第 2 节固定到页面底部

添加自定义 CSS

现在,要创建滚动显示,我们将通过在该部分的主要元素中添加两行 CSS 代码来确保页脚部分粘在页面底部。

position: fixed;
bottom: 0;

页脚滚动

页脚滚动

7. 将底部边距添加到第 #1 部分以创建显示效果

在不同的屏幕尺寸上添加底部边距

我们还需要在页面底部留出一些空间来显示页脚。 打开包含部分分隔符的部分并在不同的屏幕尺寸上添加一些底部边距,您就完成了!

  • 下边距:400px(台式机)、700px(平板电脑)、800px(手机)

页脚滚动

页脚滚动

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

页脚滚动

移动的

页脚滚动

最后的想法

在这篇文章中,我们向您展示了如何创建漂亮的页脚滚动显示下方的部分分隔线以创建独特的效果。 这是使任何页脚交互并引起对页脚中列出的项目的注意的好方法。 我们希望本教程也能激发您创建自己的部分分隔页脚显示! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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