WordPress divi主题

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

by | May 7, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

让我们开始吧!

抢先看

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

内联登录表单

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

内联登录表单

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

内联登录表单

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

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

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

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

添加新的全局标题

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

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

内联登录表单

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

内联登录表单

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

自定义部分

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

  • 背景渐变左颜色:
  • 背景渐变正确颜色:
  • 渐变方向:48度
  • 内边距:顶部 10 像素,底部 10 像素,左侧 20 像素,右侧 20 像素

内联登录表单

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

fiverr建站WordPress程序员
display:flex;
justify-content:center;
align-items:center;

内联登录表单

将标题徽标添加到第一行

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

添加行

向该部分添加一列行。

内联登录表单

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

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

独立站选品工具

内联登录表单

更新图像模块图像和边距

更新图像设置如下:

  • 图片: [add logo (about 64px by 64px)]

内联登录表单

内联登录表单

更新行设置

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

高质量外链购买
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:25%
  • 行对齐:左
  • 内边距:0px 顶部,0px 底部

内联登录表单

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

添加行

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

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

内联登录表单

添加登录表单

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

JasperAI 10000字免费额度试用

内联登录表单

删除默认内容

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

内联登录表单

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

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

在高级选项卡下,添加以下 CSS 类:

WordPress备份工具updrafplus
  • 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 的登录模块转换为优雅的内联登录表单,该表单可以很好地放置在任何网站的标题中。 希望这将在您的下一个项目中派上用场。

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

干杯!

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