你想创建一个 形式 使用登录/注销按钮在 Divi 中弹出登录？
创造一个 形式 登录弹出窗口 Divi 可以是改善网站设计和登录/注销用户体验的有效方法。
这个想法是创建一个 形式 每次用户单击页面标题中的登录按钮时，都会在弹出窗口中显示登录信息。
这比将用户重定向到自定义登录页面更方便。
在本教程中，我们将在 Divi 中创建一个带有自定义登录和注销按钮的弹出式登录表单。
使用 Divi Login 模块和一些 Button 模块，我们将在前端创建无缝的弹出式登录体验，允许用户登录和注销，而不会被重定向到另一个页面。
让我们开始吧！
概观
下面是我们将在本教程中创建的设计的快速浏览。
注意登录按钮和注销按钮是如何分别变化的。 而且，一旦用户登录，他们就会停留在当前页面上。
此外，每次用户尝试注销时，弹出的登录表单都会显示不同的“警告”内容。
你需要什么才能开始
虽然您可以将此弹出式登录表单和自定义登录/注销按钮添加到任何自定义标题中，但我们将使用预制标题来加快流程并快速开始设计。
将“Crowdfunding Layout Pack”标题模板导入 Divi 构建器
要开始，请下载 Divi Crowdfunding 布局包页眉和页脚免费 . 为此，请访问 博客文章 .
然后输入您的电子邮件以下载 zip 文件。
之后，解压缩文件，以便导入。
要将文件导入主题编辑器，请执行以下步骤：
- 转到 Divi > 主题生成器。
- 单击可移植性图标。
- 在 Portability 弹出窗口中，选择导入选项卡。
- 选择之前下载的解压文件进行导入。
- 点击 导入 Divi 主题生成器 模板.
- 单击编辑图标以编辑导入的标题。
在 Divi 中创建弹出登录表单
第 1 部分：创建登录和注销按钮
进入全局页眉布局编辑器后，打开 图层视图 这样您就可以轻松查看所有元素。
在标题部分的第一行中，删除模块 社交媒体关注 在第 3 列中的登录按钮旁边。
另请参阅： Divi：不同类型渐变的比较
创建登录按钮
要创建我们的登录按钮，请打开顶行第 3 列中的按钮模块设置。
更新设计选项卡下的以下项目：
- 按钮图标：锁定图标（见截图）
- 按钮图标位置：右
- 仅在悬停按钮时显示图标：否
- 填充：0,5em（顶部和底部），2em（左），0,7em（右）
在标签下 高级，为按钮分配两个自定义 CSS 类，如下所示：
- CSS 类：et-toggle-popup et-popup-login-button
创建注销按钮
要创建我们的注销按钮，请复制第 3 列中现有的登录按钮。
为了帮助区分这两个按钮，您可以分别更新每个按钮的标签。 接下来，打开第 3 列中的重复按钮模块设置。
将按钮文本更改为“注销”。
更新设计选项卡下的以下项目：
- 按钮图标：解锁图标（见截图）
在标签下 高级，更新 CSS Classes 按钮如下：
- CSS 类：et-toggle-popup et-popup-logout-button
第一类将保持不变，但第二类将不同。
第 2 部分：创建弹出部分
一旦按钮完成，我们就可以创建弹出部分，它将作为我们的弹出窗口包含 形式 联系。
在标题部分下方，添加一个新的常规部分。
然后在该部分内插入一列行。
栏目设置
在更新行之前，打开部分设置。
在标签下 内容，给该部分一个白色的背景颜色：
- 背景：#ffffff
在标签下 设计，更新以下内容：
- 宽度：100%
- 最大宽度：800px（台式机）、80%（平板电脑）、100%（手机）
- 部分对齐：中心
- 高度：自动（台式机和平板电脑），100%（手机）
- 最大高度：100%
- 填充：0px（顶部和底部）
- 圆角：10px
- 盒子阴影：见截图
- 盒子阴影垂直位置：0px
- 模糊强度：100 像素
- 传播强度：50px
在标签下 高级，更新以下内容：
添加自定义 CSS 类。
- CSS 类：et-popup-login
向主元素添加自定义 CSS 片段：
overscroll-behavior: contain;更新可见性和位置选项。
- 水平溢出：隐藏
- 垂直溢出：自动
- 位置：固定
- 地点：中心中心
- Z指数：999999
线路设置
设置好截面设置后，打开线设置并更新以下设计设置：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
- 填充：0px（顶部），5vh（底部）
第 3 部分：创建关闭弹出图标
要创建将在单击时关闭/隐藏弹出窗口的弹出关闭图标，我们将使用 Blurb 模块。
将新的 Blurb 模块添加到该行。
打开模块设置并删除标题和正文。
然后添加图标如下：
- 使用图标：是
- 图标：“x”图标（见截图）
在标签下 设计，更新以下内容：
- 图标颜色：#004e43
- 图像/图标对齐：居中
- 使用图标字体大小：是
- 图标字体大小：50px
- 宽度：50 像素
- 对齐模块：右
- 高度：50 像素
在标签下 高级，在 Blurb 模块中添加一个 CSS 类，如下所示：
- CSS 类：et-toggle-popup
第 4 部分：创建“登录”和“注销”登录表单
为了让登录和注销时的登录表单有不同的内容和设计，我们将创建两个不同的登录表单模块。
第一个是登录表单，每次用户“注销”时都会显示该表单。 第二个是登录表单，每次用户“登录”时都会显示该表单。
创建“退出”表单
要创建“注销”登录表单，请在行内的 Blurb 模块图标下方添加一个新的登录模块。
打开模块设置并更改以下设置：
内容选项卡
- 重定向到当前页面：是
- 使用背景颜色：否
设计选项卡
- 字段背景颜色：rgba(0,78,67,0.05)
- 场焦点背景颜色：rgba (0,78,67,0,15)
- 文本对齐方式：居中
- 文字颜色：深色
- 标题字体：Poppins
- 标题字体粗细：半粗体
- 文字颜色：#000000
- 标题行高度：1,3 em
- 正文字体：Work Sans
要更新按钮样式，请将我们创建的登录按钮中的按钮样式复制到 Header 部分行中的第三列。
然后将按钮样式粘贴到“设计”选项卡下的连接设置中的按钮选项组中。
接下来，更新登录表单的按钮样式，如下所示：
- 按键
- 文字颜色：#ffffff
- 背景：#004e43
- 背景（悬停）：#00683c
- 边框宽度：0 像素
- 填充：15px（顶部和底部）
接下来，更新大小选项，如下所示：
- 宽度：100%
- 最大宽度：80%（台式机）、90%（平板电脑）、95%（手机）
- 对齐模块：中心
高级选项卡
在标签下 高级，更新CSS类和自定义CSS如下：
- CSS 类：et-logged-out-form
用于连接描述的自定义 CSS：
width: 100% !important;
float: none !important;登录表单的自定义 CSS：
width: 100% !important;
padding: 0px !important;这将确保登录模块跨越整个行/列宽度，即使在桌面上也是如此。
创建“登录”表单
现在表单的“注销”版本已经完成，我们需要创建“登录”版本，它具有不同的内容和样式，以最大限度地提高用户体验。
要创建“注销”登录表单，请复制现有的登录表单。
接下来，更新每个标签 形式 分别连接。
打开重复设置（“登录”表单）并将站点标题作为动态内容添加到登录表单模块的标题中。
然后打开站点标题动态内容设置，更新前后内容如下：
- 之前：“您正在尝试退出优雅主题”
- 后： ”。 "
这将为尝试退出站点的用户创建一个很好的动态通知。
然后在正文中添加以下 H3 标头：
<h3>Are you sure?</h3>
如果您曾经在登录时看到过登录模块的内容，那么您就会知道其中包含个性化的“注销”链接的个性化消息。 为了让这个链接看起来像一个按钮，我们需要自定义正文链接的字体/文本设置，如下所示：
- 选择标签 链接 在选项下 文章主体.
- 链接字体：Work Sans
- 链接字体粗细：半粗体
- 字体样式：TT
- 链接文本对齐方式：居中
- 链接文本颜色：#ffffff
注意：在实时页面上查看表单之前，您将无法预览这些结果。
在标签下 高级，更新CSS类和自定义CSS如下：
- CSS 类：et-logged-in-form
登录表单的自定义 CSS：
display:none;
第 5 部分：添加自定义代码
要添加弹出登录表单功能所需的自定义 CSS 和 JQuery，请在最后一个登录模块下创建一个新代码模块。
CSS
打开代码模块设置并将以下 CSS 粘贴到代码框中，确保将 CSS 包装在必要的样式标签中。
/* hide popup section */
.et-popup-login {
display: none;
}
/* hide login button when logged in */
.logged-in .et-popup-login-button {
display: none !important;
}
/* hide logout button when logged out */
.et-popup-logout-button {
display: none !important;
}
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
display: inline-block !important;
}
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
display: none !important;
}
/* hide logged in form when logged out */
.et-logged-in-form {
display: none !important;
}
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
display: block !important;
}
/* style logout link within logged in form */
.et-logged-in-form a {
display: block;
padding: 15px 1em;
border-radius: 8px;
background: #004e43;
max-width: 400px;
margin: 20px auto 0px;
}
.et-toggle-popup {
cursor: pointer;
}
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display: block !important;
}
body.et-fb .et-popup-login-button {
display: inline-block !important;
}请注意，CSS 使用 WordPress 内置的“connected”类来隐藏/显示相应的登录/注销按钮和 形式 登录/注销 每次用户登录或注销时。
jQuery
在结束样式标记下方，粘贴以下 JQuery，确保将代码包装在必要的脚本标记中。
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);每当用户单击具有“类”的三个项目之一时，此片段只会切换弹出部分 和切换弹出 （登录和注销按钮加上演示图标“x”）。
也可以看看： Divi：如何使用背景蒙版设置和图案变换选项
完成了！
不要忘记在主题生成器中保存您对模板所做的更改。 保存后，您可以在实时页面上查看结果。
最终结果
这是电脑、平板电脑和手机上的最终结果。
注意登录按钮和注销按钮是如何变化的。 而且，一旦用户登录，用户就会停留在当前页面上。
此外，每次用户尝试注销时，弹出的登录表单都会显示不同的“警告”内容。
立即下载DIVI！！！
结论。
希望创建此弹出登录表单和自定义登录/注销按钮将使您对如何创造性地使用 Divi 的登录表单有所了解。
随意调整每个登录表单（或按钮）的设计和内容，以在您自己的网站上创建独特的登录体验。
我们也希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
