隱藏模塊功能

隱藏模塊

功能作用

  • 實現響應式建站針對部分設備隱藏某些模塊,達到頁面精簡美觀;也可實現電腦和手機版展示不一樣的頁面。

一、 隱藏設置的2種方式

1.1、分欄隱藏:(整個分欄的內容都隱藏)

1)登錄網站編輯頁面——鼠標移到需要隱藏的分欄——點隱藏:

2)跳出選擇要隱藏的設備:(可勾選整欄隱藏,或可單選某一欄,灰色表示隱藏)


2.2、模塊隱藏

1)登錄網站編輯頁面——鼠標移到需要隱藏的模塊——(例如需要隱藏PC端的模塊,在PC端編輯頁面選擇要隱藏的模塊,點眼睛即隱藏,手機端同理)

注:提示有隱藏分欄這個框只在編輯的情況下看到,正式網站是不會顯示。


二、如何還原顯示已隱藏的模塊

  • 編輯頁面——勾選左上角菜單——顯示隱藏模塊
  • 找到之前隱藏過的閉上眼睛的模塊——點擊眼睛——即可還原顯示模塊


  • 手機端同理:


三、如何利用隱藏模塊功能,實現PC跟手機顯示不一樣?

  • 例如:PC上設計好效果:

  • 響應到手機上的效果不理想:


  • 需要把手機的文字整改,但不能在手機直接修改,否則PC也會同步修改。下面需要使用隱藏模塊功能實現:

3.1 切換到手機端編輯頁,把三個文字模塊隱藏手機端

  • 隱藏後效果:

3.2 在手機端分別重新添加模塊,爲手機端做出理想效果

  • 添加後的效果:

  • 同時剛手機端添加的模塊也會響應到PC端:

3.3 再到PC端的編輯頁面,把剛響應過來手機端的內容隱藏

3.4 完成後預覽的PC效果:

3.5 完成後預覽的手機效果:

  • 這樣就可以實現電腦版和手機版響應出來的頁面展示效果不一樣。