WordPress 頁面區塊怎麼整理？用清單檢視搬動順序、統一間距

WordPress 頁面有多個區段時，不用剪下內容重做。打開清單檢視，把整個頂層區塊移到正確位置，再到 GenerateBlocks 的 Spacing，把同一層區段的上方 Margin 設成一致就可以。

以下用「好喝咖啡」首頁示範。原本的順序是 Hero、營業資訊、三大特色，我們會把三大特色移到 Hero 下面，再把兩個內容區段的上方間距統一成 4rem。

快速重點

內容目錄

製作需求	在哪裡做
看清楚整頁區塊項目	WordPress 清單檢視
移動完整區段	區塊工具列的「上移一位」或拖曳手把
統一區段距離	GenerateBlocks → Styles → Spacing → MARGIN Top
檢查手機版	右上角「檢視」→ 行動裝置

表裡的大寫英文（MARGIN、SPACING）就是面板上分類標題的原樣，畫面上照著字面找就可以。

點編輯器左上角的「內容總覽」，切到「清單檢視」。先看最靠左、縮排相同的區塊，這些才是整頁的頂層區段。示範頁目前是 Hero 外層、營業資訊、三大特色。

清單裡的區塊如果全部叫 Grid 或 Container，可以逐一點選，看畫布上的藍框落在哪一區。先認清要搬的是哪個頂層區塊，不要只選到裡面的標題或文字。

在清單檢視選「三大特色」，工具列會出現拖曳手把和上下移動按鈕。這個例子只差一個位置，按一次「上移一位」最穩；要跨越很多區段時，再按住六點拖曳手把移動。

完成後的順序應該是 Hero 外層、三大特色、營業資訊。三個區段仍維持相同縮排，表示只是改順序，沒有不小心放進另一個 Container 裡。

選「三大特色」，到右側的 Styles，打開 Spacing。在 MARGIN 的 Top 輸入 4，單位選 rem。只改 Top，不要把四個方向連起來，這裡處理的是區段和上一區之間的距離。

接著選「營業資訊」，同樣到 Styles → Spacing，把 MARGIN 的 Top 設成 4rem。示範頁原本一區是 3rem、另一區是 5rem，看起來會一段緊、一段鬆；改成同一個值後，整頁間距會比較一致。

4rem 不是每個網站的固定標準。頁面可以用 3rem 或 5rem，重點是同一層、相同性質的區段先用同一套間距。

用右上角「檢視」切到行動裝置，從 Hero 一路捲到營業資訊。確認三大特色已變成單欄、地圖沒有超出畫面、文字沒有切掉，左右也沒有橫向捲軸。

實測示範頁時，手機可視寬度與頁面寬度都是 390px，沒有橫向溢出；4rem 的區段間距也不需要另外縮小。內容比較長時，再切到 Mobile，把 Top 改成 3rem 即可。確認完畢後按右上角「儲存」。

完成後，頁面由 Hero 開場，接著說明三大特色，最後放地址、電話與地圖。這次只整理已經存在的區段，不新增其他首頁內容。

先按復原，再回清單檢視操作。放開區塊前看左側縮排線，目標區塊要和原本維持相同縮排；往右縮一層，就會變成另一個區塊的內層內容。

區段與區段之間的距離先用 Margin。Padding 是區塊邊界到內部文字、圖片之間的留白，兩者處理的位置不同。

不用。4rem 是示範頁的實測值。你可以依版面選 3rem、4rem 或 5rem，先把同一層、相同性質的區段設成一致，再用前台畫面判斷。

不一定。先切到手機版實際捲一遍，繼承桌機值仍然舒服就不用改；看起來太空，再切到 Mobile 調小即可。

頁面順序與間距整理好之後，Hero、三大特色與營業資訊就能各自替換內容。需要調整主視覺，可以看首頁主視覺怎麼做；想從版面骨架開始，可以看WordPress 網頁怎麼排版。

照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。