如何使用Elementor的登录功能

Elementor编辑器有个Login元素功能，这个功能Jack老师用的比较少，我并不能够很好的理解Elementor编辑器开发团队制作这个功能的初衷。如果是为了更改wordpress后台的登录地址，那么Login元素并不具备这样的效果，应该选择类似wordfence这种类型的网站安全防护插件才可以。如果是需要登录才能进行相关网站管理员权限的操作，那么直接用domain.com/wp-admin不就可以了吗？所以Jack老师对这个Login的功能元素并不是很喜欢，但是为了我们Elementor编辑器实操课程的内容完整性，我不得不做把这个元素的功能补齐！

第一步：将Elementor的Login元素添加到内容编辑版块

如上图所示，在箭头1所指的地方，找到Elementor编辑器中的Login功能元素，鼠标左键点击不松开，然后拖动该元素添加到箭头2所指的地方，等到内容编辑区域的灰色外边框线变成蓝色虚线之后再松开鼠标左键，这样我们就成功的将Login功能元素添加到了内容编辑版块中。

第二步：对Elementor编辑器的Login元素进行主体功能设置

Login功能元素主体功能设置分为三个方面，分别为“Form Fields”、“Button”和“Additional Options”，我们逐一的来对这些主体功能进行细致的研究

2.1、“Label”：这个和昨天讲的表单功能有点相似，同学们可以简单的理解为项目名称，点击“Show”之后，项目名称就会出现在内容输入框的上面了

2.2、“Input Size”：指的是内容输入框的尺寸大小，Elementor编辑器默认给出了5个不同大小预设尺寸

2.3、“Text”：指的是内容提交按钮上显示的文字，默认是Log In，当然我们有可以删除它，然后再添加自己需要的显示文字，比方说—“欢迎大爷大驾光临，哈哈！”

2.4、“Size”：指的是内容提交按钮的显示大小，和Input Size一样，Elementor编辑器也给出了5种预设的按钮尺寸以供我们进行选择

2.5、“Alignment”：指的是按钮的对齐位置，有左对齐、居中对齐、右对齐和两端对齐

2.6、“Redirect After Login”：指的是登录后重定向的页面，注意登录后重定向不能跳转到其他网站，只能跳转到自己正在配置的这个网站。如果在下面的跳转页面链接输入框中不输入网址，那么默认情况下，该页面输入账号密码后，跳转的就是自己当前页面。

2.7、“Redirect After Logout”：意思是注销后重定向，指的是当我们退出登录当前页面之后，页面会跳转到哪一个页面。

2.8、“Lost Your Password”：指的是在前端页面是否出现忘记密码的提示，如果我们点击显示这个lost your password，那么前端页面就会有这个文字出现，假设这时候恰好你又真的忘记了登录密码，那么你点击这个文字之后，就会跳转到这样一个页面，如下图所示：

输入你的联系邮箱之后，系统会重新发一份邮件到你的邮箱，进行新密码的重设工作。

2.9、“Remember Me”：指的是浏览器记住你的账号密码，以免你在二次登陆的时候需要重新输入复杂难记的密码。

2.10、“Remember Me”：指的是当你成功输入账号和密码之后，登陆页面出现的一段文字、默认情况下就是—“You are Logged in as ***”；***代表的是你的登录账号名

如果你对输入框的预设表单名称（比如：name、password等）不是很满意，那么我们可以点击“Custom Label”，然后在下面的“Username Label”、“Username Placeholder”、“Password Label”和“Password Placeholder”4个选项中，设置自己想要的项目名称和占位符名称。

第二步：对Elementor编辑器的Login元素进行样式功能设置