需要为您创建一个全局标题 现场网络 与迪维?

全局标题将出现在您的任何地方 网站Web,除非您为页面或帖子分配了不同的标题。

让我们开始吧!

概观

这是我们将要设计的全局标题的预览。

配置你的主菜单

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

访问 Divi 下的 Theme Builder 选项

在选项中 Divi主题,单击主题生成器。 到达那里后,您会注意到一个 网站模板 默认。

添加并创建全局标题

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

栏目设置

浆纱

打开您将在页面上找到的部分设置,在样式选项卡中,更改不同屏幕尺寸的尺寸。

  • 最大宽度:100%
  • 最大宽度:1280px(适用于 PC 和平板电脑),100%(适用于移动设备)

间距

删除所有顶部和底部内部边距

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

边框

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

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

影盒

让我们也添加一个微妙的盒子阴影。

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

能见度

  • 水平溢出:可见
  • 垂直溢出:可见

将新行专用于标题

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

线路设置

背景设置

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

  • 背景:#38383F

浆纱

然后修改线条尺寸参数。

  • 使用自定义装订线宽度:是
  • 列间距:1
  • 最大宽度:100%
  • 最大宽度:100%

查看

现在让我们通过将这行 CSS 代码添加到主行元素来确保列在较小的屏幕上彼此相邻。

01 display: flex;

在第 1 列中添加图像模块

下载徽标

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

对准

转到样式选项卡并将图像向左对齐。

浆纱

还要修改模块的宽度。

间距

还添加自定义边距值。

使用 Divi Builder 主题创建全局标题

在第 2 列中添加社交媒体跟踪模块

添加社交网络

让我们转到第二列。 在那里,我们将需要一个社交媒体跟踪模块。 添加您选择的社交网络。 您可以根据需要添加任意数量的社交媒体。

使用 Divi Builder 主题创建全局标题

社交网络背景颜色

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

  • 背景颜色:rgba (0,0,0,0)
使用 Divi Builder 主题创建全局标题

对准

返回到正常的模块设置,然后更改模块的完全对齐方式。

图标

更改图标设置。

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

间距

添加上边距。

在第 3 列中添加 Button 模块

移动到第三列并添加一个包含您选择的文本的 Button 模块。

对准

在样式选项卡中更改按钮的对齐方式。

按钮设置

自定义按钮设置如下:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:12px(桌面)、10px(平板电脑)、8px(手机)
  • 按钮文字颜色:#ffffff
  • 背景按钮:#ffae25
  • 按钮边框宽度:0 像素
  • 边框半径按钮:0 像素
  • 按钮字母间距:5 px(桌面),3 px(平板电脑和手机)
  • 字体按钮:打开无
  • 柔光按钮:粗体字
  • 复制按钮样式:TT

间距

自定义边距值。

将新行专用于菜单栏

填写专用于全局标题的行后,您可以在下面添加另一行。

线路设置

浆纱

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

间距

然后删除所有底部和顶部边距。

将菜单模块添加到列

选择菜单

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

提供

切换到样式选项卡并更改布局设置,如下所示:

链接

还要更改样式选项卡中活动链接的颜色。

  • 活动链接颜色:#ffae25
使用 Divi Builder 主题创建全局标题

下拉菜单

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

  • 下拉行颜色:#ffae25

图标

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

菜单文字

带有菜单文本设置。

  • 菜单字体:普拉塔
  • 菜单文字颜色:#000000

使标题和菜单栏保持在顶部

打开部分设置

完成第二行后,您所要做的就是确保该部分位于我们页面和帖子的顶部。 为此,我们将再次打开部分设置。

将自定义 CSS 添加到主元素

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

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

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

完成整个全局页眉设计后,请务必在退出模板布局之前保存设计。 退出模板布局后,保存整个主题构建器更改,然后就完成了!

概观

现在我们已经完成了所有步骤,让我们最后看一下结果。

使用 Divi Builder 主题创建全局标题

结论

在本文中,我们向您展示了如何使用 Divi 的新主题生成器创建自定义全局标头。 本教程展示了创建漂亮的标题并将其应用到您的整个页面是多么容易 网站Web 或特定的自定义帖子类型。 

我们希望它可以帮助您使用 Theme Builder 自定义您的网站。

如果您有任何问题或建议,请在评论区给我们留言 评论区 下方。

...