未命名_自定义px_2019.08.gif

【Divi主题教程】divi主题如何设置手机端固定底部菜单栏?

159f1ee52d722f
我们知道确保所有内容都经过定制以适合移动体验的重要性。为了帮助您将移动体验提升到另一个层次,在本分步指南中,我们将向您展示如何使用Divi创建固定的移动页脚栏。让我们开始吧!

预习

在深入学习本教程之前,让我们快速看一下将逐步重新创建的三个示例。这些示例仅显示在移动设备(如果愿意,可以在平板电脑上)中显示。

19e825fe95136e

重新创建示例1

1feec5e22b5c92

将新部分添加到页面底部

让我们开始重新创建第一个固定的移动页脚栏!我们建议为Health Clinic Layout Pack中包含的三个布局创建一个页面。每个示例一个。打开要添加第一个页脚栏的页面。向下滚动到页面末尾,然后在最后一个部分之后添加一个新部分。

15fcd02e25f9be

间距

打开行设置,并删除间距设置中的所有自定义顶部和底部填充。

  • 最高填充:0px
  • 底部填充:0px

1f7552e9e55e99

能见度

我们也将这一部分隐藏在桌面上。如果您希望移动页脚栏仅出现在移动设备上,请继续并在平板电脑上隐藏该部分。

151e00af02b5e1

添加新行

列结构

继续使用以下列结构向该部分添加新行:

1e0e515325ea7f

浆纱

尚未添加任何模块,请打开行设置并修改大小设置。

  • 将此行设为全角:是
  • 使用自定义装订线宽度:是
  • 装订线宽度:1
  • 均衡柱高:是

1a2ee5e25fa39e

间距

接下来,删除该行的所有默认顶部和底部填充。

  • 最高填充:0px
  • 底部填充:0px

15e945c7225eaf

自定义CSS

最后,我们向该行添加一些自定义CSS行。这些行将帮助将行变成固定的页脚栏。

01
02
03
04
display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

1a5b38f5beefe2

将文本模块添加到列1

添加内容

是时候开始添加模块了!我们需要的第一个模块是第1列中的文本模块。添加一些选择的内容。

1eabef025fd5e6

背景颜色

转到模块的背景设置,然后更改背景颜色。

  • 背景颜色:#5e89fb

1fcf3e527b25ea

文字设定

也修改文本设置。

  • 文字字型:Work Sans
  • 文字字体粗细
  • 文字颜色:#ffffff
  • 文字大小:16px
  • 文字字母间距:-1px

117bfbe85e02c5

间距

接下来添加一些自定义填充值。

  • 最高填充:16px
  • 底部填充:16px
  • 左填充:15px
  • 右填充:15px

16e5eb9df35215

边境

还有一些圆角。

  • 左上方:10px
  • 右上方:10px

125f6e5b4e24d5

框影

通过添加一个微妙的阴影框来完成模块的设置。

  • 框影模糊强度:80px

170e80b55f27e8

将Blurb模块添加到列2

添加内容

将Blurb模块添加到第二列,并添加标题。

1fb0eb4aef8255

选择图标

选择“模糊”模块的图标继续。

185eef1a25b574

背景颜色

也为模块添加背景色。

  • 背景颜色:#62de9d

18eb35dbfe252c

图标设置

移至设计选项卡并更改图标设置。

  • 图标颜色:#ffffff
  • 图标位置:左
  • 使用图标字体大小:是
  • 图标字体大小:19px

1eff8fbe52e5d5

标题文字设定

继续修改标题文本设置。

  • 标题字体:Work Sans
  • 标题文字颜色:#ffffff
  • 标题文字大小:16px
  • 标题字母间距:-1px

1ff56e3e5524b2

间距

也向模块添加一些自定义填充。

  • 最高填充:20px
  • 底边填充:10px
  • 左填充:30px
  • 右填充:30px

19455eecf02f5c

边境

并在左上角和右上角添加“ 10px”。

  • 左上方:10px
  • 右上方:10px

1ec5221ffe1514

框影

最后但并非最不重要的一点是,在模块中添加一个微妙的阴影。

  • 框影模糊强度:80px

15ecb5e0c2fe4e

Divi主题教程WordPress教程精品教程

【Divi主题教程】divi主题如何设置顶部菜单栏滚动是进行隐藏

2019-12-23 22:37:10

Divi主题教程精品教程

【divi教程】如何使用Divi的主题生成器创建自定义全局标题

2020-1-2 15:44:11

未命名_自定义px_2019.08.gif

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索