網頁設計時即使在電腦端顯示沒有問題，記得要查看手機裝置端的狀況。本文介紹WordPress網站如何利用Elementor外掛視覺化切換模式，進行RWD響應式網頁設計(Responsive Web Design)。

一、電腦網頁版面

贊贊小屋網站的一個頁面，在電腦端的呈現沒有太大問題，大致上可以看得出來在標題和段落文字都做了縮排的處理。

二、WordPress Elementor

上個步驟所看到的版面縮排效果，一般在html是屬於邊界和框距的標籤進行設定，贊贊小屋是使用WordPress主流Elementot外掛工具，視覺化簡單設定邊界和間距。

三、手機裝置檢視

同一個網頁雖然在電腦上顯示效果不錯，在手機裝置上一看卻發現慘不忍睹，文字垂直擠成一排，或者是變成很窄，中間還有一個明顯的空白板塊。

四、平板手機模式

造成上個步驟所看到的情形，應該是在電腦端的縮排設定同樣套用在比較狹窄的手機裝置上，例如100個像素縮排好了，電腦端會是非常美觀，手機端的話也許它整個寬度就只有400像素，左右再縮排100個像素大概就是不太能看了。如果跟贊贊小屋一樣是WordPress架設的網站而且有安裝Elementor外掛的話，解決方法很簡單，編輯器中任何一個區塊大致都有一個小電腦圖標，點一下它會展開成電腦、平板、手機三個垂直的小圖標，配合先前步驟所遇到的問題，應該很容易瞭解它的作用，例如在此點選手機圖標。

五、手機網頁設計

點選了手機圖標之後，會看到整個Elementor編輯介面有了很大的變化，原本的小電腦圖標都變成是手機圖標，最上方中間有和上個步驟看到同樣的電腦、平板、手機三個小圖標，在最右上方有一個寬度跟高度的兩組數字，代表目前的手機裝置長寛，然後最重要的是在預覽畫面會是比較像是長方形的手機裝置預覽圖，毫無疑問目前已經進入了手機裝置的網頁設計編輯器。注意到目前的「邊框間距」依序仍然是「10、100、10、100」，也就是上個步驟所謂的將電腦縮排套用到手機上。

六、手機邊框間距

瞭解了問題而且具備了工具之後，解決方法很簡單，在WordPress Elementor手機版面編輯模式中，依照手機版的特性重新調整版面縮排設置，例如將「邊框間框」從上個步驟的電腦設定值改為「20、20、20、20」，右側預覽畫面可以立即看到視覺化調整之後的效果，如此完成了手機端的網頁設計。

七、響應模式切換

先前第四步驟可說是快速切換不同的響應模式，而其實在WordPress Elementor的正式路徑應該是在左下方工具列中，有個電腦手機兩個裝置貼在一起的小圖標，滑鼠移到這個地方，浮窗說明文字便是「響應模式」，點一下會從手機模式切換為預設的電腦模式。這時候可以看到左側編輯欄都變成是電腦圖標，上方頂端列不會再有三個模式的切換選項，不過同樣只要在底端工具鏈再點一下響應模式的圖標，立即在不同編輯模式之間切換。

八、測試調整結果

WordPress Elementor編輯好了頁面並且更新之後，手機裝置重新整理原來的網頁，果然和在Elementor所看到的是同樣狀況，已經完成了響應式網站設計。這裡同時瞭解到先前第三步驟所看到的空白版面，其實是Google投放廣告並沒有顯示出來所導致的。

響應式網頁設計的習慣

贊贊小屋在設計好了這篇文章的範例頁面之後，只有在電腦端測試，本來以為都設計好了，後來是剛好想要在手機的LINE社群分享，預先檢視待分享網頁，才發現到在手機裝置上有版面跑掉的情形。經過這次經驗之後，贊贊小屋以後會改變習慣，在開始設計頁面時就應該在Elementor連同手機裝置的版面一起調整好，如此比較符合目前響應式網站設計的主流。

每天學習，每天充電：SEO文章合集。