在Elementor畫布上點一段文字，側欄卻一直選到外層容器；或圖片和按鈕疊在一起，滑鼠找不到要改的元件，這時可以先打開Structure。它把頁面列成階層樹，讓你從結構選項目，不必反覆在畫布邊緣尋找小小的操作把手。
這篇處理的是「選對層級」。先找到要修改的項目，再確認側欄名稱與內容，才進行設定。不要因為目前選不到元件，就先刪掉外層容器、解除定位或加大空白；那些改動可能讓原本正常的版面也一起受影響。
打開Structure並展開容器
官方目前把這個工具稱為Structure，網址仍保留navigator名稱。較早教學若寫Navigator，可能說的是同類結構工具，但操作入口應以你現在的編輯器為準。可以用編輯器的Structure按鈕開啟，也可以依官方說明從元素的操作選單進入。
本例使用WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five。頁面有一個外層Atomic Flexbox，裡面放傳統Container，再由這個Container放多個傳統元件。本文只用Structure選中項目，不把Atomic與傳統元件的設定欄位當成完全相同。
打開後若只看到一個容器，不代表頁面沒有其他內容。先展開它左邊的折疊控制，繼續找內層項目。若結構較深，可以使用介面提供的展開全部功能，但仍要留意縮排：展開所有項目，是讓它們可見，不是把原本的父子關係攤平成同一層。
用縮排找出父容器和子元件
本例選中內層Container後，側欄顯示Edit Container。它下面有六個子元件，依序是Heading、Heading、Heading、Image、Button和Heading。相同名稱出現多次是正常的；類型名稱告訴你它是標題，但不足以辨認是哪一段文字。
外層容器常負責整區寬度、方向或留白，子元件則負責各自的文字與圖片。當你要改標題內容時，應選Heading；要調整整排卡片的排列，才回到它們共同的父容器。選對層級後再改值，比改完才猜是哪一層生效更容易維護。
不要只看畫布上的藍色框就斷定選對了。巢狀容器可能有相似的範圍，尤其外層和內層都沒有背景時，邊界看起來很接近。Structure縮排、側欄名稱與實際內容一起核對，才能確定你現在修改的對象。
選子項目後，確認它的內容
接著在Structure選中本例第二個Heading，側欄改為Edit Heading，文字欄位顯示Author Heading Case B。這是我們要找到的元件。前後比較，父容器顯示容器控制，子Heading顯示標題內容，兩者沒有因為位置相近就變成同一組設定。
這些測試文字只是讓項目容易辨認，不是網站必須使用的名稱。你可以先選各個Heading，看Content欄位對應哪段文案；若準備修改的文字與欄位不同，就先停下來重新找項目，不要把錯誤欄位改成你想看的文字，掩蓋選錯元件的問題。
同樣的方法也適用於Image和Button。選圖片時看目前縮圖和附件，選按鈕時看文字與連結。若只是想改其中一顆按鈕，選外層容器後調整整區設定，通常不能替你改正那顆按鈕的目的地。
結構面板的眼睛不等於手機隱藏
官方Structure indicators說明，眼睛控制可在編輯器內顯示或隱藏項目，這個狀態不直接影響前台。它是協助你整理編輯畫布的工具，不應當成Responsive裡Hide On Mobile的替代方式。
若你要讓訪客看不到某個裝置的區塊，應使用實際元件的響應式控制並在儲存後前台核對。如果只是暫時把重疊元素從編輯畫面藏起來，好選到下面的元件，則先確認使用的是編輯器顯示控制，操作完成後再恢復便於維護的狀態。
這篇的實際案例沒有切換眼睛、重新命名或拖曳排序；只比較父容器與子Heading的選取結果。其他結構工具的行為應依官方說明及你自己的版本再確認，不把選中成功擴成所有功能都已操作完成。
找到元件後再處理真正的版面問題
選對層級只是診斷起點。如果元件被絕對定位、負margin或其他區塊遮住，Structure可以幫你找到它，卻不會自動修正造成重疊的設定。先保留原值，再查看該元件與父容器的定位和間距，才能知道哪個控制需要調整。
若一個元件的位置受父容器Direction或Wrap影響，應回到正確父容器查看Layout。不要為了讓它在畫布上移動，就在子元件塞入很大的margin；那可能只在目前寬度有效，換到手機又跑出邊界。
多層結構也不表示一定要把所有容器合併。某些內層容器用來分組文字與按鈕，具有實際排版用途。先理解每一層負責什麼，再決定是否精簡；避免只因為樹狀面板看起來很長，就刪掉仍在控制必要排版的層級。
改完回到前台核對
修改前先記下選中的元件與父層位置，修改後儲存並重新開啟前台。確認改的是預期標題或按鈕，附近內容也沒有被連帶影響。編輯器的選取框不會出現在訪客頁面，最後仍要看真實內容與版面。
如果交接給其他維護者，應描述元件所在層級與內容，不要只說「改下面第二個Container」。當頁面再插入一個區塊，位置就可能不同。清楚指出父區塊與目標內容，能讓下一個人更容易在Structure找到正確項目。
不要把選取和搬動混在一起
從結構列選中項目，是為了編輯它；拖動項目則可能改變順序或父容器。滑鼠操作時先點清楚列上的選取位置，不要在還沒核對對象時開始拖曳。若畫布內容突然改了順序，應先查看結構是否也改變，再決定是否復原。
頁面內容很多時，可以一次只展開正在處理的區塊，把其他不相關分支收起來。這樣較容易辨認目前的父容器和子項目，也避免同名Heading散落整張樹而選錯。折疊只整理操作視線，不能當成內容已從頁面刪除的證據。
評論0