如何创建WordPress登录弹出窗口模式(逐步操作)

如何创建WordPress登录弹出窗口模式(逐步操作)

您是否要在网站上添加WordPress登录弹出窗口模式?模态登录弹出窗口使您的用户可以快速登录到您的网站,而无需离开他们正在查看的页面。这可以改善用户体验,并改善您在网站上的参与度。在本文中,我们将逐步向您展示如何轻松创建WordPress登录弹出模式。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第1张

为什么要创建WordPress登录弹出模式?

如果您经营在线商店,会员网站或出售在线课程,则可能允许用户注册并登录到您的网站。

通常,当用户单击登录链接时,他们将被带到默认WordPress登录页面或您网站上的另一个自定义登录页面。用户登录后,他们将再次重定向到另一个页面。

模态登录弹出窗口使您可以显示登录表单,而无需将用户发送到其他页面。登录后,您可以将用户重定向到所需的任何页面。

模式登录弹出窗口更快,并改善了您网站上的用户体验。更快,更完善的用户体验可以促进您的销售和转化。

话虽如此,让我们看一下如何轻松地在WordPress中创建模式登录弹出窗口。我们将向您展示两种方法,您可以选择一种最适合您的需求。

方法1.使用CSH登录创建模态登录弹出窗口

此方法更简单,建议大多数用户使用。

您需要做的第一件事是安装并激活CSH登录插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要进入WordPress管理区域中的模式登录页面,并为模式登录表单选择一种类型。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第2张

选择模式登录框类型后,您可以向下滚动并管理表单的登录/注销重定向。您还可以允许用户生成自己的密码。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第3张

接下来,您需要向下滚动到“样式”部分,然后选择布局,显示标签,背景色,按钮颜色,链接颜色等等。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第4张

此外,您可以添加注册电子邮件,电子邮件主题,使用Google reCaptcha等。该插件还允许您添加社交登录信息,例如Facebook,Twitter和Google。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第5张

确保保存更改并复制位于页面顶部的简码。您需要在WordPress中创建一个新页面或编辑现有页面以在内容编辑器中添加简码。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第6张

您还可以在WordPress边栏中添加模式登录。只需转到外观»窗口小部件,即可将CSH登录窗口小部件拖放到网站的侧边栏中。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第7张

CSH模式登录也可以添加到您的网站模板文件中。将其添加到您的网站后,只需访问WordPress网站即可查看运行中的模式登录链接。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第8张

方法2.使用WPForms和OptinMonster创建模式登录弹出窗口

对于这种方法,您将需要WPForms插件和OptinMontser。如果您已经具有这两个插件,则此方法是您的更好解决方案。

WPForms是最好的WordPress联系人表单插件。您至少需要他们的Pro计划才能访问用户注册插件。

OptinMonster是市场上最好的WordPress弹出插件和销售线索生成软件。它可以帮助您将网站访问者转换为订阅者和客户。您至少需要使用Pro计划才能访问本文中使用的MonsterLinks功能。

准备好?让我们开始吧。

使用WPForms创建用户登录表单

首先,您需要安装并激活WPForms插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要进入WPForms»Addons页面以安装和激活User Registration Addon

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第9张

激活插件后,您需要进入WPForms»Add New页面以创建用户登录表单。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第10张

启动WPForms构建器后,您需要选择预构建的“用户登录表单”模板。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第11张

此登录表单模板具有电子邮件和密码字段,它们的工作方式类似于默认的WordPress登录表单。您可以根据需要从屏幕左侧拖放任何其他字段。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第12张

接下来,单击“预览”部分中的“密码”字段,它将在左侧显示字段选项。您可以在密码字段的描述框中添加以下给出的代码,以显示诸如忘记密码和用户注册之类的选项。

忘记密码了?<a href="{url_lost_password}">单击此处</a>。还没有帐号?<a href="{url_register}">在此处注册</a>。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第13张

之后,您需要单击“保存”按钮,然后单击“嵌入”按钮。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第14张

将打开一个弹出窗口,其中包含嵌入代码。您需要复制此代码并保存以供以后使用。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第15张

您的登录表单已准备就绪。现在,您可以继续创建模式弹出窗口。

使用OptinMonster创建模态弹出窗口

首先,您需要安装并激活OptinMonster插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到WordPress管理区域中的OptinMonster,然后单击“创建新的广告系列”按钮。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第16张

您的OptinMonster仪表板将在新的网页上打开。

进入内部后,您需要选择灯箱弹出窗口作为广告系列类型,以便可以在弹出窗口中添加登录表单。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第17张

接下来,您需要选择Canvas广告系列模板,它是一个空白模板,并允许您添加自定义代码和简码。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第18张

它将要求您在灯箱中添加一个名称,然后选择要加载此弹出窗口的网站。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第19张

单击“开始构建”按钮后,您将被重定向到OptinMonster广告系列设置页面。

在这里,您需要转到“优化”选项卡并设置画布的宽度和高度,在“自定义画布HTML”字段中添加登录表单嵌入代码,管理模式弹出窗口的显示和声音效果,等等。

注意:登录表单嵌入代码应该是您在上一步中创建登录表单后复制的代码。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第20张

由于您正在创建模式登录弹出窗口,因此需要转到设置选项卡,并为Cookie持续时间成功Cookie持续时间设置“ 0”值每当他们单击您的链接时,它将向所有访问者显示该表单。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第21张

接下来,您需要访问“显示规则”选项卡并展开MonsterLink以将状态更改为“活动”。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第22张

确保单击右上角的“保存”按钮,然后转到“发布”部分以使状态为活动。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第23张

现在,您可以在WordPress页面或帖子中添加此模式登录弹出窗口。

在WordPress中添加模式登录

您需要返回到WordPress管理区域中的OptinMonster它将为您显示广告系列列表。如果您没有看到您最近创建的用于模式登录的广告系列,则只需单击“刷新广告系列”按钮。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第24张

接下来,您需要编辑广告系列输出设置以在您的站点上启用optin,并选择谁应该看到模式登录弹出窗口。确保单击“保存设置”按钮。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第25张

之后,您需要返回到广告系列概述页面,并复制广告系列实时选项下方可见的子弹。此独特的子段可用于短代码和代码,以在WordPress中显示模式登录。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第26张

接下来,您可以创建一个新的WordPress页面或编辑一个现有的页面,并将此代码与您独特的广告系列代码一起添加。

<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">登录/注册</a>

您也可以在WordPress菜单,侧边栏或网站上的任何其他区域中添加上述代码。

确保将更改保存到WordPress页面,并访问您的网站以查看模式登录的实际效果。

如何创建WordPress登录弹出窗口模式(逐步操作) WordPress 第27张

我们希望本文能帮助您学习如何在WordPress中创建模式登录。您可能还希望查看我们的最佳WordPress登录页面插件的完整列表,并轻松设计自己的登录页面。

如果您喜欢这篇文章,请订阅我们的YouTube频道WordPress视频教程。您也可以在Twitter和Facebook上找到我们。

标签: #

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如需转载,请注明文章出处和来源网址:https://www.54u.net/9123.html