WordPress divi主题

如何在 Scroll 上将 Divi 标题换成另一个标题

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

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

您的标题不可避免地仍然是您网站最重要的元素之一。 它会影响访问者的导航过程,并允许他们快速找到他们正在寻找的内容。 现在,如果您正在寻找一种方法将您的 Divi 标题与另一个滚动交换,您会喜欢这篇文章的。 我们将向您展示如何使用 Divi 的主题构建器、内置元素和一些附加代码来实现它。 我们还确保页面顶部的标题有一些自动生成的占位符空间。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

交换 divi 标头

移动的

交换 divi 标头

免费下载交换 Divi 标题模板

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

1. 转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先转到 WordPress 网站后端的 Divi Theme Builder,然后单击“添加全局标题”。

交换 divi 标头

构建全局标题

然后,单击“Build Global Header”以重定向到模板编辑器。

交换 divi 标头

WordPress divi主题

2.在同一节中创建两个标题

修改部分

浆纱

进入模板编辑器后,您会注意到一个部分。 打开截面设置并确保截面宽度为“100%”。

交换 divi 标头

间距

然后,转到间距设置并删除所有默认的顶部和底部填充。

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

交换 divi 标头

盒子阴影

我们也使用了一个微妙的盒子阴影。

  • 盒子阴影垂直位置:15px
  • 阴影颜色:rgba(0,0,0,0.06)

交换 divi 标头

位置

最后但并非最不重要的一点是,我们将使用高级选项卡中的位置设置使该部分粘在页面的顶部中心。

  • 位置:固定
  • 位置:顶部中心

交换 divi 标头

添加行标题 #1

立柱结构

我们将创建的两个标题都将属于同一部分。 我们将为每个标题使用单独的行。 使用以下列结构添加第一行标题:

交换 divi 标头

fiverr建站WordPress程序员

背景颜色

尚未添加任何模块,打开行设置并更改背景颜色。

  • 背景颜色:#000000

交换 divi 标头

浆纱

同时修改大小设置。

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

交换 divi 标头

间距

然后,转到间距设置并删除所有默认的顶部和底部填充。

独立站选品工具
  • 顶部填充:0px
  • 底部填充:0px

交换 divi 标头

主要元素

通过向行的主元素添加两行 CSS 代码来完成行设置。 此 CSS 代码将帮助我们对齐所有列内容。

display: flex;
align-items: center;

交换 divi 标头

将图像模块添加到第 1 列

上传图片

是时候添加模块了,从第 1 列中的图像模块开始。上传您选择的徽标。

交换 divi 标头

高质量外链购买

结盟

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

交换 divi 标头

将菜单模块添加到第 2 列

选择菜单

在第二列中,我们唯一需要的模块是菜单模块。 选择您选择的菜单。

交换 divi 标头

删除背景颜色

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

JasperAI 10000字免费额度试用

交换 divi 标头

布局

转到设计选项卡并相应地更改布局:

交换 divi 标头

菜单文字设置

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

  • 菜单字体:Roboto
  • 菜单字体粗细:粗体
  • 菜单文本颜色:#ffffff(桌面)、#000000(平板电脑和手机)
  • 菜单文字大小:18px

交换 divi 标头

WordPress备份工具updrafplus

下拉菜单文本设置

接下来,我们将在下拉菜单文本设置中更改下拉菜单行颜色。

  • 下拉菜单行颜色:#000000

交换 divi 标头

图标设置

我们还更改了汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#ffffff

交换 divi 标头

间距

通过在较小的屏幕尺寸上添加一些自定义左右填充来完成模块设置。

  • 左填充:30 像素(仅限平板电脑和手机)
  • 右侧内边距:30 像素(仅限平板电脑和手机)

交换 divi 标头

将社交媒体关注模块添加到第 3 列

添加选择的社交网络

在最后一列中,我们唯一需要的模块是社交媒体关注模块。 添加您选择的社交网络。

交换 divi 标头

个人社交网络背景颜色

然后,分别打开每个社交网络并将背景颜色更改为白色。

  • 背景颜色:#FFFFFF

交换 divi 标头

交换 divi 标头

结盟

返回模块的常规设置并更改模块对齐方式。

交换 divi 标头

图标设置

也修改图标颜色。

交换 divi 标头

边界

并通过添加一些边框半径来完成模块设置。

交换 divi 标头

添加行标题 #2

立柱结构

进入第二个头球! 使用以下列结构添加新行:

交换 divi 标头

浆纱

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

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

交换 divi 标头

间距

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

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

交换 divi 标头

主要元素

然后,在行的主元素中使用两行 CSS 代码对齐所有列内容。

display: flex;
align-items: center;

交换 divi 标头

第 3 列背景颜色

并通过打开第 3 列设置并使用背景颜色来完成行设置。

  • 背景颜色:#0042c9

交换 divi 标头

将图像模块添加到第 1 列

上传图片

在第 1 列中,我们需要的唯一模块是图像模块。 上传您选择的徽标。

交换 divi 标头

结盟

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

交换 divi 标头

克隆菜单模块并放置在第 2 行标题的第 2 列中

克隆上一行中使用的菜单模块并将副本放在第二行的中间列中。

交换 divi 标头

修改菜单文本设置

打开复制的菜单模块并更改菜单文本颜色。

交换 divi 标头

修改下拉菜单文本设置

修改下拉菜单文本设置。

  • 下拉菜单行颜色:#ffc21d

交换 divi 标头

修改图标设置

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

  • 汉堡菜单图标颜色:#0042c9

交换 divi 标头

将按钮模块添加到第 3 列

添加副本

在该行的最后一列中,我们唯一需要的模块是一个按钮模块。 输入您选择的一些副本。

交换 divi 标头

结盟

接下来修改按钮对齐方式。

交换 divi 标头

按钮设置

然后,按如下方式设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:20px(桌面)、18px(平板电脑)、15px(手机)
  • 按钮文字颜色:#ffffff
  • 按钮边框宽度:0px

交换 divi 标头

  • 按钮字体:Roboto
  • 按钮字体粗细:粗体

交换 divi 标头

间距

并通过在不同的屏幕尺寸上添加一些自定义填充来完成模块设置。

  • 上边距:33px(桌面)、35px(平板电脑)、38px(手机)
  • 底部填充:33px(桌面)、35px(平板电脑)、38px(手机)

交换 divi 标头

2. 添加 CSS 类

部分

一旦您添加了所有模块并设置了样式,就该添加我们将在 JQuery 代码中使用的 CSS 类了。 首先,打开部分设置并使用以下 CSS 类:

  • CSS 类:标题部分

交换 divi 标头

行标题 #1

然后,打开第一行标题并使用以下 CSS 类:

交换 divi 标头

行标题 #2

也打开第二行。 使用以下 CSS 类:

交换 divi 标头

3.添加JQuery & CSS代码

将代码模块添加到第一行的第三列

一旦所有 CSS 类都到位,就该添加代码了。 在您的部分中的任何位置添加一个新的代码模块。 我们将它放在第一行的第三列。

交换 divi 标头

添加 JQuery 代码(脚本标签之间)

然后,添加以下几行 CSS 代码 正如您在下面的打印屏幕中看到的那样:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

交换 divi 标头

添加 CSS 代码(样式标签之间)

添加以下 CSS 代码 样式标签之间 还有:

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

交换 divi 标头

4. 保存主题生成器更改并查看结果

此时,唯一要做的就是保存所有主题构建器更改并在您的网站上查看结果!

交换 divi 标头

交换 divi 标头

预览

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

桌面

交换 divi 标头

移动的

交换 divi 标头

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的主题构建器、Divi 元素和一些额外的 JQuery 和 CSS 代码在滚动时将 Divi 标题换成另一个标题。 我们还在页面容器顶部自动生成了一些空间,以防止固定标题与页面内容重叠。 您还可以免费下载交换 Divi 标头模板 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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