如何使用Elementor的按鈕功能
在前端頁面設計中，按鈕是非常重要的一個內容元素，它的功能不在于能夠表達多少頁面設計者的思想，按鈕存在的意義為的就是更好的引導客戶的內容閱讀轉化，也就是我們常說的Call-To-Action !任何頁面不管前端設計的內容好不好看，如果不能將客戶的閱讀轉化為客戶的點擊那么都是在耍流氓！那么按鈕這一元素，作為將訪客從內容閱讀到點擊轉化之間的“橋梁”，如何設計成富有點擊欲望的視覺效果就顯得非常有必要了。接下來，我們就全面的來了解一下Elementor編輯器中的按鈕元素的相關功能！
第一步：將按鈕元素添加到內容編輯版塊
如上圖所示，在箭頭1所指的地方，按住鼠標左鍵拖動“按鈕”元素不松開拖動到箭頭2所指的內容編輯區域，為了更好的體現Elementor編輯器的個性化設計功能，Jack老師將內容版塊的布局設置為一行兩列（這一點沒有在上圖中展現，上圖中還是一行一列的內容排布形式）。
第二步：對按鈕元素的主體內容部分進行設置
2.1、“類型”
Elementor的按鈕元素提供了5種按鈕類型供同學們進行選擇，分別是默認、信息、成功、警告、危險。這5種選擇本身并沒有什么不同，唯一的區別就是按鈕的背景顏色會有所不同。Jack老師將這5中不同的樣式羅列在了下圖中
2.2、“文本”
指的就是按鈕上的文字表達部分，默認狀態ia是“點擊這里”，我們可以把這4個子刪除掉，重新寫，比如:“contact us now”、“download products catalogue”等等。如果你嫌麻煩，你還可以點擊文字輸入框后面的那個小按鈕。這個小按鈕的功能是添加動態標簽，Elementor編輯器提供了非常多的動態標簽，同學們點擊之后選擇自己需要的動態標簽即可。點擊之后某個動態標簽就替代了原先系統默認提供的“點擊這里”文字
2.3、“鏈接”
這里的鏈接指的就是當訪客點擊該按鈕之后，頁面跳轉到的最終目標頁面url。比方說，Jack老師在某個頁面上設置了一個按鈕，該按鈕的目的是點擊之后跳轉到聯系頁面，那么這里就需要將鏈接地址添加為：www.example.com/contact-us/? ?這種鏈接是非常常見的做法，那有沒有更直接的點擊之后就能跳出聯系表單的設計功能呢？有！Jack老師會把這種設計放在文章的末尾進行詳細講解。
2.4、“對齊”
這個就很簡單了，就是按鈕元素在內容編輯塊中的對齊效果，分別是左對齊，右對齊，居中對齊和兩端對齊。前三個都很好理解，第四個兩端對齊稍微說一下，它的兩端對齊不像文字類型元素將文字以兩端對齊而分散開。在按鈕元素中，兩端對齊的方式，在保持文字部分居中的情況下，將按鈕的背景填滿整個內容編輯塊中，如下圖所示：
2.5、“尺寸”
Elementor的按鈕元素提供了5種尺寸，分別是特小、小、中等、大、特大。非常簡單，同學們任意選擇一個尺寸大小就能看到按鈕的尺寸變化了。當然了如果你想自定義設計按鈕的大小，Jack老師會在按鈕的樣式設置中進行詳細說明。
2.6、“圖標”
圖標的作用是更好的引起訪客的點擊欲望，因為一些按鈕的的存在是有潛移默化的引導點擊按鈕的暗示的。比方說你添加一個小手的圖標，如下圖所示：
2.7、“圖標的位置”
指的是圖標和按鈕上文字的相對位置，有兩個選項，在文字之前和在文字之后，太簡單了不解釋。
2.8、“按鈕ID”
這個功能我還沒有仔細去研究過，在日常頁面設計中不使用該功能也沒有太大的關系。
第三步：對按鈕元素的樣式內容部分進行設置
3.1、“排版”
這里的排版和Jack老師其他文章中提到的Elementor元素文字排版中的相關設置都是一樣的，因為我已經講過很多次這里和以后的文章中，我都不會再浪費更多時間去講解，因為很簡單，但是很實用，同學們自己去專研！
3.2、“文本陰影”
文本陰影的作用是讓按鈕上的文字有更加具體想顯示，產生一種立體的感覺。我個人使用的頻率較少，有興趣的同學可以去嘗試一下！
3.3、“標準和懸停”
指的是鼠標沒有移動到按鈕和鼠標移動到按鈕上的兩種不同的按鈕表現形式，這部分功能設置我會在文末具體操作演示。
3.4、“邊框類型”
Elementor編輯器提供了：沒有邊框線、實線邊框線、虛線邊框線、雙實線邊框線、凹槽邊框線、圓點邊框線在內的一共6中邊框線效果。
如果你選擇了除“沒有邊框線”選項之外的其他5個選項中的任意一個選項，那么Elementor編輯器會額外提供2個功能給你設置：外邊框線顏色和外邊框線粗細。
3.5、“邊框半徑”
邊框半徑的作用就是將按鈕的4個邊角從直角轉化成4個圓潤的角，這樣的內容設置或者說按鈕效果會讓訪客更加的舒服和容易接受。
3.6、“盒子影子”
和文字陰影的作用是一樣的，只不過盒子影子的效果是將整個按鈕添加一個陰影，這樣的陰影能夠讓整個按鈕更加的具象化和內容凸顯，無形中增加按鈕被訪客點擊的幾率！
3.7、“內距”
指的是按鈕內的文字和按鈕4個內容邊界線之間的距離，數值越大，文字距離按鈕外邊界線的距離也越大，而這部分距離是會被按鈕的背景色所自動填充的！這樣同學們就可以拋棄按鈕主體設置中只能選擇大、小、特大、特效等有限的按鈕尺寸選項，自定義的設置按鈕的顯示大??！
最后，Jack老師來實操一把，做一個有懸停效果的按鈕
第一步：在標準狀態下，設置正常顯示的按鈕文字和文字背景，并添加一個圖標，如下圖所示：
第二步：在懸停狀態下，設置相關的操作：
2.1 文本顏色設置為黑色
2.2 設置背景顏色為黃色
下圖就是正常狀態和懸停狀態下的同一個按鈕的兩種不同顯示效果：如下圖所示：
好了,以上就是本章關于 如何使用Elementor的按鈕功能 的全部內容，按鈕元素是前端設計中引導訪客點擊轉化非常重要的一項內容，能夠有效的提升網站的點擊轉化率和詢盤轉化率。所以希望同學們認真的去摸索Elementor編輯器中的按鈕元素功能和相關設置。
如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關鍵詞--“Jack外貿建站”，排名首頁首位的就是我的網站，網站上有更多外貿建站、谷歌SEO優化、外貿客戶開發等實操干貨內容在等著你哦!
來源：Jack SEO
來源：喜運達
加入賣家交流群
快速對接各種平臺優質資源
標簽：誠約國際物流廣東東莞物流ems如何寄國際快遞到韓國國際快遞海外倉 法國倉庫跨境電商部哥倫比亞空運物流發貨菲律賓馬里亞納海運俄羅斯國際小包