一、什么是按鈕組件？

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

二、如何使用按鈕組件？

1、如何查看按鈕組件是否已經(jīng)存在？

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

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加按鈕組件了；怎么判斷頁面上有沒有這個組件？

2、如何添加按鈕組件？

在頁面上添加組件的方法都是一樣的

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

圖1：

3、如何設(shè)置按鈕組件？

3.1 進(jìn)入組件的“設(shè)置”分兩種場景

1）此組件已經(jīng)添加好的場景：進(jìn)入所有這類組件設(shè)置項方法都是一樣的

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

3.2 在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容

按鈕文字：此文字顯示在按鈕上，可以根據(jù)需要編輯；
按鈕圖標(biāo)：選擇了帶圖標(biāo)的風(fēng)格，此處選擇的圖標(biāo)才會顯示；選擇的是不帶圖標(biāo)的風(fēng)格，即使此處選擇了圖標(biāo)也不會顯示；單擊“選擇圖標(biāo)”按鈕即可選擇圖標(biāo)，圖標(biāo)類型豐富多樣，如下圖3所示；
按鈕鏈接：單擊此按鈕跳轉(zhuǎn)的頁面鏈接，可以通過單擊下圖2中的“小鏈子按鈕”來設(shè)置，支持的鏈接類型有：站內(nèi)頁面、外部鏈接、電子郵件、頁面錨點、產(chǎn)品分類、文章分類、文件，若是要跳轉(zhuǎn)到網(wǎng)站內(nèi)的某個頁面，直接選擇站內(nèi)頁面，然后在下面選擇某個頁面就可以；
調(diào)整按鈕寬度：按鈕寬度的調(diào)整支持固定像素、固定百分比、固定左右間距三種設(shè)置方式。固定像素：即直接固定按鈕的寬度為多少像素；固定百分比：即按鈕所占的寬度與按鈕組件的寬度的比例，這個比例通過拖動下方的小按鈕來調(diào)整；固定左右間距：即按鈕文字距離按鈕左右邊框的距離，這個距離通過拖動下方的小按鈕來調(diào)整。

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

圖2：

圖3：

拖動右側(cè)的滾動條可以查看更多圖標(biāo)哦：

3.3 在組件的設(shè)置中可以設(shè)置組件展示的風(fēng)格

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

圖4：

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

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

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

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

圓角弧度：拖動小按鈕可以調(diào)整按鈕框四個角的圓角弧度；

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

圖標(biāo)大小：拖動小按鈕可以調(diào)整圖標(biāo)的大小，選擇的不帶圖標(biāo)樣式，此選項不顯示。

鼠標(biāo)懸浮樣式：即把鼠標(biāo)放到此按鈕上的樣式，具體支持設(shè)置的內(nèi)容如下（設(shè)置位置見下圖5）。

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

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

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

圓角弧度：拖動小按鈕可以調(diào)整按鈕框四個角的圓角弧度；

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

圖標(biāo)大?。和蟿有“粹o可以調(diào)整圖標(biāo)的大小，選擇的不帶圖標(biāo)樣式，此選項不顯示；

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

圖5：

3.4 在組件的設(shè)置中可以設(shè)置組件展示的特效

支持設(shè)置鼠標(biāo)懸浮在按鈕上時按鈕背景改變特效，見下圖6。

圖6：

4、保存、預(yù)覽、發(fā)布

設(shè)置好以上內(nèi)容以后要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網(wǎng)站后臺；

然后可以單擊“預(yù)覽”按鈕查看不同終端下展示的效果，如果不合適可以到后臺再做修改；

如果需要讓訪客也看到，請單擊頁面右上角的“發(fā)布”按鈕，發(fā)布之后稍等兩分鐘左右即可看網(wǎng)站前臺展示效果。