修改 Divi 頁面時，本來只想調整標題附近的留白，結果圖片、內文和按鈕一起移動，先別急著補一段 CSS。你可能選到了標題外面的 Column 或 Row。畫布上幾個元素疊在一起時，滑鼠點到的位置不一定就是要編輯的模組；先從 Layers 找出目標，再看設定面板的名稱和上方路徑，通常比反覆拖拉更容易排除問題。
本文使用 Divi 5 官方公開示範頁操作，示範的是一般區段內的層級選取。截圖中的變更只留在編輯工作階段，沒有儲存到網站。你可以在自己的測試頁放一個標題、一段文字和一顆按鈕，照著確認目前選到哪個元素，再開始修改樣式。
先沿著內容往外找
一般版面的外層是 Section，裡面放 Row，Row 再包含 Column，文字、圖片和按鈕等 Module 放在欄位內。這是理解頁面的一條起點，不代表所有 Divi 5 頁面只有固定四層；巢狀列及其他容器會讓路徑更長。遇到複雜頁面，要按目前 Layers 顯示的縮排查看，不要硬把第五層當成重複元素。
例如首頁介紹區有一個標題、一段簡介和聯絡按鈕。三個模組可能共用同一欄位，但仍是各自的內容。你想改按鈕文字，就應進入 Button 模組的 Content；想調整整欄的排列或留白，才回到 Column。選對層級，是決定這次改動範圍的第一步。
畫布上的顏色、邊線和浮動工具可以幫忙辨認，但不要只靠它們。元素太小、背景相近或面板遮住內容時，選取容易含糊。尤其縮放畫布後，文字模組的可點範圍會變小，更適合從 Layers 指定目標。
用 Layers 指定模組
在 Divi 5 Visual Builder 左側開啟 Layers。若整棵結構收起，展開目標 Section，接著展開 Row 和 Column，直到看到 Heading、Text 或 Button 等模組名稱。你可以先找文字所在的區段，再往內找；不必每次都展開整頁所有節點。
點選 Button 後，設定面板的標題應是 Button。上方路徑會顯示它所屬的 Page、Section、Row 和 Column。接著切到 Content，確認可見的按鈕文字確實是你要改的那一顆。如果頁面有多顆同名 Button，不能只看模組名稱，還要對照畫布位置與內容。
在這次示範中，第一個欄位內依序有 Heading、Text、Button。選取 Button 時，面板顯示 Button；再按上方 Column 路徑，面板改成 Column。接著按 Row，面板改成 Row。這三次操作只切換選取對象，沒有修改內容或間距，因此很適合拿來練習辨認範圍。
從路徑回到父層，不要猜位置
模組選取正確後，如果發現問題出在外層容器，可以沿上方路徑回到 Column 或 Row。例如按鈕與文字一起靠左，不一定要分別調整兩個模組；也可能需要檢查父層的排列方式。但先看設定值，再決定是否修改，不要因為兩個元素同時移動，就直接斷言是欄位造成。
父層設定會參與子元素的排版，實際影響還要看修改的是哪個選項。改 Column 的內距，與改某個 Text 的字級，不是相同操作。某些字型設定也會受到預設樣式、繼承與模組本身覆寫影響；不能把「選到父層」簡化成「所有子模組每個值都一起變」。
示範頁的按鈕 DOM 外面另有按鈕包覆元素，再往外才是 Column、Row、Section。這些包覆元素不一定是 Layers 中獨立可編輯的節點。因此檢查 HTML 時，應認出 Divi 的欄、列、區段類別，不要只數父元素有幾層，就把每個 div 都當成一個編輯層級。
調整前先留下容易辨認的名稱
如果測試頁裡有多個相似區段，可以在對應設定的 Meta 區域檢查管理用標籤功能，以內容用途命名，例如「首頁介紹」、「服務說明」或「頁尾聯絡」。名稱應協助編輯者定位，不要塞入只有自己懂的縮寫。這也能避免在 Layers 裡對著十個同名 Text 找半天。
名稱與訪客看到的標題文字是不同用途。管理標籤用來識別編輯對象，公開標題則是頁面內容；改其中一個，不應預設另一個也跟著變。完成後重新選取一次，確認你沒有把管理名稱當成正文修改。
若頁面由多位編輯維護，最好約定名稱怎麼寫。用區段用途加內容類型，比只寫「新模組二」更能幫下一位接手者理解。不要為了整理名稱同時搬動大量節點；先把這次要修改的一段辨認清楚即可。
一次只改一個範圍，再看旁邊的內容
確認目標後，先做一個小改動，例如調整 Text 的一側內距，或改 Button 的文字。改完同時看目標與相鄰模組：如果只預期文字變動，圖片和按鈕就應維持原本內容。若整段移動，回頭看面板名稱、路徑和剛改的欄位，找出真正影響排版的位置。
不要急著用另一個模組的負 margin 抵消錯誤。這會讓桌面看似恢復，手機卻留下新的間距問題。先復原剛才的改動，重新選取正確對象，再用同一個值測一次；比同時改父層和子層更容易確認原因。
切換桌面、平板、手機視圖時，也要重新確認目前編輯裝置。選到同一個模組，不代表每個裝置使用同一組數值。層級與響應式狀態是兩個不同的核對項目，都看清楚後再修改。
儲存前用內容與層級交叉核對
最後回到 Layers 選一次目標，確認面板名稱、上方路徑及內容三者一致，再檢查其他區段沒有被誤改。你要調整的是聯絡按鈕，就應能從 Button 設定讀到對應文字與 URL；你要調整整欄留白，就應明確知道那一欄還包含哪些內容。
在自己的測試站儲存後，退出 Visual Builder 檢查一般訪客頁，再用窄視窗核對排列。編輯器中的選取框與工具不屬於訪客畫面，不能用它們判斷最後版面。等目標和鄰近內容都符合預期，再將相同調整帶到正式頁。
如果怎麼點都選不到預期模組，先檢查是否有鎖定、隱藏或巢狀結構，不要直接刪除整段重做。Layers 的價值就在於把畫布上不容易看清的結構攤開，讓你知道這次究竟在改哪一層。
如果目標是頁尾或共用頁首，還要確認自己開啟的是單篇頁面內容，還是 Theme Builder 裡的範本區域。兩者可能都有相似的區段名稱，但修改範本涉及更多頁面。先確認編輯區域與使用範圍，再沿著 Layers 找模組，才能避免只想改一頁卻動到共用設計。
評論0