WordPress divi主题

如何在 Divi 中创建移动粘滞页脚栏

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

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

粘性页脚栏可以成为任何网站的有用补充,尤其是对于移动设备。 当用户滚动页面时,粘性页脚栏保持固定(或卡住)在屏幕底部。 它的位置使移动用户(尤其是在手机上)更容易使用它,因为它非常靠近拇指。 这可能就是为什么设计师经常在粘性页脚栏中包含导航按钮的原因。 它可以提升移动设备上的导航 UX。

google广告开户

在本教程中,我们将向您展示如何在 Divi 中创建移动粘滞页脚栏。 任何粘性页脚栏的基础是固定位置,可通过 Divi 的内置粘性位置选项轻松控制。 我们将向您展示如何使用粘滞位置和 Divi 设计工具套件来设计 3 种不同的粘滞页脚栏设计,每种都有 4 个导航按钮。 这对于希望改善其网站在移动设备上的用户体验的任何公司都非常有效。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的移动粘性页脚栏设计的快速浏览。

免费下载粘滞页脚栏模板和布局

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

如何将免费模板和布局导入您的 Divi 网站

此下载包含两个文件。 一种可用于将页脚模板导入主题生成器,另一种可用于将每个页脚的各个部分布局导入 Divi 库。

要将粘滞页脚栏模板导入您自己的网站,请解压缩下载的 zip 文件以访问 JSON 文件。

然后转到 WordPress 仪表板并导航到 Divi > Theme Builder。

然后单击页面右上角的可移植性图标。

在可移植性弹出窗口中,从名为“divi-sticky-footer-bar-template”的文件夹中选择 JSON 文件。

WordPress divi主题

然后单击导入按钮。

divi 移动粘性页脚栏

要将 3 个粘滞页脚栏部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您下载(并解压缩)的文件夹中选择 JSON 文件(“divi-sticky-footer-bar-section-layouts.json”)。

然后单击导入按钮。

divi 移动粘性页脚栏

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

在 Divi 中创建移动粘滞页脚栏

第 1 部分:在主题生成器中创建新的页脚模板

首先,导航到 Theme Builder 并单击以在默认网站模板中构建一个新的全局页脚。 (或者,您可以添加新模板以进行测试。)

fiverr建站WordPress程序员

divi 移动粘性页脚栏

部署电话视图和图层模式

进入页脚布局编辑器后,打开页面底部的设置菜单。

单击左侧的电话图标以打开构建器的电话视图。 这将有助于可视化粘性页脚在我们设计时在移动设备上的外观。

然后单击右侧的图层图标以打开图层模式。 这将有助于在元素靠得太近时选择元素。

divi 移动粘性页脚栏

独立站选品工具

第 2 部分:创建粘滞页脚部分和行

创建粘性部分

要创建粘性部分,我们可以使用现有的默认常规部分。

打开该部分的设置,然后在高级选项卡下选择粘性位置选项 坚持到底.

divi 移动粘性页脚栏

在内容选项卡下,为该部分添加背景颜色。

  • 背景颜色:#1a2545

divi 移动粘性页脚栏

高质量外链购买

在设计选项卡下,按如下方式更新填充:

  • 内边距:0px 顶部,0px 底部

这将缩短移动设备页脚栏部分的高度。

divi 移动粘性页脚栏

创建行

一旦该部分就位,向该部分添加一列行。

divi 移动粘性页脚栏

JasperAI 10000字免费额度试用

打开行设置并更新设计选项卡下的大小和间距选项,如下所示:

  • 天沟宽度:1
  • 宽度:94%
  • 内边距:6px 顶部,6px 底部

divi 移动粘性页脚栏

为了确保我们要添加的其他列在移动设备上保持相邻(不会堆叠),我们需要使用 Flex 属性添加一个简短的 CSS 片段来保持对齐。

在高级选项卡下,将以下自定义 CSS 添加到主元素:

display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;

divi 移动粘性页脚栏

WordPress备份工具updrafplus

第 3 部分:创建页脚栏按钮

要创建页脚栏按钮,我们将使用 blurb 模块。 这允许我们创建一个类似于移动应用程序的按钮(一个带有标题的小图标),非常适合移动导航。

在该列中,添加一个新的简介模块。

divi 移动粘性页脚栏

更新简介内容如下:

  • 标题:首页
  • 身体: 留空
  • 使用图标:是
  • 图标:主页图标(见截图)

divi 移动粘性页脚栏

在设计选项卡下,更新图标样式如下:

  • 图标颜色:#fff
  • 图标字体大小:24px

divi 移动粘性页脚栏

然后更新 Title Text 和 Sizing 选项,如下所示:

  • 标题字体:蒙特塞拉特
  • 标题字体粗细:半粗体
  • 标题字体样式:TT
  • 标题文本对齐方式:居中
  • 标题文字颜色:#fff
  • 标题文字大小:10px
  • 最大宽度:60px
  • 模块对齐:中心

divi 移动粘性页脚栏

继续向简介中添加以下填充和圆角:

  • 内边距:5px(上、下、左、右)
  • 圆角:5px(上、下、左、右)

divi 移动粘性页脚栏

要在宣传语周围添加边框,我们将使用 box-shadow,主要是因为它不会为设计添加任何额外的实际空间。

  • 盒子阴影:见截图
  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:0px
  • 盒子阴影传播强度:1px
  • 阴影颜色:rgba(255,255,255,0.12)

divi 移动粘性页脚栏

为了去除模糊图像和标题之间的默认间距,请在高级选项卡下为模糊图像和模糊标题添加以下 CSS 片段:

模糊图像 CSS

margin-bottom: 0px;

模糊标题 CSS

padding-bottom: 0px;

此外,将水平和垂直溢出选项更新为 可见的. 这将确保在 Divi Builder 中编辑时模块设置栏不会被切断。

divi 移动粘性页脚栏

复制列以添加更多按钮

为了创建剩余的三个按钮,我们可以将列(包含简介模块)复制三次。 这将创建总共 4 列,每列都包含相同的按钮。

divi 移动粘性页脚栏

复制列(和按钮)后,您可以返回到每个简介模块并将标题文本和图标更新为您想要的任何内容。

divi 移动粘性页脚栏

第 4 部分:将其保存到 Divi 库

现在是将该部分保存到 Divi 库的好时机,以便您以后可以在任何需要的地方添加粘性页脚。

要保存它,请在将鼠标悬停在该部分上时单击该部分设置栏中的“保存到库”图标。 然后为布局命名并将其保存到库中。

divi 移动粘性页脚栏

就是这样! 让我们在移动显示的实时页面上查看我们的粘性页脚栏的结果。

结果

第 5 部分:创建移动粘滞页脚栏设计 #2

divi 移动粘性页脚栏

对于这个粘性页脚栏的替代设计,我们可以通过部分背景和简介的框阴影获得一些创意,以给人一种按钮延伸到栏上方的印象。

更新部分设置

为此,请打开部分设置并更新背景,如下所示:

在桌面选项卡下…

  • 背景颜色:#1a2545

在粘性标签下…

  • 背景颜色:透明
  • 背景渐变左颜色:透明
  • 背景渐变正确颜色:#1a2545
  • 起始位置:50%
  • 结束位置:0%

divi 移动粘性页脚栏

更新简介

接下来,使用多选功能选择所有四个简介模块。 选择它们后,打开其中一个的设置并立即更新所有它们的背景颜色:

  • 背景颜色:#1a2545

divi 移动粘性页脚栏

在设计选项卡下,更新简介的框阴影,如下所示:

  • 盒子阴影传播强度:3px
  • 阴影颜色:#1a2545

divi 移动粘性页脚栏

要保存此粘性页脚栏部分布局,请在将鼠标悬停在该部分上时单击部分设置栏中的“保存到库”图标。 然后为布局命名并将其保存到库中。

divi 移动粘性页脚栏

结果

这是最终结果的一瞥。

第 6 部分:创建移动粘滞页脚栏设计 #3

divi 移动粘性页脚栏

对于这个粘性页脚栏的另一种设计,我们可以通过添加圆角使页脚栏看起来更像一个选项卡来获得一些创意。

更新部分设置

首先,打开现有的部分设置并将粘性背景颜色更新为透明。

  • 背景颜色(粘性):透明

确保也删除背景渐变。

divi 移动粘性页脚栏

更新行设置

接下来,打开行设置并添加以下背景颜色:

  • 背景颜色:#1a2545

divi 移动粘性页脚栏

在设计选项卡下,更新以下内容:

  • 内边距:10px 顶部
  • 圆角:左上角 20px,右上角 20px

divi 移动粘性页脚栏

要保存此粘性页脚栏部分布局,请在将鼠标悬停在该部分上时单击部分设置栏中的“保存到库”图标。 然后为布局命名并将其保存到库中。

divi 移动粘性页脚栏

结果

这是结果。

第 7 部分:在桌面上禁用粘滞页脚

为了在桌面视图上隐藏页脚以使其仅在移动设备上显示,您始终可以更新该部分的可见性选项。 只需选择 桌面 在下面 禁用 选项。

divi 移动粘性页脚栏

最后结果

让我们最后看一下移动粘性页脚栏的设计。

粘性页脚栏 #1

粘性页脚栏 #2

粘性页脚栏 #3

最后的想法

在 Divi 中创建一个粘性页脚栏非常简单。 我的意思是,您只需单击几下即可将一个部分(或行)粘贴到页面底部。 之后,如何设置页脚栏的样式以及要包含的内容取决于您。 本教程中的页脚栏设计是为移动设备设计的,也旨在提供更多功能和通用性,因此您可以了解如何自行设计它们。 所以不要害怕尝试更有创意的设计!

有关更多信息,请查看如何使用点击通话、电子邮件、短信和方向链接创建移动联系栏。

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

干杯!

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