響應分欄模塊如何搭配使用?

響應分欄

功能作用

  • 添加的模塊默認是獨佔一行,當頁面一行需要顯示多個模塊時需要使用響應分欄爲基礎,把多個模塊放到一整行。可分別設置PC跟手機一行的顯示佈局方式。
  • 分欄的比例分爲12等份,每個數字表示分欄的寬度比例,例如:設置3,9,就是把屏幕以3:9的比例劃分;分別添加模塊到3跟9兩個區域,不支持小數。

實現效果

  • 通過使用響應分欄,實現網站一行放置多個模塊的佈局,編輯網站佈局必備模塊。

一、響應分欄設置

1.1 操作路徑

  • 網站編輯頁面——添加模塊——響應分欄——拖動模塊到頁面合適位置


2、設置方式

  • 2.1 通用設置:

  • 按頁面一行放置模塊多少或比例,可選擇使用系統默認的比例。

  • 以3.9比例爲例,添加後如下圖:


  • 2.2 自定義設置:

  • 若系統默認的比例不能滿足您的需求,點擊“自定義”可設置自己想要的分欄比例

  • 分欄總比例爲12,數字間以逗號隔開,如:3,4,5

  • PC跟手機的比例可以不一樣

  • 以上述截圖比例爲例

  • PC端效果:

  • 手機端效果:


二 、效果演示圖

  • 分欄比例設置爲:3,3,3,3 效果如下圖:

  • PC端在分欄裏面添加圖片模塊的效果如下圖:

  • 手機端在分欄裏面添加圖片模塊的效果如下圖:


常見問題:

  1. 問:爲什麼要添加響應分欄? 答:流式佈局拖出來的模塊會佔用一整行,當一行中需要添加多個模塊時,需要使用響應分欄把一行分爲多個區域使用。
  2. 問:響應分欄中可以再添加響應分欄嗎? 答:不行
  3. 問:響應分欄怎麼設置模塊整頁顯示?兩邊不留白? 答:高級設置——默認更改爲全屏