如果您曾經發現自己無休止地滾動，發現一個特定的元素埋在您的網頁設計深處，那麼您並不孤單。幸運的是，Beaver Builder的輪廓面板在這裡加快了您的工作流程，並將頁面構建混亂變成有組織的效率。

Beaver Builder輪廓面板提供了頁面佈局的視覺樹視圖，使其易於瀏覽，選擇和整理行，列和模塊，從而使工作流程和提高頁面構建效率。

在本文中，您將學習如何利用Beaver Builder的輪廓面板將頁面構建時間切成兩半，同時維護有組織的WordPress項目。

Beaver Builder大綱面板是什麼？

Beaver Builder輪廓面板是一個層次樹視圖，以有組織的導航格式顯示您的整個頁面結構。您沒有在您的佈局上進行視覺狩獵，而是可以看到每個行，列和模塊的眼睛視圖，而是更快地，更有條理，更有條理且令人沮喪的是：

一目了然的關鍵好處：

• 立即導航大型佈局
• 用拖放簡單重組內容
• 在建造時標記和組織元素
• 迅速解決佈局問題
• 與團隊成員更有效地合作

此功能強大的功能轉換了您與佈局交互的方式，提供了一個簡化的接口，使您完全控制了頁面結構。無論您是構建簡單的著陸頁還是複雜的多剖面網站，輪廓都可以使所有內容都可以井井有條。

這是開發經理傑米（Jamie）在被問到自己喜歡的海狸建造者最喜歡的功能時要說的：

“輪廓面板是如此節省時間。您可以一目了然地看到您的內容結構，使長頁變得更加容易導航。這也非常適合故障排除 - 如果模塊的設置在主編輯器中不打開，請嘗試從輪廓面板中訪問它！”

如何訪問輪廓面板

方法1：單擊大綱圖標

1. 在Beaver Builder中打開您的頁面
2. 在頂級欄中查找輪廓圖標
3. 單擊以打開面板

方法2：鍵盤快捷鍵（更快）

1. 在Beaver Builder編輯器中打開您的頁面
2. 按Shift + O立即打開面板打開/關閉
3. 按Shift + T擴展/折疊所有部分

為什麼輪廓面闆對海狸建造者用戶至關重要

1。輕鬆瀏覽大型佈局

還記得試圖從長頁底部拖動一行的挫敗感嗎？那些日子結束了。大綱面板通過使您可以立即訪問頁面上的任何元素來消除無盡滾動的需求。只需單擊大綱中的任何項目即可直接跳到佈局中的該元素，就像為您的頁面結構提供GPS。

2。毫不費力地重組內容

通過輪廓面板的拖放功能，在佈局周圍的內容變得非常簡單。您可以快速重新排列行，列和模塊，而無需視覺混淆，這些混亂有時會帶來主構建器接口中的拖動元素。當您重組現有內容或實驗不同的佈局安排時，這尤其有價值。

3。保持完美的組織

輪廓面板可幫助您在整個建築過程中保持井井有條。您可以一目了然地看到頁面的完整結構，從而輕鬆識別可能需要注意或重組的區域。這種鳥的眼光對於保持乾淨，邏輯的頁面結構是無價的。

Beaver Builder 2.9中改變遊戲規則的功能

Beaver Builder的最新更新引入了令人興奮的改進，使輪廓面板更加強大：

增強的搜索和過濾功能

Beaver Builder 2.9介紹了一個搜索功能，我發現該功能是複雜項目的實時節省：

單擊放大玻璃圖標，然後鍵入任何元素名稱的一部分 - 是“框”，“ loop”還是任何其他模塊類型。輪廓面板將立即突出顯示匹配的節點，即使在最複雜的佈局中，也很容易找到特定元素。

您可以通過：

• 模塊名稱
• 自定義標籤
• 元素ID
• CSS類名稱

此搜索功能對於使用自定義類和ID的開發人員和高級用戶以及管理大型，內容豐富的頁面的任何人都特別有價值。

例如，在優化SEO頁面時，這對於快速找到標頭標籤（H1 -H6）特別有用。

內聯標籤編輯

版本2.9中最實際的改進之一是能夠直接在輪廓面板中添加和編輯節點標籤：

屏幕之間不再跳躍來組織您的元素 - 您現在可以在構建時標記元素，創建一個清晰的命名系統，對您的項目有意義。

添加標籤內聯：

1. 打開輪廓面板
2. 懸停在任何元素上以揭示“鍵入標籤”字段
3. 單擊並輸入您的自定義標籤
4. 按Enter或單擊Checkmark以保存

此功能改變了您如何組織佈局的方式，從而使您可以創建有意義的名稱，例如“英雄部分”，“證明”或“召喚措施”，使您的頁面結構立即可以理解。

您還可以通過轉到任何行，列或模塊的高級選項卡來添加標籤。向下滾動到HTML元素部分，然後在標籤字段中輸入名稱。標籤提供了元素內容或目的的簡短描述：

添加後，標籤出現在Beaver Builder接口覆蓋，設置窗口和輪廓面板中。

最大化輪廓面板效率的提示

使用鍵盤快捷鍵，例如Pro

使用這些必需鍵盤快捷鍵加快工作流程：

• Shift + O ：打開/關閉輪廓面板
• Shift + T ：擴展或折疊整個樹視圖

這些快捷方式使您的手保持在鍵盤上，工作流程順利移動。

掌握右鍵單擊菜單

右鍵單擊大綱面板中的任何元素都會顯示上下文敏感的選項：

• 行和列：打開設置，重複，刪除
• 小組：刪除
• 模塊：打開設置，重複，刪除

此上下文菜單可快速訪問常見操作，而無需混亂接口。

利用視覺指示器

大綱面板包括有用的圖標指標，可立即了解您的元素：

• 藍眼睛圖標：表示行，列或模塊的可見性設置已從默認的“始終”設置更改。
• 紅眼圖標：將條件邏輯應用於行，列或模塊時出現。安裝海狸主題時可用此選項。
• 代碼圖標：顯示通過高級選項卡將自定義CSS或JavaScript添加到行，列或模塊中。
• 感嘆圖標：信號表明佈局中缺少一個模塊。如果模塊已被禁用或提供模塊已停用或卸載的第三方插件，則可能會發生這種情況。

這些視覺提示可幫助您快速識別具有特殊配置或潛在問題的元素。

與智能標籤一起組織

為您的項目開發一致的標籤系統。考慮使用指示功能和位置的描述性名稱，例如：

• “標題 - 導航”
• “英雄 - 主要CTA”
• “頁腳 - 聯繫信息”

這種系統的方法使協作變得更加容易，並幫助您幾個月後徹底清楚地返回項目：

高級輪廓面板技術

戰略性擴展/崩潰管理

輪廓面板記得您已經擴展或崩潰的部分。通過保持經常訪問的部分擴展，在您目前不在工作的同時擴展了經常訪問的部分，以利用這一點。這會創建一個自定義視圖，與您當前的焦點匹配。

與其他海狸建造者的功能集成

輪廓面板可與其他海狸建造者功能無縫配合。將其與響應式編輯工具結合使用，以在測試各種設備視圖的同時快速在不同部分之間導航。這種組合特別有力，可確保您的佈局在所有屏幕尺寸中完美工作。

避免的常見錯誤

過度複雜您的結構

雖然輪廓面板使復雜的佈局易於管理，但可以抵制創建不必要的複雜結構的衝動。旨在實現邏輯，清潔的層次結構，以實現您的內容目標。

忽略標籤一致性

不一致的標籤打敗了組織的目的。在項目的早期建立命名慣​​例，並在整個過程中堅持下去。

忘記移動考慮因素

請記住，您組織精美的桌面佈局可能需要對移動設備進行調整。將輪廓面板與Beaver Builder的響應式編輯工具結合使用，以確保您的結構在所有設備上都起作用。

常見問題

如何訪問輪廓面板？

單擊Beaver Builder工具欄中的大綱圖標或按Shift + O即時訪問。

我可以在大綱面板中搜索元素嗎？

輪廓面板使您可以輕鬆地在頁面佈局中搜索元素。單擊放大玻璃圖標，然後按模塊名稱，標籤，CSS類或元素ID進行搜索。

藍眼睛的圖標是什麼意思？

藍眼睛圖標表明元素的可見性設置已從默認的“始終”設置進行了修改。

如何將標籤添加到元素中？

要在輪廓面板中添加標籤，請在任何行，列或模塊上懸停，請單擊“鍵入標籤”字段，然後輸入您的自定義名稱。

為什麼我會看到感嘆號圖標？

Beaver Builder輪廓面板中的感嘆圖標通常是由於停用的插件或模塊衝突而丟失或禁用的模塊。

結論：立即改變您的頁面構建

Beaver Builder輪廓面板不僅僅是導航工具；這是一個完整的工作流程轉換系統。從Beaver Builder 2.9中增強的搜索和標籤功能到強大的視覺指示器和組織功能，掌握此面板將使您成為更有效，有效的WordPress頁面構建器。

關鍵要點：

• 使用鍵盤快捷鍵（Shift + O）以更快地訪問
• 從每個項目的開頭實現一致的標籤
• 利用視覺指示器來保證
• 與響應式設計工作流程集成
• 使您的常規建築例程的輪廓部分成為一部分

無論您是構建簡單的登陸頁面還是複雜的多部分網站，輪廓面板都提供了組織基礎，該基礎將混亂的頁面構建變成簡化的專業過程。

準備改變您的海狸建造者體驗嗎？打開海狸構建器編輯器，按Shift + O啟動輪廓面板，並立即開始更有效地構建！