自定義分欄模塊

自定義分欄

功能作用

  • 添加的模塊默認是獨佔一行,當頁面一行需要顯示多個模塊時需要使用分欄爲基礎,把多個模塊放到一整行。可分別設置PC跟手機一行的顯示佈局方式。
  • 自定義分欄各分欄之間可通過拖動來調整之間的比例,可更直觀及細節的調整模塊的位置。

實現效果

  • 實現網站佈局需要用到自定義分欄,如下圖,一行需要放多個模塊時,先添加一個自定義分欄選擇5欄,再分別把把個模塊對應拖到分欄內容區,再調整分欄之間的離距即可。

一、 添加模塊

  • 1.1 設置路徑:網站編輯頁面——左側添加模塊——自定義分欄——拖動模塊到頁面合適位置


  • 1.2 模塊設置:選擇設置電腦及手機分欄的預設佈局


  • 以三列分欄,10分欄間距爲例,添加後如下圖:


  • 分欄比例設置調整:


二.跟舊響應分欄區別

2.1 自定義分欄可直接使用5欄佈局分欄

2.2 自定義分欄可自由調整不規則比例分欄(常見網站頁尾信息不規則比例分佈等)

三.配合其它模塊使用示例

  • 汽車簡介效果圖:


3.1 、添加自定義分欄模塊,選擇分欄間距0,電腦“四列分欄”手機“一行兩欄”


3.2 、分別添加效果圖的汽車“圖片模塊”及文字描述的“文本圖文模塊”,拖至對應分欄位置。


3.3 、添加後分別在各欄之間鼠標拖動調整位置至合適即可。


3.4 、 手機端適應的效果


常見問題:

  1. 問:爲什麼要添加響應分欄? 答:流式佈局拖出來的模塊會佔用一整行,當一行中需要添加多個模塊時,需要使用響應分欄把一行分爲多個區域使用。
  2. 問:響應分欄跟自定義分欄有什麼區別? 答:響應分欄需要設置固定比例分欄,自定義分欄通過拖動方式設置比例,可更細節調整。
  3. 問:響應分欄怎麼設置模塊整頁顯示?兩邊不留白? 答:高級設置——默認更改爲全屏