WordPress divi主题

如何使用 Divi 的位置选项创建固定页眉

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

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

使用 Divi 的新位置选项,将您的标题变成固定标题比以往任何时候都容易。 只需单击几下,您就可以将静态自定义标题变成一个固定标题,在访问者停留在您的网站期间始终跟踪他们。 在本教程中,我们将向您展示创建固定 Divi 标头所需遵循的一般步骤。 这是我们将遵循的顺序:

google广告开户

  1. 转到 Divi Theme Builder 并开始构建全局标题
  2. 进入全局标题模板后,使用包含多行的单个部分来创建包含所有需要元素的标题
  3. 使用 Divi 的内置部分位置选项,使整个部分保持固定在顶部
  4. 创建一个自定义正文模板并添加一些上边距以为固定的 Divi 标题创建容器空间
  5. 保存所有 Divi Theme Builder 更改并在您的网站上查看结果

您还可以免费下载默认网站模板的 JSON 文件! 让我们开始吧。

预览

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

桌面

固定的divi标头

移动的

固定的divi标头

免费下载全球网站模板

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

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

转到 Divi 主题生成器

首先转到 Divi Theme Builder。 到达那里后,单击“添加全局标题”。

固定的divi标头

构建全局标题

并通过选择“构建全局标题”从头开始构建标题。

固定的divi标头

WordPress divi主题

2.使用常规部分构建全角标题

部分设置

背景颜色

进入模板编辑器后,您会注意到一个部分。 打开该部分并为其使用白色背景颜色。

  • 背景颜色:#FFFFFF

固定的divi标头

间距

然后,转到设计选项卡并删除所有默认的顶部和底部填充。

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

固定的divi标头

盒子阴影

也添加一个盒子阴影。

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

固定的divi标头

添加第 1 行

立柱结构

继续使用以下列结构向该部分添加新行:

固定的divi标头

背景颜色

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

  • 背景颜色:#ff3314

固定的divi标头

fiverr建站WordPress程序员

浆纱

然后,转到该行的设计选项卡并修改尺寸设置,如下所示:

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

固定的divi标头

间距

也删除所有默认的顶部和底部填充。

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

固定的divi标头

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

添加选择的社交网络

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

独立站选品工具

固定的divi标头

分别重置每个社交网络的项目样式

继续单独重置每个社交网络的项目样式。

固定的divi标头

结盟

然后,转到模块的设计选项卡并更改模块对齐方式。

固定的divi标头

高质量外链购买

图标设置

接下来修改图标颜色。

固定的divi标头

间距

并通过添加一些上边距来完成模块的设置。

固定的divi标头

添加第 2 行

立柱结构

到下一行! 使用以下列结构:

JasperAI 10000字免费额度试用

固定的divi标头

浆纱

在不添加任何模块的情况下,打开行设置并允许行占据整个部分的宽度。

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

固定的divi标头

间距

也删除所有默认的顶部和底部填充。

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

固定的divi标头

WordPress备份工具updrafplus

主要元素

为了确保所有列内容在较小的屏幕尺寸上彼此相邻,我们将在行的主要元素中添加一行 CSS 代码。

display: flex;

固定的divi标头

第 1 列边框

并通过打开第1列设置并添加右边框来完成行设置。

  • 右边框宽度:2px
  • 右边框颜色:#ffc600

固定的divi标头

将图像模块添加到第 1 列

上传徽标

是时候开始添加模块了。 在第 1 列中,我们需要的唯一模块是图像模块。 上传您的徽标。

固定的divi标头

结盟

然后,转到模块的设计选项卡并更改图像对齐方式。

固定的divi标头

浆纱

接下来修改不同屏幕尺寸的宽度。

  • 宽度:50 像素(桌面)、30 像素(平板电脑和手机)

固定的divi标头

间距

并通过在不同的屏幕尺寸上添加一些自定义的顶部和底部边距来完成模块的设置。

  • 在图像下方显示空间:否
  • 最高边距:1vw(台式机)、2vw(平板电脑)、3vw(手机)
  • 底部边距:1vw(桌面)、2vw(平板电脑)、3vw(手机)

固定的divi标头

将菜单模块添加到第 2 列

选择菜单

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

固定的divi标头

删除背景颜色

然后,移除模块的背景颜色。

固定的divi标头

布局

转到模块的设计选项卡并更改布局设置。

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

固定的divi标头

菜单文字设置

也修改菜单文本设置。

  • 菜单字体:PT Serif
  • 菜单文字颜色:#333333
  • 菜单文字大小:18px

固定的divi标头

下拉菜单文本设置

连同下拉菜单文本设置。

  • 下拉菜单背景颜色:#ffffff
  • 下拉菜单行颜色:#ffc600

固定的divi标头

图标

接下来我们将在图标设置中更改汉堡菜单图标颜色。

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

固定的divi标头

间距

我们将通过添加一些跨不同屏幕尺寸的自定义边距值来完成模块的设置。

  • 上边距:1.4vw(台式机)、2.5vw(平板电脑)、3vw(手机)
  • 底边距:1.4vw(台式机)、2.5vw(平板电脑)、3vw(手机)

固定的divi标头

将代码模块添加到第 2 列

插入移动 CSS 代码

要修改移动设备上的下拉菜单(让它占据整个屏幕宽度),我们需要几行 CSS 代码。 我们将把这个 CSS 代码添加到菜单模块正下方的新代码模块中。

<style>
.et_mobile_menu {
margin-top: 5%;
width: 210%;
margin-left: -110%;
}
</style>

固定的divi标头

3. 使用 Divi 的位置选项将部分粘贴到顶部

更改截面位置设置

一旦您完成了自定义标题的整体外观和感觉,就该将其变成固定标题了! 为此,请打开部分设置并更改位置设置,如下所示:

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

如果您想在部分和页面顶部之间留出一些空间,可以使用垂直偏移选项。 或者,如果您的标题没有出现在您网站上所有页面内容的顶部,您可以增加 z 索引。

固定的divi标头

4.为页眉添加顶部空白

建立全球机构

本教程的下一步将允许您为标题添加一些顶部“容器空间”。 一旦您将元素固定,该元素的容器就会漂浮在您的页面上,而不会占用任何额外空间。 但是,如果您不希望它与某些现有页面或发布内容重叠,您可以在顶部为容器添加一些空间。 为此,请开始构建默认网站模板的全局正文。

固定的divi标头

部分设置

间距

进入模板编辑器后,您会注意到一个部分。 打开该部分并删除所有默认的顶部和底部填充。

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

固定的divi标头

添加新行

立柱结构

继续使用以下列结构添加新行:

固定的divi标头

浆纱

打开行设置,让行占据整个部分的宽度。

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

固定的divi标头

间距

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

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

固定的divi标头

将帖子内容模块添加到列

为了让所有动态内容显示出来,取决于访问者所在的帖子或页面,我们将使用帖子内容模块。

固定的divi标头

将顶部边距添加到部分以放置标题

最后但同样重要的是,要为固定的 Divi 标题创建顶部空间,我们将再次打开部分设置并添加一些顶部边距。 您可以随意调整此值。

固定的divi标头

4.保存主题生成器更改

完成全局标题和全局正文后,您可以保存所有 Theme Builder 更改并在您的网站上查看结果!

固定的divi标头

预览

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

桌面

固定的divi标头

移动的

固定的divi标头

最后的想法

在这篇文章中,我们向您展示了如何使用您在 Divi Builder 本身中获得的新位置选项创建一个固定的 Divi 标头。 我们已经介绍了完成顶部固定标题的必要步骤,您可以将此技术应用于您正在构建的任何类型的网站。 您还可以免费下载默认网站的模板! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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