如何使用按鈕組件？

一、什麼是按鈕組件？

按鈕組件是一個在頁面上實現添加帶有交互功能按鈕的模塊，這個按鈕可以起到吸引訪客去點擊引發進一步互動的作用。按鈕組件一般添加在頁面上需要吸引訪客去點擊進行下一步互動的地方，比如在一句具有號召力的口號後面添加一個按鈕，單擊此按鈕可以鏈接到聯繫我們頁面，這樣可以吸引訪客去填寫聯繫我們表單從而帶來訂單的機會。按鈕組件支持設置按鈕上的文字、圖標、按鈕的鏈接以及按鈕的大小、顏色、樣式、交互效果等。

二、如何使用按鈕組件？

1、如何查看按鈕組件是否已經存在？

如果這個按鈕組件已經存在了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加按鈕組件了；怎麼判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內容是使用什麼組件製作的？

2、如何添加按鈕組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？

添加的組件名稱為“按鈕”，如下圖1所示：

圖1：

3、如何設置按鈕組件？

3.1 進入組件的“設置”分兩種場景

1）此組件已經添加好的場景：進入所有這類組件設置項方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？

2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。

3.2在組件的設置中可以設置組件展示的內容

按鈕文字：此文字顯示在按鈕上，可以根據需要編輯；
按鈕圖標：選擇了帶圖標的風格，此處選擇的圖標才會顯示；選擇的是不帶圖標的風格，即使此處選擇了圖標也不會顯示；單擊“選擇圖標”按鈕即可選擇圖標，圖標類型豐富多樣，如下圖3所示；
按鈕鏈接：單擊此按鈕跳轉的頁面鏈接，可以通過單擊下圖2中的“小鍊子按鈕”來設置，支持的鏈接類型有：站內頁面、外部鏈接、電子郵件、頁面錨點、產品分類、文章分類、文件，若是要跳轉到網站內的某個頁面，直接選擇站內頁面，然後在下面選擇某個頁面就可以；單擊查看關於鏈接類型的詳細介紹。
調整按鈕寬度：按鈕寬度的調整支持固定像素、固定百分比、固定左右間距三種設置方式。固定像素：即直接固定按鈕的寬度為多少像素；固定百分比：即按鈕所佔的寬度與按鈕組件的寬度的比例，這個比例通過拖動下方的小按鈕來調整；固定左右間距：即按鈕文字距離按鈕左右邊框的距離，這個距離通過拖動下方的小按鈕來調整。

調整按鈕高度：通過拖動小按鈕直接調整按鈕的高度；
按鈕位置：有居左、居中、居右三種位置，這個位置指的是按鈕框與按鈕組件的相對位置。

圖2：

圖3：

拖動右側的滾動條可以查看更多圖標哦：

3.3在組件的設置中可以設置組件展示的風格

按鈕樣式：支持不帶圖標樣式、也支持帶可更換圖標樣式以及固定圖標樣式，詳情見下圖4所示。

圖4：

初始樣式：支持設置按鈕的初始樣式，具體支持設置的內容如下（設置位置見下圖5）。

背景顏色：即按鈕框的背景顏色，單擊顏色框右側的下拉小箭頭可以選擇顏色，單擊顏色即可選擇；

文字顏色：既按鈕上的文字顏色，單擊顏色框右側的下拉小箭頭可以選擇顏色，單擊顏色即可選擇；

邊框：既按鈕框的邊框，支持設置按鈕框的顏色、線條、線條粗細，單擊下拉小箭頭即可選擇；

圓角弧度：拖動小按鈕可以調整按鈕框四個角的圓角弧度；

圖標顏色：單擊顏色框右側的下拉小箭頭，可以設置圖標顏色，選擇的不帶圖標樣式，此選項不顯示；

圖標大小：拖動小按鈕可以調整圖標的大小，選擇的不帶圖標樣式，此選項不顯示。

鼠標懸浮樣式：即把鼠標放到此按鈕上的樣式，具體支持設置的內容如下（設置位置見下圖5）。

背景顏色：即按鈕框的背景顏色，單擊顏色框右側的下拉小箭頭可以選擇顏色，單擊顏色即可選擇；

文字顏色：既按鈕上的文字顏色，單擊顏色框右側的下拉小箭頭可以選擇顏色，單擊顏色即可選擇；

邊框：既按鈕框的邊框，支持設置按鈕框的顏色、線條、線條粗細，單擊下拉小箭頭即可選擇；

圓角弧度：拖動小按鈕可以調整按鈕框四個角的圓角弧度；

圖標顏色：單擊顏色框右側的下拉小箭頭，可以設置圖標顏色，選擇的不帶圖標樣式，此選項不顯示；

圖標大小：拖動小按鈕可以調整圖標的大小，選擇的不帶圖標樣式，此選項不顯示；

圖標動畫：支持選擇是否顯示圖標動畫，選擇的不帶圖標樣式，此選項不顯示。

圖5：

3.4在組件的設置中可以設置組件展示的特效

支持設置鼠標懸浮在按鈕上時按鈕背景改變特效，見下圖6。

圖6：