你的網站在手機跑版了嗎？如何使用 Elementor 打造 RWD 響應式網頁設計

跑版是很多網頁設計常見的問題，特別是用 WordPress 設計的頁面，像是我的網站（笑）。

常常因為時間有限，或是對網頁設計的概念不夠深入，導致沒有注意到不同裝置的呈現效果差異很大。

Elementor Pro 提供了一個很方便的方式，讓我們可以輕鬆地切換裝置，打造 RWD 響應式網頁設計。

響應模式(RWD) 是什麼?

RWD（Responsive Web Design）是一種讓網頁可以自動適應不同裝置螢幕尺寸的設計方式。無論是桌機、平板還是手機，RWD 都能確保網站的版面和功能在各種螢幕上都能正常運作。

這樣的設計能讓我們只需設計一次，就可以確保網站在任何裝置上都有良好的使用體驗。

因此，響應式設計的目的就是要讓網站在不同的行動裝置上，都能夠呈現出我們期望的視覺效果，讓使用者在任何地方都能夠輕鬆地獲取所需的資訊。

Elementor Pro 提供響應模式設計，讓我們可以針對「平板」、「手機」來修改樣式。怎麼做呢? 只要在左側下方找到「響應模式」的圖示，然後點擊。

右側上方就會出現「電腦」、「平板」、「手機」的圖示，就可以針對不同裝置來調整設計。

▼ 響應模式圖示

elementor_如何設定響應式設計-e1678672677494.png

▼ 選擇電腦、平板或是手機模式

elementor_如何設定響應式設計_2-e1678672699105.png

Elementor 支援 RWD，操作上也很簡單。

只要完成基本設計後，在左下方找到「響應模式」的圖示，點擊之後，就可以看到「電腦」、「平板」、「手機」三個圖示，可以分別針對不同裝置進行調整。

mynotion_20241029.png

mynotion_20241029-1.png

透過上方圖示的切換，在編輯元素的時候，圖示會自動改變。

mynotion_20241029-2.png

mynotion_20241029-3.png

透過這些切換，我們可以針對每個裝置設計出最適合的樣式。

完成後，可以在瀏覽器中調整視窗寬度，檢查效果是否滿意。

如果覺得只分成三個裝置還不夠，也可以新增更多的斷點。

先前在文章： Elementor 教學：自訂 | 全局設置 | CSS | 設定提到的「版面配置」，裡面就有新增斷點的功能。

點擊左上角的「漢堡」圖示，可以找到「網站設定」，點一下它。

mynotion_20241029-4.png

然後點擊「版面配置」。

mynotion_20241029-5.png

然後可以在「Breakpoints 」中，新增新的斷點，也可以在這設定 Breakpoints 的寬度。

mynotion_20241029-6.png

設定好後，就可以讓網站在更多不同的裝置上都有最佳的呈現效果。