
我们开始吧!
预览
在我们开始本教程之前,让我们快速查看不同屏幕大小的结果。
PC端
手机端
1.设置主菜单
从在WordPress网站的外观设置中创建菜单开始。
2.转到主题生成器选项
然后,导航到Divi主题选项中的主题生成器。在那里,你会注意到一个空的默认网站模板。
3.添加和构建全局标头
默认的网站模板是您可以开始创建自定义全局页眉、全局正文和全局页脚的地方。单击“AddGlobalHeader”,然后单击“BuildGlobalHeader”继续进行该过程。
节设置
上浆
打开页面上可以注意到的部分,移动到“设计”选项卡,并在不同屏幕大小之间更改宽度。
- 宽度:100%
- 最大宽度:1280 px(桌面),100%(平板和电话)
间距
删除所有默认的顶部和底部填充下一步。
- 顶部填充:0 px
- 底部填充物:0 px
边界
将一些边框半径添加到下一节的左下角和右角。
- 左下角:50 px
- 右下角:50 px
盒影
我们还添加了一个微妙的盒子阴影。
- 盒影模糊强度:60 px
- 阴影颜色:RGBA(0,0,0,0.13)
能见度
然后,转到高级选项卡并隐藏溢出。增加z索引,这将有助于确保该部分保持在所有页面内容的顶部。
- 水平溢出:可见
- 垂直溢出:可见
- Z指数:99999
4.添加标头部分
现在我们已经完成了常规部分的设置,我们可以开始添加行了。总之,我们需要两行;一行是专用于标头的,另一行是允许菜单项显示的。我们将从标题开始,使用以下列结构添加一个新行:
行设置
背景色
在不向行添加任何模块的情况下,打开行设置并更改背景色。
- 背景色:#38383f
上浆
下一步修改行的大小设置。
- 使用自定义水槽宽度:是
- 排水沟宽度:1
- 宽度:100%
- 最大宽度:100%
显示
并通过在行的主元素中添加一行CSS代码,确保列在较小屏幕大小上彼此相邻。
01
|
display : flex ; |
将图像模块添加到第1列
上传标志
一旦完成了行设置,就该开始添加模块了。将图像模块添加到第1列并上载您的徽标。
对齐
继续到“设计”选项卡,确保您使用的是左图像对齐。
- 图像对齐:左
上浆
修改模块的宽度。
- 宽度:100 px
间距
并在不同屏幕大小上添加一些自定义空白值。
- 最高保证金:5%
- 左边框:50 px(桌面),20 px(平板电脑和电话)
将社会媒体跟踪模块添加到第2栏
添加社会网络
继续到第二栏。在那里,我们需要一个社交媒体跟踪模块。添加你选择的社交网络。
社交网络背景色彩
然后,分别打开每个社交网络,并将背景颜色转换为一个完全透明的颜色。
- 背景颜色:RGBA(0,0,0,0)
对齐
回到模块的正常设置,然后更改整个模块对齐方式。
- 模块对齐:中心
图标
也修改图标设置。
- 图标颜色:#ffffff
- 使用自定义图标大小:是
- 图标字体大小:16 px(桌面和平板电脑),12 px(电话)
间距
再加上一些最上面的空白处。
- 最高保证金:10%
将按钮模块添加到第3列
添加副本
移到第三列,并添加一个按钮模块,其中包含您选择的一些副本。
对齐
更改“设计”选项卡中的按钮对齐方式。
- 按钮对齐:右
按钮设置
相应地设置按钮设置的样式:
- 为按钮使用自定义样式:是
- 按钮文本大小:12 px(桌面),10 px(平板电脑),8 px(电话)
- 按钮文本颜色:#ffffff
- 按钮背景颜色:#ffae 25
- 按钮边框宽度:0 px
- 按钮边框半径:0px
- 按钮字母间距:5 px(桌面),3 px(平板和电话)
- 按钮字体:打开SANS
- 按钮字体重量:粗体
- 按钮字体样式:大写
间距
并在不同屏幕大小上添加一些自定义填充值。
- 顶部填充物:20 px
- 底垫:20 px
- 左垫:50 px(桌面和平板电脑),15 px(电话)
- 右垫:50 px(桌面和平板电脑),15 px(电话)
5.将新行奉献给菜单栏
一旦完成了专用于全局标题的行,就可以使用以下列结构在其下面添加另一行:
行设置
上浆
在不添加任何模块的情况下,打开行设置并更改“设计”选项卡中的大小设置。
- 使用自定义水槽宽度:是
- 排水沟宽度:1
- 宽度:100%
- 最大宽度:100%
间距
删除所有默认的顶部和底部填充下一步。
- 顶部填充:0 px
- 底部填充物:0 px
将菜单模块添加到列
选择菜单
然后,向列中添加一个菜单模块,并选择在本教程的第一部分中创建的菜单。
布局
移至“设计”选项卡并按以下方式更改布局设置:
- 风格:居中
- 下拉菜单方向:向下
链接
修改设计选项卡中的活动链接颜色。
- 活动链接颜色:#ffae 25
下拉菜单
对下拉菜单设置中的下拉菜单线颜色也做同样的操作。
- 下拉菜单线颜色:#ffae 25
图标
修改下面的汉堡包菜单图标颜色。
- 汉堡包菜单图标颜色:#ffae 25
菜单文本
以及菜单文本设置。
- 菜单字体:Prata
- 菜单文本颜色:#000000
6.使标题和菜单栏保持在顶部
打开区段设置
一旦你完成了第二行,唯一要做的就是让这个部分粘在我们的页面和帖子的顶部。为此,我们将再次打开节设置。
将自定义CSS添加到主元素
然后,我们将转到高级选项卡,并在该部分的主元素中添加几行CSS代码。
01
02
03
04
|
position : fixed ; top : 0 ; left : 0 ; right : 0 ; |
7.保存全局标题和主题生成器选项
完成整个全局标头设计后,请确保在退出模板布局之前保存设计。一旦你在模板布局之外,保存你的整个主题建设者的变化,你就完成了!
预览
现在我们已经完成了所有的步骤,让我们最后看看不同屏幕大小的结果。
PC端
手机端
更多DIVI主题教程,尽在看小程序网