想知道如何在Beaver Builder中建立更快的佈局？如果您已經使用WordPress構建了一段時間，那麼您可能會花費大量時間來弄清楚如何使用行和列構建複雜佈局。它有效 - 但並不總是是最靈活或最有效的方法。

這就是為什麼Beaver Builder 2.9對我來說是這樣改變遊戲規則的原因。此更新引入了兩個重大改進，這些改進已經完全改變了我的構建頁面，我認為您會喜歡它帶給您的工作流程的靈活性：

• 容器模塊（例如框模塊和循環模塊）現在可以用作頂級佈局元素- 這意味著您可以在不需要時完全跳過行和列。
• 現在，基本模塊默認情況下輸出清潔器HTML ，刪除額外的包裝器<div> s，並使您的頁面加載速度更快，並且在搜索引擎中的排名更好。

這些不僅僅是具有良好的功能 - 它們代表著朝著更直觀，性能驅動的構建WordPress站點的方式轉變。如果您想改善工作流程，頁面速度和代碼質量，那麼此更新絕對值得探索。

容器佔據中心舞台

讓我們先談談最大的變化。在先前版本的Beaver Builder中，行柱系統是構建佈局的唯一選擇。頁面上的每個元素都必須在此框架內生活。

想像此常見場景：您想創建一個帶有標題，一些文本和一個按鈕的簡單呼喚部分。在舊方法中，您要創建一行，向該行添加列，然後在列中添加模塊。它起作用了，但是增加了您並不需要的結構層。

這是這樣的外觀：

排
└ - 列
└ - 框模塊
└ - 線模塊
└ - 文本模塊
└──按鈕模塊

現在，在Beaver Builder 2.9中，您可以完全消除這些額外的層。現在，像框模塊這樣的容器模塊可以用作您的主要佈局元素，就位於頁面結構的頂層。

新的流線方法看起來像這樣：

框模塊
└ - 線模塊
└ - 文本模塊
└──按鈕模塊

這不僅僅是接口中的點擊量很少（儘管也很好）。這是關於構建佈局，使您對設計的實際思考。如果您像我一樣，當您設想一部分內容時，您會在考慮容器以及其中的內容，而不是關於包裹它的抽象行和列網格。

為什麼這種方法有意義

這種變化與現代CSS的運作方式完全吻合，尤其是在Flexbox和CSS網格上。這些技術可讓您創建複雜的佈局，而無需複雜的嵌套結構，現在Beaver Builder的界面與現實相匹配。

好處不僅僅是簡單性。當您使用容器模塊作為主要佈局元素時，您會得到：

• 對間距，對準和響應式行為的更直接控制。您可以在容器級別上處理所有內容，而不是跨多個層次的嵌套管理設置。
• 更快的設計迭代速度是因為您花費更少的時間在結構層中導航，而更多的時間專注於實際設計。
• 更好的性能由於瀏覽器生成和處理的HTML標記較少。
• 當您需要返回並以後修改佈局時，更容易維護- 無論您是您或團隊中的其他人。

盒子模塊：您的佈局強國

盒子模塊進行了改變遊戲規則的升級。曾經是一種簡單的實用工具已經演變為在海狸建造者中構建靈活的現代佈局的核心基礎。這不是一個較小的更新，它是一個完整的重新設計，它將框模塊定位在您的頁面構建過程的核心：

盒子模塊具有新的功能作為頂級佈局元素，可以通過管理從背景顏色和圖像到填充和邊距的所有內容來替換傳統的行包裝器，而不需要額外的父裝容器。

另外，盒子模塊完全支持Flexbox屬性，可精確控制佈局內部子元素的對齊，間距和分佈。無論您是要嵌套文本，圖像，按鈕，表單還是任何其他內容模塊，盒子模塊都會無縫處理。

這意味著您可以僅使用框模塊和實際需要的內容模塊創建複雜，響應的佈局。不再僅僅因為接口需要它而創建結構元素。

引擎蓋下的清潔器html

當您重新考慮如何在Beaver Builder 2.9中構建佈局時，建築商本身正在幕後進行一些清理。此版本的第二個主要更新刪除了基本模塊中不必要的包裝器<div>元素 - 以明顯更精細的HTML輸出來介紹。

在較早的版本中，諸如實際<div>圍繞實際內容的模塊，包括標題，圖像和按鈕。如下所示，這增加了標記中的複雜性和膨脹：

在Beaver Builder 2.9之前：

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

在海狸建造者2.9之後：

 <h2>Welcome to Our Site</h2>

此更改不僅提供了更清潔的代碼，還可以改善現實世界的性能：

• 簡化的樣式：在包裝器類較少的情況下，您可以直接編寫CSS，而無需更多戰鬥的嵌套選擇器。
• 加載時間更快：更少的元素意味著瀏覽器處理的較少。
• 更好的SEO：更清潔，更多的語義HTML可幫助搜索引擎了解您的內容。

如果您是開發人員或代理機構在自定義主題或客戶網站上工作，那麼您會感謝此更新帶來的清晰度和效率。而且，由於更改僅適用於2.9之後添加的模塊（或除非啟用舊版設置），因此您的現有佈局保持安全和兼容。

靈活性而不會破壞事物

現在，如果您在想， “等等 - 我的自定義CSS依靠這些包裝班！” -不用擔心。 Beaver Builder 2.9的設計考慮到了這一點。為了保持與較舊樣式的兼容性，您可以使用單個設置重新啟用包裝器<div> ：

如何恢復舊版包裝器標記：

1. 轉到您的WordPress儀表板
2. 導航到設置> Beaver Builder>高級
3. 啟用“力模塊包裝器”

但是，除非絕對必要，我們建議您關閉此功能。清潔標記不僅可以提高性能，還可以反映現代網絡開發的最佳實踐。如果您確實依靠傳統CSS，這可能是一個很好的機會，可以簡單地和長期可維護性進行重構。

內置的向後兼容性

Beaver Builder 2.9的最佳部分之一？您將獲得所有這些現代改進，而不會破壞現有站點的風險。

這是其工作原理：

• 現有的模塊（在更新為2.9之前放置的模塊）將繼續使用其原始包裝結構進行渲染。
• 更新後添加的新模塊將自動使用新的清潔器標記。

這種雙重渲染策略為您提供了平穩的過渡路徑：您當前的佈局保持完整，而您的任何新內容都可以從更快，更輕鬆的結構中產生好處。

這些更改如何改善您的網站性能

Beaver Builder 2.9引入了強大的性能和工作流程改進，可幫助您的網站加載速度更快，排名更高並提供更平滑的用戶體驗。

更快，更精細的頁面
通過減少包裝器<div>元素和對容器模塊作為頂級元素的支持，您的佈局更加干淨，更輕 - 換成更快的負載時間和更好的SEO。

更聰明的著陸頁
跳過不必要的行和列的混亂。現在，您可以使用只有容器模塊（例如英雄部分和CTA的框模塊）來構建靈活的，高轉化的著陸頁。

乾淨的標題和頁腳
盒子模塊還可以在標題和頁腳中發揮作用，幫助您以更少的精力和更多的控制來創建結構化的，響應的佈局。

對開發人員友好的標記
告別過度築巢。簡化的HTML輸出簡化了CSS的定位並減少了特異性問題，從而使自定義開發更加容易，更可維護。

贏得客戶的性能
對於代理商而言，好處很明顯：更快的站點，清潔劑代碼和更現代的構建過程。即使您的客戶不會說“開發人員”，他們也會注意到性能和拋光的差異。

構建佈局的更聰明的方法

Beaver Builder 2.9不僅僅是另一個功能更新，這是我們如何接近佈局構建的深思熟慮的一步。通過將容器模塊作為靈活的佈局基礎引入，並簡化了HTML輸出，該版本將Beaver Builder與現代設計和開發實踐一致。

結果？更快，更清潔，更直觀的工作流程可節省您的時間並提供表現更好的頁面。無論您是製作簡單的小冊子網站還是管理複雜的客戶項目，這些增強功能都可以幫助您更輕鬆地構建和自信。

準備升級您的佈局了嗎？
更新到Beaver Builder 2.9，並立即開始建立更聰明，精益和更多未來的網站。