如何将下拉登录表单添加到您的 Divi 标题

如果您正在构建会员网站，则非常需要考虑登录体验。 当然，您可以允许访问者使用默认的 WordPress 登录页面，但您也可以通过在标题中包含登录表单来使访问更容易。 在这种情况下，您需要在点击时触发登录表单，以便节省标题中的空间。 这正是我们将在今天的 Divi 教程中向您展示的内容。 我们将从头开始构建一个全局标题，我们将包含一个下拉登录表单。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载全局标题模板

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1. 创建新的全局标题模板

转到 Divi 主题生成器

首先转到 WordPress 网站后端的 Divi Theme Builder。 在那里，单击“添加全局标题”。

添加新的全局标题

将出现一个下拉菜单。 要从头开始构建，请继续选择“Build Global Header”。

2. 构建标题设计

添加第 1 节

背景图片

进入模板编辑器后，您会注意到那里已经有一个部分。 打开部分设置并上传背景图片或使用背景颜色。

间距

转到该部分的设计选项卡，然后修改顶部和底部填充。

• 顶部填充：10px
• 底部填充：10px

向节添加行

列结构

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

浆纱

还没有添加模块，打开行设置并修改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 宽度：
  • 台式机：80%
  • 平板电脑和手机：95%
• 最大宽度：2580px

间距

接下来修改填充值。

• 顶部填充：0px
• 底部填充：0px
• 左填充：1%
• 右填充：1%

主要元素 CSS

为了自动垂直对齐列，我们将以下 CSS 代码行添加到高级选项卡中行的主要元素：

display: flex;
justify-content: center;
align-items: center;

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

添加社交网络

是时候添加模块了，从第 1 列中的社交媒体关注模块开始。添加您选择的社交网络。

单独更改每个社交网络的背景颜色

然后，将每个社交网络的背景颜色分别更改为白色。

• 背景颜色：#ffffff

图标设置

返回常规模块设置并更改设计选项卡中的图标颜色。

• 图标颜色：#141414

边界

接下来在边框设置中应用一些圆角设置。

• 所有角落：100px

将按钮模块添加到第 2 列

添加副本

在第 2 列中，我们唯一需要的模块是按钮模块。 添加一些您选择的副本。

按钮对齐

接下来更改模块的对齐方式。

• 按钮对齐：右

按钮设置

然后，设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：12px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#ff4700
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字母间距：2px

• 按钮字体：Prata
• 按钮字体样式：大写

间距

并通过将以下填充值应用于间距设置来完成按钮设置：

• 顶部填充：16px
• 底部填充：16px
• 左填充：24px
• 右填充：24px

添加第 2 节

背景颜色

在上一个部分的正下方添加另一个部分，并为其使用以下背景颜色：

• 背景颜色：#fff4ef

间距

接下来在设计选项卡中删除所有默认的顶部和底部填充。

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

添加第 1 行

列结构

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

浆纱

在不添加模块的情况下，打开行设置并按如下方式更改大小设置：

• 均衡柱高：是
• 宽度：
  • 台式机：80%
  • 平板电脑和手机：95%
• 最大宽度：2580px

间距

也修改间距设置中的填充值。

• 顶部填充：5px
• 底部填充：5px
• 左填充：2%
• 右填充：2%

第 2 列设置

背景颜色

然后，打开第 2 列设置并仅在平板电脑和手机上应用背景颜色。

• 桌面： /
• 平板电脑和手机：#f2e8e3

间距

我们还在较小的屏幕尺寸上添加了一些顶部和底部填充。

• 顶部填充：
  • 平板电脑和手机：25px
• 底部填充：
  • 平板电脑和手机：25px

将菜单模块添加到第 1 列

选择菜单

接下来，我们将向该行添加一个菜单模块。 选择您选择的菜单。

上传标志

将徽标上传到您的菜单模块。

删除背景颜色

然后，删除菜单的背景颜色。

菜单文字设置

转到模块的设计选项卡并按如下方式设置菜单文本的样式：

• 菜单字体：Prata
• 菜单文字颜色：#111821
• 菜单文字大小：18px
• 菜单行高：1.4em
• 文本对齐：右

下拉菜单设置

也更改下拉菜单设置。

• 下拉菜单背景颜色：#fff4ef
• 下拉菜单行颜色：#191919
• 下拉菜单文本颜色：#191919
• 移动菜单背景颜色：#fff4ef
• 移动菜单文本颜色：#191919

图标设置

然后，在图标设置中更改图标颜色。

• 购物车图标颜色：#191919
• 搜索图标颜色：#191919
• 汉堡菜单图标颜色：#191919

浆纱

并通过应用以下大小设置来完成模块设置：

• 标志最大宽度：50px
• 宽度：100%

3. 添加下拉登录表单和点击功能

将 Blurb 模块添加到第 2 列

添加标题

现在我们的标题的基础已经建立，我们可以专注于创建登录下拉触发器和表单。 我们需要的第一件事是我们行的第 2 列中的 Blurb 模块。 在这里，我们将添加一个标题。

选择图标

接下来，我们将选择一个图标。

图标设置

转到模块的设计选项卡并按如下方式更改图标设置：

• 图标颜色：#ffffff
• 圆形图标：是
• 圆圈颜色：#ff4700
• 图像/图标放置：左

标题文字设置

然后，设置标题文本的样式。

• 标题字体：Lato
• 标题字体粗细：重
• 标题字体样式：大写
• 标题文字大小：12px
• 标题字母间距：3px

动画片

我们还在动画设置中删除了此模块的默认动画。

• 图像/图标动画：无动画

模糊标题 CSS

我们将为高级选项卡中的简介标题添加一些上边距。

margin-top: 10px;

位置

最后但并非最不重要的一点是，我们将在位置设置中重新定位模块。

• 位置：绝对
• 地点：中心

将第 2 行添加到第 2 节

列结构

要添加登录表单，我们将在前一行下方使用一个新行，其列结构如下：

浆纱

在不添加模块的情况下，打开行设置并按如下方式更改大小设置：

• 均衡柱高：是
• 最大宽度：2580px

间距

也修改填充值。

• 顶部填充：0px
• 底部填充：0px
• 左填充：2%
• 右填充：2%

将登录模块添加到第 2 列

删除内容

将登录模块添加到第 2 列。确保内容框为空。

背景颜色

接下来更改背景颜色。

• 背景颜色：#ff4700

字段设置

转到设计选项卡并设置字段样式。

• 字段背景颜色：rgba(0,0,0,0)
• 字段文本颜色：rgba(255,255,255,0.73)
• 字段左填充：0px
• 字段右填充：0px
• 字段字体：Lato
• 字段文本大小：16px

• 字段线高：1.8em
• 所有角：0px
• 字段底部边框宽度：1px
• 字段底部边框颜色：#ffffff

按钮设置

然后，修改按钮设置如下：

• 为按钮使用自定义样式：是
• 按钮文字大小：12px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#141414
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字母间距：2px
• 按钮字体：Prata

• 按钮字体样式：大写
• 按钮顶部填充：16px
• 按钮底部填充：16px

浆纱

确保宽度也是“100%”。

• 宽度：100%

登录按钮 CSS

将一些上边距应用于高级选项卡中的登录按钮 CSS 框。

margin-top: 30px;

位置

并相应地重新定位模块：

• 位置：绝对
• 位置：右上角
• 垂直偏移：1px

将 CSS ID 添加到第 1 行的 Blurb 模块

现在我们拥有了所有需要的元素，我们可以专注于点击功能。 首先，打开 Blurb 模块并添加以下 CSS ID：

• CSS ID：divi-login-toggle

将 CSS ID 添加到第 2 行的登录模块

接下来打开登录模块并应用以下 CSS ID：

• CSS ID：divi-login-form

在登录模块下方添加代码模块

然后，在登录模块正下方添加一个代码模块。

添加样式和脚本标签

为了创建点击功能，我们将使用一些 CSS 和 JQuery 代码。 为了准备该代码，我们将添加样式标签（用于 CSS 代码）和脚本标签（用于 JQuery 代码）。

在样式标签之间插入 CSS 代码

将以下 CSS 代码行放在样式标记之间：

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

在脚本标签之间插入 JQuery

以及脚本标签之间的以下代码：

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. 保存 Divi 主题生成器更改

现在一切就绪，唯一要做的就是保存所有 Divi Theme Builder 更改并查看结果！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何在构建会员网站时利用标题发挥创意。 更具体地说，我们向您展示了如何包含一个下拉登录表单，让您的访问者无需转到 WordPress 登录页面即可登录他们的帐户。 您还可以免费下载标头模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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