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

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

19265f39eecc35
现在,主题生成器在这里,我们迫不及待地深入到新的教程,将帮助您建立您的网站从A到Z。这包括创建自定义头部使用Divi的内置选项。在本教程中,我们将重点介绍如何使用Divi的主题生成器创建全局头。一个全局标题会在你的网站上随处可见,除非你已经为该页面或帖子指定了不同的标题。

我们开始吧!

预览

在我们开始本教程之前,让我们快速查看不同屏幕大小的结果。

PC端

15cec2eaf08752

手机端

1eea39f55c4929

教程步骤:

1.设置主菜单

从在WordPress网站的外观设置中创建菜单开始。

1cfa257e5b5b4e

2.转到主题生成器选项

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

12ee53dc5ce5f3

3.添加和构建全局标头

默认的网站模板是您可以开始创建自定义全局页眉、全局正文和全局页脚的地方。单击“AddGlobalHeader”,然后单击“BuildGlobalHeader”继续进行该过程。

1d8dd5e5fe2afc

节设置

上浆

打开页面上可以注意到的部分,移动到“设计”选项卡,并在不同屏幕大小之间更改宽度。

  • 宽度:100%
  • 最大宽度:1280 px(桌面),100%(平板和电话)

1ee7fd9f2502d5

间距

删除所有默认的顶部和底部填充下一步。

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

1ed5e5c6d23af4

边界

将一些边框半径添加到下一节的左下角和右角。

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

1ec25ed347e8f5

盒影

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

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

1a35ed5ef2d6d7

能见度

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

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

1cdf525a7e03ec

4.添加标头部分

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

1d5f29e33afe35

行设置

背景色

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

  • 背景色:#38383f

1552dfeecae5dc

上浆

下一步修改行的大小设置。

  • 使用自定义水槽宽度:是
  • 排水沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

1569ec4fde5e92

显示

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

01
display: flex;

15dade50ee29ff

将图像模块添加到第1列

上传标志

一旦完成了行设置,就该开始添加模块了。将图像模块添加到第1列并上载您的徽标。

13dffe52ef651e

对齐

继续到“设计”选项卡,确保您使用的是左图像对齐。

  • 图像对齐:左

1af550ab49ee2e

上浆

修改模块的宽度。

  • 宽度:100 px

1e2ff5c40250ee

间距

并在不同屏幕大小上添加一些自定义空白值。

  • 最高保证金:5%
  • 左边框:50 px(桌面),20 px(平板电脑和电话)

1354afeeae3552

将社会媒体跟踪模块添加到第2栏

添加社会网络

继续到第二栏。在那里,我们需要一个社交媒体跟踪模块。添加你选择的社交网络。

165225ee5fee2d

社交网络背景色彩

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

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

15ee27b70755ef

对齐

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

  • 模块对齐:中心

12e485f437e55e

图标

也修改图标设置。

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

1cf5e9ebc2eb5b

间距

再加上一些最上面的空白处。

  • 最高保证金:10%

15f726fb4ee5be

将按钮模块添加到第3列

添加副本

移到第三列,并添加一个按钮模块,其中包含您选择的一些副本。

165df59d27ee8e

对齐

更改“设计”选项卡中的按钮对齐方式。

  • 按钮对齐:右

12e1559effa4ee

按钮设置

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

  • 为按钮使用自定义样式:是
  • 按钮文本大小:12 px(桌面),10 px(平板电脑),8 px(电话)
  • 按钮文本颜色:#ffffff
  • 按钮背景颜色:#ffae 25
  • 按钮边框宽度:0 px

1efb509cf22e58

  • 按钮边框半径:0px
  • 按钮字母间距:5 px(桌面),3 px(平板和电话)
  • 按钮字体:打开SANS
  • 按钮字体重量:粗体
  • 按钮字体样式:大写

14e5f32ef2b851

间距

并在不同屏幕大小上添加一些自定义填充值。

  • 顶部填充物:20 px
  • 底垫:20 px
  • 左垫:50 px(桌面和平板电脑),15 px(电话)
  • 右垫:50 px(桌面和平板电脑),15 px(电话)

15dfe78f255e75

5.将新行奉献给菜单栏

一旦完成了专用于全局标题的行,就可以使用以下列结构在其下面添加另一行:

1e125623ecfe5f

行设置

上浆

在不添加任何模块的情况下,打开行设置并更改“设计”选项卡中的大小设置。

  • 使用自定义水槽宽度:是
  • 排水沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

1803f52f557e5e

间距

删除所有默认的顶部和底部填充下一步。

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

1fa9e5fe5ad527

将菜单模块添加到列

选择菜单

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

12ce5f2ab5fe13

布局

移至“设计”选项卡并按以下方式更改布局设置:

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

1f5f982fe8c55e

链接

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

  • 活动链接颜色:#ffae 25

1d51fe5ef265ee

下拉菜单

对下拉菜单设置中的下拉菜单线颜色也做同样的操作。

  • 下拉菜单线颜色:#ffae 25

1e55276f4febdf

图标

修改下面的汉堡包菜单图标颜色。

  • 汉堡包菜单图标颜色:#ffae 25

104f8d1e36552e

菜单文本

以及菜单文本设置。

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

1f734e4e50e062

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

打开区段设置

一旦你完成了第二行,唯一要做的就是让这个部分粘在我们的页面和帖子的顶部。为此,我们将再次打开节设置。

107e49e0faf625

将自定义CSS添加到主元素

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

01
02
03
04
position: fixed;
top: 0;
left: 0;
right: 0;

1821450efabe6d

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

完成整个全局标头设计后,请确保在退出模板布局之前保存设计。一旦你在模板布局之外,保存你的整个主题建设者的变化,你就完成了!

1c0feee06b8562

15fa3eee326f09

预览

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

PC端

15cec2eaf08752

手机端

1eea39f55c4929

更多DIVI主题教程,尽在看小程序网

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

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

2019-12-23 22:41:32

Divi主题教程精品教程

【DIVI教程】如何在Divi中设置页面模板的添加侧边弹窗

2020-1-2 15:51:37

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

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