如何使用Elementor的按鈕功能

2020年12月25日 9:46:57 來源：喜運(yùn)達(dá)

如何使用Elementor的按鈕功能

在前端頁面設(shè)計(jì)中，按鈕是非常重要的一個(gè)內(nèi)容元素，它的功能不在于能夠表達(dá)多少頁面設(shè)計(jì)者的思想，按鈕存在的意義為的就是更好的引導(dǎo)客戶的內(nèi)容閱讀轉(zhuǎn)化，也就是我們常說的Call-To-Action !任何頁面不管前端設(shè)計(jì)的內(nèi)容好不好看，如果不能將客戶的閱讀轉(zhuǎn)化為客戶的點(diǎn)擊那么都是在耍流氓！那么按鈕這一元素，作為將訪客從內(nèi)容閱讀到點(diǎn)擊轉(zhuǎn)化之間的“橋梁”，如何設(shè)計(jì)成富有點(diǎn)擊欲望的視覺效果就顯得非常有必要了。接下來，我們就全面的來了解一下Elementor編輯器中的按鈕元素的相關(guān)功能！

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

如上圖所示，在箭頭1所指的地方，按住鼠標(biāo)左鍵拖動(dòng)“按鈕”元素不松開拖動(dòng)到箭頭2所指的內(nèi)容編輯區(qū)域，為了更好的體現(xiàn)Elementor編輯器的個(gè)性化設(shè)計(jì)功能，Jack老師將內(nèi)容版塊的布局設(shè)置為一行兩列（這一點(diǎn)沒有在上圖中展現(xiàn)，上圖中還是一行一列的內(nèi)容排布形式）。

第二步：對按鈕元素的主體內(nèi)容部分進(jìn)行設(shè)置

2.1、“類型”

Elementor的按鈕元素提供了5種按鈕類型供同學(xué)們進(jìn)行選擇，分別是默認(rèn)、信息、成功、警告、危險(xiǎn)。這5種選擇本身并沒有什么不同，唯一的區(qū)別就是按鈕的背景顏色會(huì)有所不同。Jack老師將這5中不同的樣式羅列在了下圖中

2.2、“文本”

指的就是按鈕上的文字表達(dá)部分，默認(rèn)狀態(tài)ia是“點(diǎn)擊這里”，我們可以把這4個(gè)子刪除掉，重新寫，比如:“contact us now”、“download products catalogue”等等。如果你嫌麻煩，你還可以點(diǎn)擊文字輸入框后面的那個(gè)小按鈕。這個(gè)小按鈕的功能是添加動(dòng)態(tài)標(biāo)簽，Elementor編輯器提供了非常多的動(dòng)態(tài)標(biāo)簽，同學(xué)們點(diǎn)擊之后選擇自己需要的動(dòng)態(tài)標(biāo)簽即可。點(diǎn)擊之后某個(gè)動(dòng)態(tài)標(biāo)簽就替代了原先系統(tǒng)默認(rèn)提供的“點(diǎn)擊這里”文字

2.3、“鏈接”

這里的鏈接指的就是當(dāng)訪客點(diǎn)擊該按鈕之后，頁面跳轉(zhuǎn)到的最終目標(biāo)頁面url。比方說，Jack老師在某個(gè)頁面上設(shè)置了一個(gè)按鈕，該按鈕的目的是點(diǎn)擊之后跳轉(zhuǎn)到聯(lián)系頁面，那么這里就需要將鏈接地址添加為：www.example.com/contact-us/? ?這種鏈接是非常常見的做法，那有沒有更直接的點(diǎn)擊之后就能跳出聯(lián)系表單的設(shè)計(jì)功能呢？有！Jack老師會(huì)把這種設(shè)計(jì)放在文章的末尾進(jìn)行詳細(xì)講解。

2.4、“對齊”

這個(gè)就很簡單了，就是按鈕元素在內(nèi)容編輯塊中的對齊效果，分別是左對齊，右對齊，居中對齊和兩端對齊。前三個(gè)都很好理解，第四個(gè)兩端對齊稍微說一下，它的兩端對齊不像文字類型元素將文字以兩端對齊而分散開。在按鈕元素中，兩端對齊的方式，在保持文字部分居中的情況下，將按鈕的背景填滿整個(gè)內(nèi)容編輯塊中，如下圖所示：

2.5、“尺寸”

Elementor的按鈕元素提供了5種尺寸，分別是特小、小、中等、大、特大。非常簡單，同學(xué)們?nèi)我膺x擇一個(gè)尺寸大小就能看到按鈕的尺寸變化了。當(dāng)然了如果你想自定義設(shè)計(jì)按鈕的大小，Jack老師會(huì)在按鈕的樣式設(shè)置中進(jìn)行詳細(xì)說明。

2.6、“圖標(biāo)”

圖標(biāo)的作用是更好的引起訪客的點(diǎn)擊欲望，因?yàn)橐恍┌粹o的的存在是有潛移默化的引導(dǎo)點(diǎn)擊按鈕的暗示的。比方說你添加一個(gè)小手的圖標(biāo)，如下圖所示：

2.7、“圖標(biāo)的位置”

指的是圖標(biāo)和按鈕上文字的相對位置，有兩個(gè)選項(xiàng)，在文字之前和在文字之后，太簡單了不解釋。

2.8、“按鈕ID”

這個(gè)功能我還沒有仔細(xì)去研究過，在日常頁面設(shè)計(jì)中不使用該功能也沒有太大的關(guān)系。

第三步：對按鈕元素的樣式內(nèi)容部分進(jìn)行設(shè)置

3.1、“排版”

這里的排版和Jack老師其他文章中提到的Elementor元素文字排版中的相關(guān)設(shè)置都是一樣的，因?yàn)槲乙呀?jīng)講過很多次這里和以后的文章中，我都不會(huì)再浪費(fèi)更多時(shí)間去講解，因?yàn)楹芎唵危呛軐?shí)用，同學(xué)們自己去專研！

3.2、“文本陰影”

文本陰影的作用是讓按鈕上的文字有更加具體想顯示，產(chǎn)生一種立體的感覺。我個(gè)人使用的頻率較少，有興趣的同學(xué)可以去嘗試一下！

3.3、“標(biāo)準(zhǔn)和懸停”

指的是鼠標(biāo)沒有移動(dòng)到按鈕和鼠標(biāo)移動(dòng)到按鈕上的兩種不同的按鈕表現(xiàn)形式，這部分功能設(shè)置我會(huì)在文末具體操作演示。

3.4、“邊框類型”

Elementor編輯器提供了：沒有邊框線、實(shí)線邊框線、虛線邊框線、雙實(shí)線邊框線、凹槽邊框線、圓點(diǎn)邊框線在內(nèi)的一共6中邊框線效果。

如果你選擇了除“沒有邊框線”選項(xiàng)之外的其他5個(gè)選項(xiàng)中的任意一個(gè)選項(xiàng)，那么Elementor編輯器會(huì)額外提供2個(gè)功能給你設(shè)置：外邊框線顏色和外邊框線粗細(xì)。

3.5、“邊框半徑”

邊框半徑的作用就是將按鈕的4個(gè)邊角從直角轉(zhuǎn)化成4個(gè)圓潤的角，這樣的內(nèi)容設(shè)置或者說按鈕效果會(huì)讓訪客更加的舒服和容易接受。

3.6、“盒子影子”

和文字陰影的作用是一樣的，只不過盒子影子的效果是將整個(gè)按鈕添加一個(gè)陰影，這樣的陰影能夠讓整個(gè)按鈕更加的具象化和內(nèi)容凸顯，無形中增加按鈕被訪客點(diǎn)擊的幾率！

3.7、“內(nèi)距”

指的是按鈕內(nèi)的文字和按鈕4個(gè)內(nèi)容邊界線之間的距離，數(shù)值越大，文字距離按鈕外邊界線的距離也越大，而這部分距離是會(huì)被按鈕的背景色所自動(dòng)填充的！這樣同學(xué)們就可以拋棄按鈕主體設(shè)置中只能選擇大、小、特大、特效等有限的按鈕尺寸選項(xiàng)，自定義的設(shè)置按鈕的顯示大小！

最后，Jack老師來實(shí)操一把，做一個(gè)有懸停效果的按鈕

第一步：在標(biāo)準(zhǔn)狀態(tài)下，設(shè)置正常顯示的按鈕文字和文字背景，并添加一個(gè)圖標(biāo)，如下圖所示：

第二步：在懸停狀態(tài)下，設(shè)置相關(guān)的操作：

2.1 文本顏色設(shè)置為黑色

2.2 設(shè)置背景顏色為黃色

下圖就是正常狀態(tài)和懸停狀態(tài)下的同一個(gè)按鈕的兩種不同顯示效果：如下圖所示：

好了,以上就是本章關(guān)于如何使用Elementor的按鈕功能的全部內(nèi)容，按鈕元素是前端設(shè)計(jì)中引導(dǎo)訪客點(diǎn)擊轉(zhuǎn)化非常重要的一項(xiàng)內(nèi)容，能夠有效的提升網(wǎng)站的點(diǎn)擊轉(zhuǎn)化率和詢盤轉(zhuǎn)化率。所以希望同學(xué)們認(rèn)真的去摸索Elementor編輯器中的按鈕元素功能和相關(guān)設(shè)置。

如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關(guān)鍵詞--“Jack外貿(mào)建站”，排名首頁首位的就是我的網(wǎng)站，網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開發(fā)等實(shí)操干貨內(nèi)容在等著你哦!

來源：Jack SEO

來源：喜運(yùn)達(dá)