如何使用Elementor的登录功能

如何使用Elementor的登录功能

如何使用Elementor的登录功能

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

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

 

将Elementor编辑器的login元素添加到内容编辑区域

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

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

 

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、“”:指的是登录后重定向的页面,注意登录后重定向不能跳转到其他网站,只能跳转到自己正在配置的这个网站。如果在下面的跳转页面链接输入框中不输入网址,那么默认情况下,该页面输入账号密码后,跳转的就是自己当前页面。

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

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

密码重设提醒

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

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

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

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

 

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

 

Elementor编辑器login的样式设之form

3.1、“Rows Gap”:指的是每一个表单栏目之间的间距

3.2、“Links Color”:指的是链接锚文本的显示颜色,这里特指lost your password这句话的显示文字颜色

3.3、“Links Hover Color”:指的是当我们鼠标移动到lost your password这句话上的时候,文字显示的颜色

Elementor编辑器login的样式设之LABEL

3.4、“Spacing”:指的是表单项目的显示文字和表单内容输入框之间的间距

3.5、“Text Color”:指的是表单项目的显示文字颜色

3.5、“排版”:指的是表单项目的文字设置,这个很简单不解释

Elementor编辑器login的样式设之fields

3.6、“Text Color”:指的是内容输入框的文字颜色

3.7、“排版”:指的是内容输入框输入文字之后的文字显示效果

3.8、“Background Color”:指的是内容输入框的背景显示颜色

3.9、“Border Color”:指的是内容输入框的外边框线颜色

3.10、“Border Width”:指的是内容输入框的外边框线粗细

3.11、“Border Radius”:指的是内容输入框的外边框线4个直角的圆弧度,数值越大,外边角越圆润

Elementor编辑器login的样式设之Button

Button分为“Normal”和“Hover”两个大版块设计,意思是正常显示状态和鼠标悬停在提交按钮上显示的状态,因为两者的设置都是差不多的,所以这里Jack老师只讲解正常显示状态

3.12、“Text Color”:指的是提交按钮上显示文字的颜色

3.13、“排版”:不解释

3.14、“Background Color”:指的是按钮的背景颜色

3.15、“边框类型”:指的是点击提交按钮的外边框线效果,有实线边框、虚线边框、双实线边框等多种预设选择

3.16、“Border Radius”:指的是提交按钮的外边框线4个直角的圆弧程度

3.17、“Text Padding”:指的是提交按钮中文字和外边框直接的间距,数值越大,距离越长

Elementor编辑器login的样式设之Logged in message

3.18、“Text Color”:指的是登录成功之后显示的文字颜色

3.19、“排版”:指的是登录成功之后显示的文字样式效果,不解释

好了,以上就是本章关于 如何使用Elementor的登录功能 的全部内容,Login元素功能能够为我们的网站创建出一个单独的登录表单页面,实现我们的某些特定网站登录功能和需求。如果对本章内容还有不理解的地方,没关系,解决方案如下:

点击此处,查看更多外贸建站和谷歌SEO优化免费教程

QQ:3233269705

QQ群:645296397

微信公众号:JACK SEO

微信公众号二维码