響應式頁面指的是，當你的顧客不論用電腦、手機、平板瀏覽網站時，網站內容可以自動適應裝置大小的不同，而改變整個網站版面，將圖片、文字、元件大小都調整成適合觀看的模式。

在過去，響應式網站是一種優勢，但在現代這個人人手機不離身的環境下，響應式網站變成了一種必備要素，若你的網站無法自動提供適當的版面大小給用戶，那將會流失掉非常多的潛在客戶。

Divi編輯器提供了電腦、平板、手機的即時預覽畫面，讓你可以在設計網站當下，馬上確認該頁面在不同裝置上的效果，並且提供個別設定選項，讓你能夠自行調整每個裝置的數值大小，確保每一個用戶都能在你的網站有良好的使用體驗。這篇文章，我會教你如何查看各個裝置的預覽畫面，以及如何調整其個別數值設定，以及透過顯示設定，將任何你不想要顯示的元件隱藏。

1.查看電腦、平板、手機畫面

在你進入Divi Builder時，點開下方三個點點的紫色圓圈，會看到如下圖，可以調整整個頁面的設定。而左下角的灰色選項條，從左至右個別是列表、整體預覽、電腦預覽、平板預覽以及手機預覽。你可以在編輯網站時，隨時進行切換，確認你的內容可以完美地顯示在這三種裝置上。

---

2.調整個別數值設定

那麼學會如何預覽不同裝置的畫面後，當發現有些內容在其中一種裝置上，出現過大或過小的問題，該怎麼處理呢？

在Divi編輯器中，大多數可調整的選項，都可以針對裝置，進行個別設定，以下以文字大小作為舉例，將你的滑鼠游標，移到Text Size右邊時，Divi編輯器會自動滾出幾個圖示按鈕（如果沒有自動出現，點點滑鼠左鍵兩下就可以囉），點擊中間有個像是手機的圖示，會叫出下方三個裝置的選項。

假設你只有設定電腦裝置的文字大小，後面的平板與手機裝置，將會跟著電腦版本的設定，如果你只設定了電腦與平板的文字大小，那手機裝置將會依照平板的數值顯示文字大小。

如果在經過一番設定後，都不滿意的話，可以點選第四個圓圈箭頭的圖示，就會將所有設定歸回初始狀態囉。

---

3.顯示設定

有時候我們如果希望某些Section、Row、Module，只出現在電腦或手機畫面，可以跳到Advanced欄位，把不想要出現的裝置勾選，就能針對裝置作個別隱藏Disable。

---

舉例示範

我通常會在Theme Builder裡面建立頁首的選單列，並且針對電腦用戶以及平板手機用戶，設計出不同的選單內容。

電腦用戶因為螢幕大，可以看到比較全面的網站設計，我會設計一個專門給電腦用戶的Section，並且在Advanced→Visibility中，將手機Phoen跟平板Tablet隱藏，以避免造成手機用戶瀏覽上的不適。

而手機用戶的Section，內容會盡量單純，不加入過多複雜花俏的圖示，並將選單的高度限制在50px以內，以免手機用戶在瀏覽文章時，有一大部分的畫面被選單遮擋，最後在Advanced→Visibility中，將電腦Desktop隱藏，就不會讓電腦用戶看到兩個選單啦。

---

如果你對於這篇文章有任何疑問或者建議，都歡迎你在底下留言給我喔：）