WordPress divi主题

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

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

让我们开始吧。

预览

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

桌面

下拉登录表单

移动的

下拉登录表单

免费下载全局标题模板

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

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

转到 Divi 主题生成器

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

下拉登录表单

添加新的全局标题

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

下拉登录表单

WordPress divi主题

2.构建标题设计

添加第 1 节

背景图片

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

下拉登录表单

间距

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

  • 上边距:10px
  • 底部填充:10px

下拉登录表单

将行添加到部分

立柱结构

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

下拉登录表单

浆纱

在不添加模块的情况下,打开行设置并修改大小设置,如下所示:

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

下拉登录表单

间距

接下来修改填充值。

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

下拉登录表单

fiverr建站WordPress程序员

主要元素 CSS

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

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

下拉登录表单

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

添加社交网络

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

下拉登录表单

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

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

独立站选品工具
  • 背景颜色:#ffffff

下拉登录表单

下拉登录表单

图标设置

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

下拉登录表单

边界

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

高质量外链购买

下拉登录表单

将按钮模块添加到第 2 列

添加副本

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

下拉登录表单

按钮对齐

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

下拉登录表单

JasperAI 10000字免费额度试用

按钮设置

然后,为按钮设置样式。

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

下拉登录表单

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

下拉登录表单

间距

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

  • 上边距:16px
  • 底部填充:16px
  • 左填充:24px
  • 右内边距:24px

下拉登录表单

WordPress备份工具updrafplus

添加第 2 节

背景颜色

在前一个部分的正下方添加另一个部分,并为其使用以下背景颜色:

  • 背景颜色:#fff4ef

下拉登录表单

间距

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

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

下拉登录表单

添加第 1 行

立柱结构

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

下拉登录表单

浆纱

在不添加模块的情况下,打开行设置并更改大小设置,如下所示:

  • 均衡柱高:是
  • 宽度:
    • 桌面:80%
    • 平板电脑和手机:95%
  • 最大宽度:2580px

下拉登录表单

间距

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

  • 上边距:5px
  • 底部填充:5px
  • 左填充:2%
  • 右填充:2%

下拉登录表单

第 2 列设置

背景颜色

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

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

下拉登录表单

下拉登录表单

间距

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

  • 顶部填充:
  • 底部填充:

下拉登录表单

将菜单模块添加到第 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%”。

下拉登录表单

登录按钮 CSS

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

margin-top: 30px;

下拉登录表单

位置

并相应地重新定位模块:

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

下拉登录表单

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

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

  • CSS ID:divi-login-toggle

下拉登录表单

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

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

下拉登录表单

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

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

下拉登录表单

添加样式和脚本标签

为了创建点击功能,我们将使用一些 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 Theme Builder 更改

现在一切就绪,剩下要做的就是保存所有 Divi Theme Builder 更改并查看结果!

下拉登录表单

下拉登录表单

预览

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

桌面

下拉登录表单

移动的

下拉登录表单

最后的想法

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

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

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