如何使用Elementor的登錄功能

跨境知道
2021年01月06日 11:03
439
0
0

如何使用Elementor的登錄功能

Elementor編輯器有個Login元素功能，這個功能Jack老師用的比較少，我并不能夠很好的理解Elementor編輯器開發(fā)團隊制作這個功能的初衷。如果是為了更改wordpress后臺的登錄地址，那么Login元素并不具備這樣的效果，應(yīng)該選擇類似wordfence這種類型的網(wǎng)站安全防護插件才可以。如果是需要登錄才能進行相關(guān)網(wǎng)站管理員權(quán)限的操作，那么直接用domain.com/wp-admin不就可以了嗎？所以Jack老師對這個Login的功能元素并不是很喜歡，但是為了我們Elementor編輯器實操課程的內(nèi)容完整性，我不得不做把這個元素的功能補齊！

第一步：將Elementor的Login元素添加到內(nèi)容編輯版塊

如上圖所示，在箭頭1所指的地方，找到Elementor編輯器中的Login功能元素，鼠標左鍵點擊不松開，然后拖動該元素添加到箭頭2所指的地方，等到內(nèi)容編輯區(qū)域的灰色外邊框線變成藍色虛線之后再松開鼠標左鍵，這樣我們就成功的將Login功能元素添加到了內(nèi)容編輯版塊中。

第二步：對Elementor編輯器的Login元素進行主體功能設(shè)置

Login功能元素主體功能設(shè)置分為三個方面，分別為“Form Fields”、“Button”和“Additional Options”，我們逐一的來對這些主體功能進行細致的研究

2.1、“Label”：這個和昨天講的表單功能有點相似，同學們可以簡單的理解為項目名稱，點擊“Show”之后，項目名稱就會出現(xiàn)在內(nèi)容輸入框的上面了

2.2、“Input Size”：指的是內(nèi)容輸入框的尺寸大小，Elementor編輯器默認給出了5個不同大小預設(shè)尺寸

2.3、“Text”：指的是內(nèi)容提交按鈕上顯示的文字，默認是Log In，當然我們有可以刪除它，然后再添加自己需要的顯示文字，比方說—“歡迎大爺大駕光臨，哈哈！”

2.4、“Size”：指的是內(nèi)容提交按鈕的顯示大小，和Input Size一樣，Elementor編輯器也給出了5種預設(shè)的按鈕尺寸以供我們進行選擇

2.5、“Alignment”：指的是按鈕的對齊位置，有左對齊、居中對齊、右對齊和兩端對齊

2.6、“Redirect After Login”：指的是登錄后重定向的頁面，注意登錄后重定向不能跳轉(zhuǎn)到其他網(wǎng)站，只能跳轉(zhuǎn)到自己正在配置的這個網(wǎng)站。如果在下面的跳轉(zhuǎn)頁面鏈接輸入框中不輸入網(wǎng)址，那么默認情況下，該頁面輸入賬號密碼后，跳轉(zhuǎn)的就是自己當前頁面。

2.7、“Redirect After Logout”：意思是注銷后重定向，指的是當我們退出登錄當前頁面之后，頁面會跳轉(zhuǎn)到哪一個頁面。

2.8、“Lost Your Password”：指的是在前端頁面是否出現(xiàn)忘記密碼的提示，如果我們點擊顯示這個lost your password，那么前端頁面就會有這個文字出現(xiàn)，假設(shè)這時候恰好你又真的忘記了登錄密碼，那么你點擊這個文字之后，就會跳轉(zhuǎn)到這樣一個頁面，如下圖所示：

輸入你的聯(lián)系郵箱之后，系統(tǒng)會重新發(fā)一份郵件到你的郵箱，進行新密碼的重設(shè)工作。

2.9、“Remember Me”：指的是瀏覽器記住你的賬號密碼，以免你在二次登陸的時候需要重新輸入復雜難記的密碼。

2.10、“Remember Me”：指的是當你成功輸入賬號和密碼之后，登陸頁面出現(xiàn)的一段文字、默認情況下就是—“You are Logged in as ***”；***代表的是你的登錄賬號名

如果你對輸入框的預設(shè)表單名稱（比如：name、password等）不是很滿意，那么我們可以點擊“Custom Label”，然后在下面的“Username Label”、“Username Placeholder”、“Password Label”和“Password Placeholder”4個選項中，設(shè)置自己想要的項目名稱和占位符名稱。

第二步：對Elementor編輯器的Login元素進行樣式功能設(shè)置