WordPress divi主题

使用 Divi 的主题生成器滚动时如何缩小全局标题的大小

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

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

当您设计一个固定的全局标题时,您可能希望在访问者滚动时缩小标题的高度。 它有助于减少全局标题在访问者视口高度中占用的空间。 在本教程中,我们将指导您完成该过程。 我们将从构建菜单开始,然后添加一些 JQuery 和 CSS 代码来触发效果。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

缩小全局标题高度

移动的

缩小全局标题高度

免费下载全局标题模板

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

订阅我们的 Youtube 频道

1. 前往 Divi Theme Builder 并添加新模板

转到 Divi 主题生成器

首先转到 Divi Theme Builder。

缩小全局标题高度

WordPress divi主题

开始构建全局标题

然后,单击“构建全局标题”并选择“构建全局标题”。

缩小全局标题高度

2.开始构建全局标题

部分设置

背景颜色

进入模板编辑器后,您会注意到一个部分。 打开该部分并将背景颜色更改为白色。

  • 背景颜色:#FFFFFF

缩小全局标题高度

浆纱

转到模块的设计选项卡并更改宽度。

缩小全局标题高度

间距

也修改该部分的顶部和底部填充。

  • 顶部填充:2vw
  • 底部填充:2vw

缩小全局标题高度

盒子阴影

并通过在下一节中添加一个微妙的框阴影将页面内容与全局标题分开。

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.13)

缩小全局标题高度

fiverr建站WordPress程序员

CSS ID

然后,将 CSS ID 添加到该部分。 在本教程的稍后部分,我们将使用这个 CSS ID 来创建滚动的收缩全局标题效果。

缩小全局标题高度

主要元素

转到高级选项卡,转到自定义 CSS 设置并通过在该部分的主要元素中添加两行 CSS 代码来修复该部分。

position: fixed;
top: 0;

缩小全局标题高度

Z 指数

为了确保该部分始终位于所有页面和帖子内容的顶部,我们还将增加该部分的 z 索引。

独立站选品工具

缩小全局标题高度

添加新行

立柱结构

完成列设置后,继续使用以下列结构添加新行:

缩小全局标题高度

浆纱

在不添加任何模块的情况下,打开行设置并相应地更改大小:

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

缩小全局标题高度

高质量外链购买

间距

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

  • 顶部填充:0px
  • 底部填充:0px

缩小全局标题高度

CSS ID

然后,转到高级选项卡并将 CSS ID 添加到该行。 在本教程后面我们将需要这个 CSS ID 来使收缩效果起作用。

缩小全局标题高度

主要元素

最后但同样重要的是,为了确保所有列在较小的屏幕尺寸上保持相邻,并使所有列内容居中,我们将在行的主要元素中添加两行 CSS 代码。

JasperAI 10000字免费额度试用
display: flex;
align-items: center;

缩小全局标题高度

将图像模块添加到第 1 列

上传徽标

是时候添加模块了,从第 1 列中的图像模块开始。上传具有透明背景的徽标。

缩小全局标题高度

浆纱

接下来修改模块的宽度。

  • 宽度:5vw(桌面)、9vw(平板电脑)、13vw(手机)

缩小全局标题高度

WordPress备份工具updrafplus

将菜单模块添加到第 2 列

选择菜单

移动到第二列并插入一个菜单模块。 选择您选择的菜单。

缩小全局标题高度

删除背景颜色

接下来移除模块的背景颜色。

缩小全局标题高度

布局

转到模块的设计选项卡并更改布局。

  • 风格:居中
  • 下拉菜单方向:向下

缩小全局标题高度

菜单文字

然后,打开菜单文本设置并进行一些更改。

  • 菜单字体:魔方
  • 菜单文字颜色:#000000
  • 菜单文字大小:0.9vw(桌面)、2vw(平板电脑)、3vw(手机)

缩小全局标题高度

下拉式菜单

也修改下拉菜单设置。

  • 下拉菜单背景颜色:#ffffff
  • 下拉菜单行颜色:#2970fa

缩小全局标题高度

图标

并通过更改图标设置中的汉堡菜单图标颜色来完成模块的设置。

  • 汉堡菜单图标颜色:#2970fa

缩小全局标题高度

将按钮模块添加到第 3 列

添加副本

到下一列和最后一列。 添加一个带有您选择的副本的按钮模块。

缩小全局标题高度

结盟

接下来更改模块的对齐方式。

缩小全局标题高度

按钮设置

相应地设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、1.5vw(平板电脑)、2vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#2970fa
  • 按钮边框宽度:0px

缩小全局标题高度

  • 按钮边框半径:0px
  • 按钮字母间距:1px
  • 按钮字体:魔方
  • 按钮字体样式:大写

缩小全局标题高度

间距

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

  • 顶部填充:0.8vw(台式机)、1.8vw(平板电脑)、2.5vw(手机)
  • 底部填充:0.8vw(台式机)、1.8vw(平板电脑)、2.5vw(手机)
  • 左填充:1.5vw(桌面)、3vw(平板电脑)、4vw(手机)
  • 右填充:1.5vw(桌面)、3vw(平板电脑)、4vw(手机)

缩小全局标题高度

盒子阴影

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

  • 盒子阴影垂直位置:20px
  • 盒子阴影模糊强度:30px
  • 阴影颜色:rgba(41,112,250,0.2)

缩小全局标题高度

将代码模块添加到第 2 列

插入 JQuery & CSS 代码

本教程的下一部分和最后一部分使用我们分配给部分和行的两个 CSS ID 来处理收缩效果。 使用以下几行 JQuery 和 CSS 代码将代码模块添加到第 2 列。 确保将 JQuery 代码放在脚本标签之间,将 CSS 代码放在样式标签之间。

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});
.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

缩小全局标题高度

3.保存生成器更改并查看结果

添加代码后,您可以保存对全局标题所做的所有更改并在您的网站上查看结果!

缩小全局标题高度

缩小全局标题高度

预览

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

桌面

缩小全局标题高度

移动的

缩小全局标题高度

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的 Theme Builder 创建一个缩小的全局标题。 缩小标题是节省访问者视口高度空间的好方法。 我们从头开始重新创建设计,并添加了一些自定义代码来触发收缩效果。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

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

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