WordPress divi主题

如何使用 Divi 的主题生成器创建自定义全局标题

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

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

现在主题生成器就在这里,我们迫不及待地想要深入了解新教程,这些教程将帮助您从头到尾设置您的网站。这包括使用 Divi 的内置选项创建自定义标题。 在本教程中,我们将专注于使用 Divi 的 Theme Builder 创建一个全局标题。 除非您为该页面或帖子分配了不同的标题,否则全局标题将显示在您网站的任何位置。

google广告开户

让我们开始吧!

预览

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

桌面

全局标头

移动的

全局标头

免费下载自定义页眉设计

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

订阅我们的 Youtube 频道

1. 设置您的主菜单

首先在 WordPress 网站的外观设置中创建菜单。

全局标头

WordPress divi主题

2. 转到主题生成器选项

然后,导航到 Divi 的主题选项中的主题生成器。 到达那里后,您会注意到一个空的默认网站模板。

全局标头

3.添加和构建全局标题

默认网站模板是您可以开始创建自定义全局页眉、全局正文和全局页脚的地方。 单击“添加全局标题”并继续单击“构建全局标题”以开始该过程。

全局标头

部分设置

浆纱

打开您可以在页面上注意到的部分,转到设计选项卡并更改不同屏幕尺寸的宽度。

  • 宽度:100%
  • 最大宽度:1280 像素(桌面),100%(平板电脑和手机)

全局标头

间距

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

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

全局标头

边界

在下一部分的左下角和右下角添加一些边框半径。

  • 左下角:50px
  • 右下:50px

全局标头

fiverr建站WordPress程序员

盒子阴影

我们还添加了一个微妙的盒子阴影。

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

全局标头

能见度

然后,转到高级选项卡并隐藏溢出。 也增加 z 索引,这将有助于确保该部分保持在所有页面内容的顶部。

  • 水平溢出:可见
  • 垂直溢出:可见
  • Z指数:99999

全局标头

4. 将新行专用于标题

现在我们已经完成了常规部分设置,我们可以开始添加行了。 总的来说,我们需要两行; 一个专用于标题,一个允许显示菜单项。 我们将从标题开始,使用以下列结构添加新行:

独立站选品工具

全局标头

行设置

背景颜色

在不向行添加任何模块的情况下,打开行设置并更改背景颜色。

  • 背景颜色:#38383f

全局标头

浆纱

接下来修改行的大小设置。

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

全局标头

高质量外链购买

展示

并通过在行的主要元素中添加一行 CSS 代码来确保列在较小的屏幕尺寸上彼此相邻。

display: flex;

全局标头

将图像模块添加到第 1 列

上传徽标

完成行设置后,就可以开始添加模块了。 将图像模块添加到第 1 列并上传您的徽标。

全局标头

结盟

转到设计选项卡并确保您使用的是左图像对齐。

JasperAI 10000字免费额度试用

全局标头

浆纱

也修改模块的宽度。

全局标头

间距

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

  • 上边距:5px
  • 左边距:50px(桌面),20px(平板电脑和手机)

全局标头

WordPress备份工具updrafplus

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

添加社交网络

到第二列。 在那里,我们需要一个社交媒体关注模块。 添加您选择的社交网络。

全局标头

社交网络背景颜色

然后,分别打开每个社交网络并将背景颜色更改为完全透明的颜色。

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

全局标头

结盟

回到模块的正常设置,然后更改整个模块对齐方式。

全局标头

图标

也修改图标设置。

  • 图标颜色:#ffffff
  • 使用自定义图标大小:是
  • 图标字体大小:16px(台式机和平板电脑),12px(手机)

全局标头

间距

并添加一些上边距。

全局标头

将按钮模块添加到第 3 列

添加副本

移动到第三列并添加一个带有您选择的副本的按钮模块。

全局标头

结盟

在设计选项卡中更改按钮对齐方式。

全局标头

按钮设置

相应地设置按钮设置样式:

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

全局标头

  • 按钮边框半径:0px
  • 按钮字母间距:5px(桌面),3px(平板电脑和手机)
  • 按钮字体:Open Sans
  • 按钮字体粗细:粗体
  • 按钮字体样式:大写

全局标头

间距

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

  • 上边距:20px
  • 底部填充:20px
  • 左填充:50px(台式机和平板电脑),15px(手机)
  • 右侧内边距:50 像素(台式机和平板电脑),15 像素(手机)

全局标头

5. 将新行专用于菜单栏

完成专用于全局标题的行后,您可以使用以下列结构在其下方添加另一行:

全局标头

行设置

浆纱

在尚未添加任何模块的情况下,打开行设置并在设计选项卡中更改尺寸设置。

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

全局标头

间距

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

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

全局标头

将菜单模块添加到列

选择菜单

然后,将菜单模块添加到该列并选择您在本教程的第一部分中创建的菜单。

全局标头

布局

转到设计选项卡并更改布局设置,如下所示:

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

全局标头

链接

修改设计选项卡中的活动链接颜色。

  • 活动链接颜色:#ffae25

全局标头

下拉式菜单

对下拉菜单设置中的下拉菜单行颜色执行相同操作。

  • 下拉菜单行颜色:#ffae25

全局标头

图标

接下来修改汉堡菜单图标颜色。

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

全局标头

菜单文字

连同菜单文本设置。

  • 菜单字体:Prata
  • 菜单文字颜色:#000000

全局标头

6. 将标题和菜单栏置顶

打开部分设置

完成第二行后,唯一要做的就是使该部分贴在我们页面和帖子的顶部。 为此,我们将再次打开部分设置。

全局标头

将自定义 CSS 添加到主元素

然后,我们将转到高级选项卡,我们将在该部分的主要元素中添加几行 CSS 代码。

position: fixed;
top: 0;
left: 0;
right: 0;

全局标头

7. 保存全局标题和主题生成器选项

完成整个全局页眉设计后,请确保在退出模板布局之前保存设计。 一旦您离开模板布局,保存整个主题构建器的更改,您就完成了!

全局标头

全局标头

预览

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

桌面

自定义标题

移动的

自定义标题

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的新主题生成器创建自定义全局标题。 本教程将展示创建漂亮的标题并将它们应用于您的整个网站或特定的自定义帖子类型是多么容易。 我们希望本教程能激发您立即开始使用 Theme Builder! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

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

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