如何編輯通欄（自適應(yīng)模板）

一、功能介紹

本文分三部分：設(shè)置教程內(nèi)容流程如下圖：

二、功能說明

【版本】建站任意版本均可使用自適應(yīng)模板，不同版本功能不同

三、設(shè)置教程

1. 自適應(yīng)模板中的通欄屬性介紹

1.1 在自適應(yīng)模板中，添加任意一個模塊到網(wǎng)站中都相當(dāng)于添加了一個通欄，通欄是承載模塊的容器，模塊被放置在通欄之中，效果如下圖。通欄默認(rèn)帶有左右內(nèi)邊距（不同屏幕分辨率的左右內(nèi)邊距數(shù)值不同），內(nèi)邊距可調(diào)節(jié)。

1.2 由于添加任意一個模塊到網(wǎng)站中都相當(dāng)于添加了一個通欄，因此可以說整個網(wǎng)站頁面的設(shè)計都由通欄組成。通欄與通欄之間外邊距為0，因此想要調(diào)節(jié)兩個模塊之間的間距，可以通過調(diào)節(jié)通欄的上下內(nèi)邊距或模塊的外間距來實現(xiàn)。

1.3 通欄可以增加“列”，一個通欄中多支持增加4個“列”，每個“列”中可以添加不同的模塊，“列”的寬度可以通過拖動的方式修改，利用“列”可實現(xiàn)多種效果。

（例如下圖：圖中的通欄一眼看上去左邊是文字介紹，右邊是圖片，實際上是在通欄中添加了2個“列”，左邊的“列”中添加文本模塊和按鈕模塊，右邊的“列”中添加圖片模塊?！傲小钡膶挾瓤梢酝ㄟ^拖動的方式修改，當(dāng)“列”寬度改變時，每個“列”中的內(nèi)容布局也會隨之改變，如下圖的文字會自動換行，圖片、按鈕會變大變小。）

1.4 在通欄中添加模塊、修改內(nèi)容等操作需要在電腦視圖下完成；切換到手機(jī)視圖可以修改通欄的樣式（包括：背景、邊框、陰影、內(nèi)邊距）、通欄中模塊的樣式（包括：標(biāo)題欄、外間距等），但不可以修改內(nèi)容（如新增/刪除文字）。

2. 如何編輯自適應(yīng)模板中電腦視圖下的通欄？

在電腦視圖下，當(dāng)鼠標(biāo)懸停在通欄內(nèi)時，通欄的右上角會出現(xiàn)一個編輯欄，上面有五個按鈕，從左到右分別是“編輯通欄”、“設(shè)置樣式”、“新增通欄”、“上移/下移通欄”、“刪除通欄”。

2.1 編輯通欄

進(jìn)入“編輯通欄”狀態(tài)后，通欄右上角的設(shè)置項分為“添加列”和“退出編輯”。

鼠標(biāo)移動到“列”上，還可“編輯列”、“左移列”、“右移列”、“刪除列”。

2.1.1 添加列

顧名思義就是點擊之后向通欄中添加一個新的“列”，每個通欄中多支持添加4個“列”，每個“列”中可以添加不同的模塊，“列”的寬度可以通過拖動的方式修改，具體效果可查看上文1.3部分。

2.1.2 退出編輯

點擊“退出編輯”就可以退出“編輯列”的狀態(tài)，除此之外，單擊當(dāng)前通欄以外的區(qū)域也可以退出“編輯列”的狀態(tài)。

2.1.3 編輯列

在“編輯列”按鈕下，可設(shè)置列的“背景”、“邊框”、“陰影”。

① 背景

a. 默認(rèn)/隱藏

目前來說，選擇“默認(rèn)”或“隱藏”時，列的背景都為透明。

但在網(wǎng)站背景色為白色的情況下，選擇“默認(rèn)”或“隱藏”，在視覺上都并無差異，列的背景都顯示為白色。（如下圖1）

而當(dāng)網(wǎng)站背景色不為白色時，選擇“默認(rèn)”或“隱藏”，就能看得出列的背景色為透明了。（如下圖2）

b. 自定義

選擇“自定義”時，可設(shè)置列的背景為“純色”、“漸變”或“圖片”。

② 邊框

目前來說，選擇“默認(rèn)”或“隱藏”時，列的邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。

③ 陰影

可選擇“顯示”或“隱藏”列的陰影，默認(rèn)為“隱藏”，兩者效果差異。

④ 左移列、右移列

可通過“左移列”或“右移列”，調(diào)節(jié)列與列之間的排列順序。

⑤ 刪除列

每個通欄至少要保留一個列，當(dāng)只剩一個列時，不可再刪除列。

2.2 設(shè)置樣式

在“設(shè)置樣式”按鈕下，設(shè)置項分為“設(shè)計”和“間距”兩個部分。

2.2.1 設(shè)計

① 背景

a. 默認(rèn)/隱藏

目前來說，選擇“默認(rèn)”或“隱藏”時，通欄的背景都為透明。

但在網(wǎng)站背景色為白色的情況下，選擇“默認(rèn)”或“隱藏”，在視覺上都并無差異，通欄的背景都顯示為白色。（如下圖1）

而當(dāng)網(wǎng)站背景色不為白色時，選擇“默認(rèn)”或“隱藏”，就能看得出通欄的背景色為透明了。（如下圖2）

b. 自定義

選擇“自定義”時，可設(shè)置通欄的背景為“純色”、“漸變”或“圖片”。

② 邊框

目前來說，選擇“默認(rèn)”或“隱藏”時，通欄邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。

③ 陰影

可選擇“顯示”或“隱藏”通欄陰影，默認(rèn)為“隱藏”，兩者效果差異如下圖。

2.2.2 間距

間距部分包括“上內(nèi)邊距”、“下內(nèi)邊距”、“左內(nèi)邊距”、“右內(nèi)邊距”，通欄的內(nèi)邊距指的是被放置在通欄內(nèi)的模塊與通欄邊框之間的距離，如下圖。

當(dāng)通欄的內(nèi)邊距為0時，被放置在通欄內(nèi)的模塊與通欄邊框之間的距離也就為0。這個時候，如果模塊的外邊距也為0，那么在視覺上模塊就會與通欄邊框無縫貼合（如下圖1）；如果模塊的外邊距不為0，那么在視覺上模塊與通欄邊框之間還是會存在空位（如下圖2）。

2.3 新增通欄

點擊“新增通欄”后，默認(rèn)會在當(dāng)前通欄的下方新增一個通欄，新通欄自帶的左右內(nèi)邊距與當(dāng)前通欄的左右內(nèi)邊距相同。

2.4 上移/下移通欄

通欄暫不支持通過拖拽的方式移動，因此想改變通欄的位置時，可以通過“上移/下移通欄”按鈕實現(xiàn)。（通欄內(nèi)的模塊支持通過拖拽的方式改變位置。）

2.5 刪除通欄

點擊“刪除通欄”按鈕即可刪除通欄。如果刪除后沒有進(jìn)行保存，那么“刪除通欄”的操作是可以撤銷的，如果刪除后已經(jīng)保存則不支持撤銷。

3. 如何編輯自適應(yīng)模板中手機(jī)視圖的通欄？

在手機(jī)視圖下，當(dāng)鼠標(biāo)懸停在通欄內(nèi)時，通欄的右上角會出現(xiàn)一個編輯欄，上面有兩個按鈕，從左到右分別是“編輯通欄”、“隱藏通欄”。

手機(jī)視圖下，通欄的樣式可以獨立設(shè)置（通過“設(shè)置樣式”按鈕來設(shè)置），不影響到電腦視圖。

3.1 設(shè)置樣式

在“設(shè)置樣式”按鈕下，設(shè)置項分為“列布局”、“設(shè)計”和“間距”三個部分。

“列布局”設(shè)置項僅在當(dāng)前通欄中存在2個或以上“列”時才出現(xiàn)，當(dāng)前通欄中僅有1個“列”時不顯示“列布局”設(shè)置項。

“設(shè)計”部分可編輯通欄的背景、邊框、陰影；“間距”部分可調(diào)節(jié)通欄的上下左右內(nèi)邊距。

3.1.1 列布局

當(dāng)通欄中存在的“列”的數(shù)量不同時，可供選擇的列布局樣式也不同。

當(dāng)“列”的數(shù)量為2列時，可供選擇的列布局樣式如下：

當(dāng)“列”的數(shù)量為3列時，可供選擇的列布局樣式如下：

當(dāng)“列”的數(shù)量為4列時，可供選擇的列布局樣式如下：

3.1.2 設(shè)計

① 背景

a. 默認(rèn)/隱藏

目前來說，選擇“默認(rèn)”或“隱藏”時，通欄的背景都為透明。

但在網(wǎng)站背景色為白色的情況下，選擇“默認(rèn)”或“隱藏”，在視覺上都并無差異，通欄的背景都顯示為白色。（如下圖1）

而當(dāng)網(wǎng)站背景色不為白色時，選擇“默認(rèn)”或“隱藏”，就能看得出通欄的背景色為透明了。（如下圖2）

b.自定義

選擇“自定義”時，可設(shè)置通欄的背景為“純色”、“漸變”或“圖片”。

② 邊框

目前來說，選擇“默認(rèn)”或“隱藏”時，通欄邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。

③ 陰影

可選擇“顯示”或“隱藏”通欄陰影，默認(rèn)為“隱藏”，兩者效果差異如下圖。

3.1.3 間距

間距部分包括“上內(nèi)邊距”、“下內(nèi)邊距”、“左內(nèi)邊距”、“右內(nèi)邊距”，通欄的內(nèi)邊距指的是被放置在通欄內(nèi)的模塊與通欄邊框之間的距離，如下圖。

當(dāng)通欄的內(nèi)邊距為0時，被放置在通欄內(nèi)的模塊與通欄邊框之間的距離也就為0。這個時候，如果模塊的外邊距也為0，那么在視覺上模塊就會與通欄邊框無縫貼合（如下圖1）；如果模塊的外邊距不為0，那么在視覺上模塊與通欄邊框之間還是會存在空位（如下圖2）。