一、功能介紹
本文分三部分：設置教程內容流程如下圖：
二、功能說明
【版本】建站任意版本均可使用自適應模板，不同版本功能不同
三、設置教程
1. 自適應模板中的通欄屬性介紹
在自適應模板中，添加任意一個模塊到網站中都相當于添加了一個通欄，通欄是承載模塊的容器，模塊被放置在通欄之中，效果如下圖。通欄默認帶有左右內邊距（不同屏幕分辨率的左右內邊距數值不同），內邊距可調節。
由于添加任意一個模塊到網站中都相當于添加了一個通欄，因此可以說整個網站頁面的設計都由通欄組成。通欄與通欄之間外邊距為0，因此想要調節兩個模塊之間的間距，可以通過調節通欄的上下內邊距或模塊的外間距來實現。（效果如下圖）
通欄可以增加“列”，一個通欄中多支持增加4個“列”，每個“列”中可以添加不同的模塊，“列”的寬度可以通過拖動的方式修改，利用“列”可實現多種效果。
（例如下圖：圖中的通欄一眼看上去左邊是文字介紹，右邊是圖片，實際上是在通欄中添加了2個“列”，左邊的“列”中添加文本模塊和按鈕模塊，右邊的“列”中添加圖片模塊。“列”的寬度可以通過拖動的方式修改，當“列”寬度改變時，每個“列”中的內容布局也會隨之改變，如下圖的文字會自動換行，圖片、按鈕會變大變小。）
在通欄中添加模塊、修改內容等操作需要在電腦視圖下完成；切換到手機視圖可以修改通欄的樣式（包括：背景、邊框、陰影、內邊距）、通欄中模塊的樣式（包括：標題欄、外間距等），但不可以修改內容（如新增/刪除文字）。
2. 如何編輯自適應模板中電腦視圖下的通欄？
在電腦視圖下，當鼠標懸停在通欄內時，通欄的右上角會出現一個編輯欄，上面有五個按鈕，從左到右分別是“編輯通欄”、“設置樣式”、“新增通欄”、“上移/下移通欄”、“刪除通欄”。
2.1 編輯通欄
進入“編輯通欄”狀態后，通欄右上角的設置項分為“添加列”和“退出編輯”。
鼠標移動到“列”上，還可“編輯列”、“左移列”、“右移列”、“刪除列”。
添加列
顧名思義就是點擊之后向通欄中添加一個新的“列”，每個通欄中多支持添加4個“列”，每個“列”中可以添加不同的模塊，“列”的寬度可以通過拖動的方式修改，具體效果可查看上文1.3部分。
退出編輯
點擊“退出編輯”就可以退出“編輯列”的狀態，除此之外，單擊當前通欄以外的區域也可以退出“編輯列”的狀態。
編輯列
在“編輯列”按鈕下，可設置列的“背景”、“邊框”、“陰影”。
① 背景
a. 默認/隱藏
目前來說，選擇“默認”或“隱藏”時，列的背景都為透明。
但在網站背景色為白色的情況下，選擇“默認”或“隱藏”，在視覺上都并無差異，列的背景都顯示為白色。（如下圖1）
而當網站背景色不為白色時，選擇“默認”或“隱藏”，就能看得出列的背景色為透明了。（如下圖2）
b. 自定義
選擇“自定義”時，可設置列的背景為“純色”、“漸變”或“圖片”。
② 邊框
目前來說，選擇“默認”或“隱藏”時，列的邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。
③ 陰影
可選擇“顯示”或“隱藏”列的陰影，默認為“隱藏”，兩者效果差異如下圖。
④ 左移列、右移列
可通過“左移列”或“右移列”，調節列與列之間的排列順序。
⑤ 刪除列
每個通欄至少要保留一個列，當只剩一個列時，不可再刪除列。
2.2 設置樣式
在“設置樣式”按鈕下，設置項分為“設計”和“間距”兩個部分。
2.2.1 設計
① 背景
a. 默認/隱藏
目前來說，選擇“默認”或“隱藏”時，通欄的背景都為透明。
但在網站背景色為白色的情況下，選擇“默認”或“隱藏”，在視覺上都并無差異，通欄的背景都顯示為白色。（如下圖1）
而當網站背景色不為白色時，選擇“默認”或“隱藏”，就能看得出通欄的背景色為透明了。（如下圖2）
b. 自定義
選擇“自定義”時，可設置通欄的背景為“純色”、“漸變”或“圖片”。
② 邊框
目前來說，選擇“默認”或“隱藏”時，通欄邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。
③ 陰影
可選擇“顯示”或“隱藏”通欄陰影，默認為“隱藏”，兩者效果差異如下圖。
2.2.2 間距
間距部分包括“上內邊距”、“下內邊距”、“左內邊距”、“右內邊距”，通欄的內邊距指的是被放置在通欄內的模塊與通欄邊框之間的距離。
當通欄的內邊距為0時，被放置在通欄內的模塊與通欄邊框之間的距離也就為0。這個時候，如果模塊的外邊距也為0，那么在視覺上模塊就會與通欄邊框無縫貼合（如下圖1）；如果模塊的外邊距不為0，那么在視覺上模塊與通欄邊框之間還是會存在空位（如下圖2）。
2.3 新增通欄
點擊“新增通欄”后，默認會在當前通欄的下方新增一個通欄，新通欄自帶的左右內邊距與當前通欄的左右內邊距相同。
2.4 上移/下移通欄
通欄暫不支持通過拖拽的方式移動，因此想改變通欄的位置時，可以通過“上移/下移通欄”按鈕實現。（通欄內的模塊支持通過拖拽的方式改變位置。）
2.5 刪除通欄
點擊“刪除通欄”按鈕即可刪除通欄。如果刪除后沒有進行保存，那么“刪除通欄”的操作是可以撤銷的，如果刪除后已經保存則不支持撤銷。
3. 如何編輯自適應模板中手機視圖的通欄？
在手機視圖下，當鼠標懸停在通欄內時，通欄的右上角會出現一個編輯欄，上面有兩個按鈕，從左到右分別是“編輯通欄”、“隱藏通欄”。
手機視圖下，通欄的樣式可以獨立設置（通過“設置樣式”按鈕來設置），不影響到電腦視圖。
3.1 設置樣式
在“設置樣式”按鈕下，設置項分為“列布局”、“設計”和“間距”三個部分。
“列布局”設置項僅在當前通欄中存在2個或以上“列”時才出現，當前通欄中僅有1個“列”時不顯示“列布局”設置項。
“設計”部分可編輯通欄的背景、邊框、陰影；“間距”部分可調節通欄的上下左右內邊距。
3.1.1 列布局
當通欄中存在的“列”的數量不同時，可供選擇的列布局樣式也不同。
當“列”的數量為2列時，可供選擇的列布局樣式如下：
當“列”的數量為3列時，可供選擇的列布局樣式如下：
當“列”的數量為4列時，可供選擇的列布局樣式如下：
3.1.2 設計
① 背景
a. 默認/隱藏
目前來說，選擇“默認”或“隱藏”時，通欄的背景都為透明。
但在網站背景色為白色的情況下，選擇“默認”或“隱藏”，在視覺上都并無差異，通欄的背景都顯示為白色。（如下圖1）
而當網站背景色不為白色時，選擇“默認”或“隱藏”，就能看得出通欄的背景色為透明了。（如下圖2）
b.自定義
選擇“自定義”時，可設置通欄的背景為“純色”、“漸變”或“圖片”。
② 邊框
目前來說，選擇“默認”或“隱藏”時，通欄邊框都不顯示；選擇“自定義”時，可編輯邊框的顏色、寬度、樣式、位置，效果如下圖。
③ 陰影
可選擇“顯示”或“隱藏”通欄陰影，默認為“隱藏”，兩者效果差異如下圖。
3.1.3 間距
間距部分包括“上內邊距”、“下內邊距”、“左內邊距”、“右內邊距”，通欄的內邊距指的是被放置在通欄內的模塊與通欄邊框之間的距離。
當通欄的內邊距為0時，被放置在通欄內的模塊與通欄邊框之間的距離也就為0。這個時候，如果模塊的外邊距也為0，那么在視覺上模塊就會與通欄邊框無縫貼合（如下圖1）；如果模塊的外邊距不為0，那么在視覺上模塊與通欄邊框之間還是會存在空位（如下圖2）。
3.2 隱藏通欄
如果不想讓某個通欄在手機視圖下顯示，可以點擊“隱藏通欄”按鈕將其隱藏。
隱藏了的通欄被收在手機視圖右下角的圖標里，再次點擊該圖標時，可將隱藏了的通欄重新顯示。
感謝反饋
