如何在 Divi 中创建带有登录/注销按钮的弹出式登录表单

在 Divi 中创建弹出式登录表单可以是提升登录和退出站点的设计和用户体验的有效方法。 这个想法是创建一个登录表单，每当用户单击页面标题上的登录按钮时，该表单就会显示在弹出框中。 这比将用户重定向到自定义登录页面更方便。 此外，它还允许 Web 开发人员创建登录表单的自定义设计（至少在初始前端），这可以成为传统 WordPress 登录体验的令人耳目一新的替代方案。

在本教程中，我们将在 Divi 中创建一个带有自定义登录和注销按钮的弹出式登录表单。 使用 Divi 登录模块和几个按钮模块，我们将在前端创建无缝弹出登录体验，允许用户登录和注销而不会被重定向到不同的页面。

当然，此解决方案仅限于前端登录表单设计，这意味着发生的任何错误（或如果用户需要重置密码）都将重定向到“wp-login”中的传统 WordPress 登录表单/页面设计.php”。 但是，对于那些在前端寻找自定义登录设计而不必使用插件的人来说，这可能是您的解决方案。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

注意登录按钮和注销按钮分别是如何变化的。 而且，一旦用户登录，他们就会留在当前页面上。 此外，每当用户尝试注销时，弹出的登录表单都会显示不同的“警告”内容。

免费下载模板

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

下载文件

免费下载

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

下载

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

如何上传免费模板

要上传模板，请导航到 WordPress 网站后端的 Divi Theme Builder。

然后，在右上角，您会看到一个带有两个箭头的图标。 单击该图标。

导航到导入选项卡，上传您可以在本文中下载的 JSON 文件，然后单击“导入 Divi 主题生成器模板”。

上传文件后，您会注意到默认网站模板中有一个新的全局页眉和页脚。 一旦您希望激活模板，请立即保存 Divi Theme Builder 更改。

要修改标题模板的元素，请首先打开模板。

让我们进入教程，好吗？

你需要什么开始

尽管您可以将此弹出式登录表单和自定义登录/注销按钮添加到任何自定义标题中，但我们将使用预制标题来加快流程并快速开始设计。

如果您还没有安装并激活 Divi 主题。

将众筹标题模板导入主题生成器

首先，下载 Divi 众筹布局包的免费页眉和页脚。 为此，请转到博客文章。

然后输入您的电子邮件以下载 zip 文件。

之后，解压缩文件以准备好导入。

要将文件导入主题构建器，请执行以下步骤：

1. 导航到 Divi > 主题生成器。
2. 单击便携性图标。
3. 在可移植性弹出窗口中，选择导入选项卡。
4. 选择之前下载的解压文件进行导入。
5. 单击导入按钮。
6. 单击编辑图标以编辑导入的标题。

在 Divi 中使用自定义登录/注销按钮创建弹出登录表单

第 1 部分：创建登录和注销按钮

进入全局标题布局编辑器后，打开图层视图，以便您可以轻松查看所有元素。

在标题部分的顶行，删除第 3 列登录按钮旁边的社交媒体关注模块。

创建登录按钮

要创建我们的登录按钮，请打开顶行第 3 列中按钮模块的设置。

更新设计选项卡下的以下内容：

• 按钮图标：锁定图标（见截图）
• 按钮图标位置：左
• 仅在悬停按钮时显示图标：否
• 填充：顶部 0.5em，底部 0.5em，左侧 2em，右侧 0.7em

在 Advanced 选项卡下，为按钮提供两个自定义 CSS 类，如下所示：

• CSS 类：et-toggle-popup et-popup-login-button

创建注销按钮

要创建我们的注销按钮，请复制第 3 列中现有的登录按钮。

为了帮助区分这两个按钮，您可以分别更新每个按钮的标签。 然后，打开 column3 中重复按钮模块的设置。

将按钮文本更改为“注销”。

更新设计选项卡下的以下内容：

• 按钮图标：解锁图标（见截图）

在 Advanced 选项卡下，更新按钮 CSS Classes 如下：

• CSS 类：et-toggle-popup et-popup-logout-button

第一类将保持不变，但第二类将有所不同。

第 2 部分：创建弹出部分

一旦按钮完成，我们就可以创建弹出部分，作为包含登录表单的弹出窗口。

在标题部分下，添加一个新的常规部分。

然后在该部分内插入一列行。

部分设置

在更新行之前，打开部分设置。

在内容选项卡下，为该部分提供白色背景色：

• 背景颜色：#ffffff

在设计选项卡下，更新以下内容：

• 宽度：100%
• 最大宽度：800 像素（桌面）、80%（平板电脑）、100%（手机）
• 截面对齐：居中
• 高度：自动（桌面和平板电脑），100%（手机）
• 最大高度：100%
• 填充：0px 顶部，0px 底部

• 圆角：10px
• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：100px
• 框阴影传播强度：50px

在高级选项卡下，更新以下内容：

添加自定义 CSS 类。

• CSS 类：et-popup-login

将自定义 CSS 片段添加到主元素：

overscroll-behavior: contain;

更新可见性和位置选项。

• 水平溢出：隐藏
• 垂直溢出：自动
• 位置：固定
• 地点：中心中心
• Z索引：999999

行设置

部分设置到位后，打开行的设置并更新以下设计设置：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%
• 填充：顶部 0px，底部 5vh

第 3 部分：创建关闭弹出图标

为了创建关闭/隐藏点击弹出窗口的关闭弹出图标，我们将使用一个模糊模块。

向该行添加一个新的模糊模块。

打开模糊模块的设置，并删除标题和正文文本。

然后添加图标如下：

• 使用图标：是
• 图标：“x”图标（见截图）

在设计选项卡下，更新以下内容：

• 图标颜色：#004e43
• 图像/图标对齐方式：居中
• 使用图标字体大小：是
• 图标字体大小：50px
• 宽度：50px
• 模块对齐：右
• 高度：50px

在 Advanced 选项卡下，将 CSS 类添加到简介中，如下所示：

• CSS 类：et-toggle-popup

第 4 部分：创建“注销”和“登录”登录表单

为了使登录和退出时登录表单的内容和设计不同，我们将创建两个不同的登录表单模块。 第一个是登录表单，每当用户“注销”时就会显示。 第二个是登录表单，每当用户“登录”时就会显示。

创建“注销”表单

要创建“注销”登录表单，请在行内的模糊模块图标下添加一个新的登录表单模块。

打开登录模块设置并更新以下内容：

内容选项卡

• 重定向到当前页面：是
• 使用背景颜色：否

设计选项卡

• 字段背景颜色：rgba(0,78,67,0.05)
• 字段焦点背景颜色：rgba(0,78,67,0.15)
• 文本对齐：居中
• 文字颜色：深色

• 标题字体: Poppins
• 标题字体粗细：半粗体
• 标题文字颜色：#000000
• 标题行高度：1.3em
• 正文字体：Work Sans

要更新按钮样式，请复制我们在 Header 部分行的第三列中创建的 Login Button 的按钮样式。

然后将按钮样式粘贴到设计选项卡下的登录设置中的按钮选项组。

然后更新登录表单的按钮样式，如下所示：

• 按钮文字颜色：#ffffff
• 按钮背景颜色：#004e43
• 按钮背景颜色（悬停）：#00683c
• 按钮边框宽度：0px
• 按钮填充：顶部 15px，底部 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 内置的“logged-in”类来隐藏/显示相应的登录/注销按钮和“登录”/“注销”登录表单，无论何时用户登录或登出。

JQuery

在结束样式标记下，粘贴以下 JQuery，确保将代码包装在必要的脚本标记中。

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

每当用户单击具有“et-toggle-popup”类（登录和注销按钮以及“x”模糊图标）的三个元素中的任何一个时，此代码段都会切换弹出部分。

就是这样！

不要忘记在 Theme Builder 中保存您对模板所做的更改。 保存后，您可以在实时页面上查看结果。

最后结果

以下是台式机、平板电脑和手机上的最终结果。

注意登录按钮和注销按钮是如何变化的。 并且，一旦用户登录，用户就会停留在当前页面上。 此外，每当用户尝试注销时，弹出的登录表单都会显示不同的“警告”内容。

最后的想法

希望通过构建此弹出式登录表单和自定义登录/注销按钮，您可以了解如何以创造性的方式使用 Divi 的登录表单。 随意调整每个登录表单（或按钮）的设计和内容，以在您自己的网站上创建独特的登录体验。

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

干杯!