好多新手都會遇到一個問題：喺電腦上設計嘅頁面，去到手機度啲字黐埋一堆、圖片錯位——呢個係因為冇做好「響應式設計」。Elementor 自帶強勁嘅響應式編輯功能，只需簡單設定，就可以令網站喺電腦、平板、手機上都顯示得靚又易用。
乜嘢係響應式設計？
簡單講，響應式設計就係令同一個網頁根據裝置屏幕大細自動調整佈局：
- 喺電腦（大屏幕）上，內容可能並排展示（例如三列圖片）；
- 喺平板（中屏幕）上面，會自動變成兩欄；
- 喺手機（細屏幕）上面，會自動疊成單欄，避免啲字太細或者內容爆出。
Elementor 會自動適應大部分情況，但都仲需要手動執吓啲細節，確保每部裝置都有最好嘅體驗。
第一步：認識 Elementor 嘅響應式編輯模式
入到 Elementor 編輯介面之後，頂部工具欄右邊有三個圖示，分別對應三種裝置視圖：
- 🖥️ 桌面視圖（預設顯示）
- 📱 平板視圖（768px 左右闊度）
- 📱 手機視圖（375px 左右闊度）
操作方法：點擊對應圖標，即可切換到該設備嘅預覽模式。所有樣式修改（例如字體大細、間距、佈局）都可以針對單個設備單獨設定，互不影響。
第二步：響應式設計核心設定（必做 3 項）
1. 文字大細：避免手機上啲字太細或者太大
電腦睇落啱啱好嘅字，喺手機上可能睇唔清（太細）或者換行亂晒（太大），需要單獨調整：
- 揀選文字模組（標題、段落等），進入右邊「樣式」面板。
- 搵到「字體大小」設定，撳數值隔籬嘅「響應式圖示」（細電腦圖示，撳咗之後會顯示三個輸入框，分別對應桌面 / 平板 / 手機）。
- 切換到「手機視圖」，直接輸入啱嘅大小（例如標題喺手機設為 24-32px，段落設為 14-16px）。
提示：文字大小跟住「屏幕越細，文字唔應該太大但要清楚」嘅原則，確保手機上唔使放大就可以睇到。
2. 圖片同模組闊度：避免超出螢幕
喺電腦上設定為「80% 闊度」嘅圖片，喺手機上可能仍然太闊，或者兩邊留白太多：
- 揀中圖片 / 模組，進入右邊「樣式」面板（圖片喺「樣式」→「闊度」，其他模組可能喺「進階」→「闊度」）。
- 點擊「闊度」數值旁邊嘅「響應式圖示」，切換到「手機檢視」。
- 將闊度設為「100%」（等圖片 / 模組填滿手機螢幕闊度，避免兩邊留白），或者按需要調整（例如 90% 留少少邊距）。
注意：如果圖片本身尺寸太細，設為 100% 會矇查查，建議預先準備高清圖片（闊度至少 1000px）。
3. 間距同邊距：避免內容逼埋一齊
手機屏幕空間有限，模組之間嘅間距太大會嘥位，太細會顯得逼夾：
- 揀中任意模組（例如按鈕、段落），進入右邊「進階」面板。
- 搵到「外邊距」（模組同其他元素嘅距離）或者「內邊距」（模組內部內容同邊框嘅距離），撳數值隔離嘅「響應式圖示」。
- 切換到「手機視圖」，減細數值（例如頂部外邊距由 50px 改做 20px，令模組更緊湊）。
技巧：撳住 Ctrl 撳住鍵可以同時揀多個模組，批量調整間距，效率更高。
第三步：版面調整（欄位佈局喺手機上嘅優化）
如果你嘅首頁用咗「多欄佈局」（例如 3 欄服務介紹、2 欄圖文組合），喺手機上可能會逼埋一嚿，需要改做單欄：
- 搵到包含多欄嘅「Section（區塊）」（點擊模組外面嘅藍色虛線框，揀選成個區塊）。
- 進入右邊「佈局」面板，搵到「列」設定（例如而家係「3列」）。
- 點擊「列」數值隔離嘅「響應式圖示」，切換到「手機視圖」。
- 將列數改做「1列」，咁樣手機上就會自動堆疊成單列，內容更加清晰。
示例：電腦上 3 列展示產品，平板上改做 2 列，手機上改做 1 列，咁樣就可以用盡大屏幕空間，又確保小屏幕睇得清楚。
第四步：隱藏唔必要嘅元素（針對細屏幕）
有啲元素喺電腦上可以豐富頁面，但喺手機上會顯得多餘（例如複雜嘅裝飾圖標、大段說明文字），可以喺手機上隱藏：
- 揀選要隱藏嘅模組，進入右側「進階」面板。
- 拉落去「響應式」設定，搵到「喺移動設備上隱藏」選項（或者分別剔選「喺桌面隱藏」「喺平板隱藏」）。
- 揀「喺手機度收埋」，呢個模組喺手機睇嗰陣會自動消失，唔會影響電腦同平板顯示。
適用場景：裝飾用嘅側邊圖示、電腦專用嘅聯絡表格（可以喺手機度換成更簡潔嘅表格）。
第五步：預覽同測試（關鍵步驟）
設定好之後，一定要喺真機度試（或者用 Elementor 嘅預覽功能仔細檢查）：
- Elementor 內預覽：依次點擊「桌面→平板→手機」圖示，滾動頁面檢查每個模組：
- 文字係咪完整顯示（冇截斷、冇重疊）？
- 圖片係咪清晰且充滿螢幕（冇拉伸、冇變形）？
- 個掣夠唔夠大（手機上最少 44×44px，方便撳）？
- 真實裝置測試：用手機掃描 Elementor 頂部嘅「QR Code」，喺自己手機度開頁面，實際操作個掣、輸入框，感受吓滑動順唔順。
- 修復常見問題：
- 如果文字換行亂晒：減細手機版字體大小或者加闊模組寬度。
- 如果圖片變咗形：喺手機版設定「物件適應」為「覆蓋」（圖片→樣式→物件適應）。
- 如果按鈕太細：喺手機版加大按鈕「內邊距」（上下最少 15px，左右最少 20px）。
新手必記嘅響應式設計原則
- 流動優先：設計時先考慮手機視圖，再擴展到電腦（避免後期大幅修改）。
- 少即是多：手機屏幕空間有限，只保留核心內容，刪除冗餘元素。
- 一致性：顏色、字體風格喺各設備上保持一致，避免訪客混淆。
- 定期檢查：每次加新模組之後，都要轉去手機視窗睇下顯示正唔正常。
跟住以上步驟，你個網站就可以喺電腦、平板、手機都顯示出專業效果。響應式設計睇落好似好複雜，但用 Elementor 試多幾次就會發現：其實只要針對唔同裝置微調幾個關鍵參數，就可以解決 90% 嘅顯示問題。多啲練習、多啲測試，好快就可以熟手㗎啦！