如何在 Divi 中为自定义全局标题设计内联登录表单

为您的标题创建内联登录表单可以极大地提升用户体验。 它们非常适合会员网站和在线商店，因为它使用户可以在任何时间或在网站的任何页面上轻松登录。 在本教程中，我们将向您展示如何为自定义标题用户 Divi Theme Builder 设计内联登录表单。 为此，我们将构建一个简单的响应式全局标题，然后使用 Divi 的登录模块在标题的右上角设计一个紧凑的内联登录表单。 该构建确实需要一些自定义 CSS，但是一旦一切就绪，就可以轻松自定义内联登录表单以使用 Divi 的内置设计选项轻松匹配任何标题设计。

让我们开始吧！

抢先看

这是我们将在本教程中构建的带有内联登录表单的自定义标头的快速浏览。

这是平板电脑和手机显示屏上的内联登录表单。

这是用户登录时将显示的消息和“注销”链接。

免费下载内联登录表单标题布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并使用 Theme Builder Portability 选项将 json 文件之一添加到 Divi Theme Builder 中。

让我们进入教程好吗？

你需要什么开始

如果您还没有安装并激活 Divi 主题。 这几乎就是您开始所需的全部内容。 我们将使用 Divi Theme Builder 从头开始​​创建一个新的标题模板布局。

添加新的全局标题

为了让事情顺利进行，我们必须为我们的网站创建一个新的全局标题。 为此，请转到 WordPress 仪表板并导航到 Divi > Theme Builder。

在默认网站模板上，单击“添加全局标题”，然后单击“构建全局标题”。

然后选择从头开始构建的选项。

使用内联登录表单设计 Divi 全局标题

自定义部分

形成全局标题布局编辑器，您将能够完全从头开始为您的站点构建自定义标题。 首先，打开常规部分的设置并更新以下内容：

• 背景渐变左颜色：
• 背景渐变右颜色：
• 梯度方向：48度
• 填充：顶部 10 像素，底部 10 像素，左侧 20 像素，右侧 20 像素

为了使我们的自定义标题更具响应性，我们将以下自定义 CSS 添加到该部分的主元素。

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

将标题徽标添加到第一行

现在该部分已准备就绪，我们可以添加第一行。

添加行

向该部分添加一列行。

添加带有徽标图像的图像模块

在单列行中，添加一个图像模块。 这将是我们为标题添加徽标的地方。

更新图像模块图像和边距

更新图像设置如下：

• 图片：[添加徽标（约 64 像素 x 64 像素）]

• 边距：右 20px

更新行设置

在我们继续之前，打开该行的设置并更新以下内容：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：25%
• 行对齐方式：左
• 填充：0px 顶部，0px 底部

将内联登录表单添加到第二行

添加行

现在第一行已准备就绪，您会在编辑器中注意到第一行将占据左侧部分的 25%。 这基本上是我们标题徽标的指定行。 我们需要为右侧的内联登录表单和菜单创建一个部分行。

将具有一列结构的第二行添加到该部分。

添加登录表单

在单列行内，添加一个登录模块。

删除默认内容

在登录设置下，删除模拟标题和正文内容。

添加登录表单自定义类和 CSS

在我们深入了解内联登录表单的设计之前，让我们首先将自定义 CSS 和 CSS 类添加到登录模块。 这将使我们能够在使用 Divi 的内置选项对表单进行最终设计之前获得表单的基本内联结构。

在高级选项卡下，添加以下 CSS 类：

• CSS 类：header-login-form

将以下自定义 CSS 添加到登录描述 CSS 框中：

margin-bottom: 0px !important

接下来将以下自定义 CSS 添加到登录表单 CSS 框中：

width: 100%;

将以下自定义 CSS 添加到登录字段 CSS 框中：

padding: 5px 4% !important

将自定义 CSS 添加到页眉布局设置

由于我们已将自定义 CSS 类添加到登录表单模块，因此我们可以添加仅针对该特定登录表单的自定义 CSS。

打开标题布局设置并添加以下自定义 CSS：

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

此 CSS 将使登录字段和按钮显示内联（水平），隐藏“忘记密码？” 链接，并在字段之间添加一点边距。

行设置

在我们对内联登录表单进行最后修改之前，让我们更新行设置，如下所示：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 行对齐：右
• 填充：0px 顶部，0px 底部

登录表单设计设置

现在我们准备更新登录表单设置。 打开登录表单模块设置并更新以下内容：

• 使用背景颜色：否

字段和链接文本

• 字段背景：颜色：rgba(255,255,255,0.2)
• 字段文本颜色：#ffffff
• 字段字体：Lato
• 字段文本大小：14px
• 文字对齐：右
• 链接字体：Lato
• 链接字体样式：下划线
• 链接文字颜色：#ff3190

按钮设计

• 按钮文字大小：15px
• 按钮背景颜色：#ff3190
• 按钮边框宽度：0px
• 按钮字体：Lato
• 按钮填充：顶部 2px，底部 2px
• 边距：底部 15px
• 填充：0px 顶部，0px 底部，0px 左，0px 右

将菜单添加到第二行

菜单模块

使用我们的内联登录表单，我们可以直接在它下面添加菜单。

在登录表单模块下添加菜单模块。

菜单模块设置

更新菜单设置如下：

• 背景颜色：rgba(0,0,0,0)
• 菜单字体：Lato
• 菜单字体粗细：粗体
• 菜单文字颜色：#ffffff
• 菜单文字大小：16px
• 文字对齐：右
• 下拉菜单背景颜色：#ffffff
• 下拉菜单行颜色：rgba(0,0,0,0)
• 下拉菜单文本颜色：#000000
• 移动菜单背景颜色：#ffffff
• 移动菜单文本颜色：#000000
• 购物车图标颜色：#ffffff
• 搜索图标颜色：#ffffff
• 汉堡菜单图标颜色：#ffffff

保存内联登录表单标题

在退出标题布局编辑器之前，请确保保存布局。

然后也保存主题生成器设置。

最终结果

就是这样！

现在让我们看看最终的结果。 要查看最终结果，只需访问您网站上的一个页面。

这是桌面显示器上的标题。

这是平板电脑显示屏上的内联登录表单标题。

这是手机显示屏上的内联登录表单。 还要注意移动菜单。

这是用户登录后将看到的内容。

最后的想法

这个带有内联登录表单的自定义全局标题对于任何会员网站或在线商店肯定会派上用场。 只需要一点点自定义 CSS，我们就能够将 Divi 的登录模块转换成一个优雅的内联登录表单，它可以很好地放在任何网站的标题中。 希望这对您的下一个项目有用。

我期待在评论中收到您的来信。

干杯!