ビーバービルダーでより速いレイアウトを構築する方法を疑問に思っていますか？ WordPressでしばらく構築している場合は、行と列を使用して複雑なレイアウトを構築する方法を考え出すのに十分な時間を費やしたでしょう。それは機能していますが、常に最も柔軟なアプローチまたは効率的なアプローチではありませんでした。

だからこそ、ビーバービルダー2.9は私にとってこのようなゲームチェンジャーでした。このアップデートでは、ページの構築方法を完全に変えた2つの主要な改善が導入されました。ワークフローにもたらす柔軟性を気に入るはずだと思います。

• ボックスモジュールやループモジュールなどのコンテナモジュールは、トップレベルのレイアウト要素として使用できるようになりました。
• 基本的なモジュールは、デフォルトでHTMLをクリーンに出力し、追加のラッパー<div>を削除し、ページの読み込みをより速く、検索エンジンでランク付けする可能性があります。

これらは単なる優れた機能ではなく、ワードプレスサイトを構築する、より直感的でパフォーマンス駆動型の方法へのシフトを表しています。ワークフロー、ページの速度、コード品質の改善を検討している場合は、このアップデートを探索する価値があります。

コンテナは中央の舞台になります

最初に最大の変化について話しましょう。 Beaver Builderの以前のバージョンでは、Row-and-Columnシステムがレイア​​ウトを構築するための唯一のオプションでした。ページ上のすべての要素は、このフレームワーク内に住む必要がありました。

この一般的なシナリオを想像してください：見出し、いくつかのテキスト、ボタンを備えた簡単な行動呼びかけセクションを作成します。古いアプローチでは、行を作成し、その行に列を追加してから、列内にモジュールを追加します。うまくいきましたが、実際には必要のない構造の層が追加されました。

これがどのように見えましたか：

行
└└。column列
└）ボックスモジュール
headinghidehedingモジュール
textモジュール
Buttonモジュール

ビーバービルダー2.9では、これらの余分な層を完全に排除できます。ボックスモジュールなどのコンテナモジュールは、ページ構造の最上位に座って、主要なレイアウト要素として機能できるようになりました。

新しい、合理化されたアプローチは次のようになります：

ボックスモジュール
headinghidehedingモジュール
textモジュール
Buttonモジュール

これは、インターフェイスのクリックを減らすことだけではありません（ただし、それもいいことですが）。それは、あなたが実際にデザインについてどのように考えているかに一致するレイアウトを構築することです。あなたが私のような場合、コンテンツのセクションを想像するとき、あなたはコンテナとその中に入るものについて考えています。

このアプローチが理にかなっている理由

この変更は、特にFlexBoxおよびCSSグリッドとの最新のCSSの仕組みと完全に一致しています。これらのテクノロジーでは、複雑なネストされた構造を必要とせずに洗練されたレイアウトを作成することで、ビーバービルダーのインターフェイスはその現実と一致しています。

利点は単純さを超えています。コンテナモジュールをプライマリレイアウト要素として使用すると、次のことがわかります。

• 間隔、アラインメント、および応答性のある動作をより直接的に制御します。複数のレベルのネストにわたって設定を管理する代わりに、コンテナレベルですべてを処理できます。
• 構造の層をナビゲートする時間が短くなり、実際のデザインに焦点を合わせた時間が長くなるため、デザインの反復が高速です。
• ブラウザによって生成および処理されるHTMLマークアップが少ないため、パフォーマンスが向上します。
• 後で戻ってレイアウトを変更する必要がある場合、メンテナンスが簡単です。それがあなたやチームの他の誰かであろうと。

ボックスモジュール：レイアウトパワーハウス

ボックスモジュールには、ゲームを変えるアップグレードがありました。かつてシンプルなユーティリティツールだったものは、ビーバービルダーに柔軟で最新のレイアウトを構築するためのコア基盤に進化しました。これはマイナーな更新ではありません。ページ構築プロセスの中心にボックスモジュールを配置する完全な再設計です。

トップレベルのレイアウト要素として機能する新しい機能により、ボックスモジュールは、追加の親コンテナを必要とせずに、背景の色や画像からパディング、マージンまですべてを管理することで、従来の列ラッパーを置き換えることができます。

さらに、ボックスモジュールはFlexBoxプロパティを完全にサポートし、レイアウト内の子要素のアライメント、間隔、および分布を正確に制御できます。テキスト、画像、ボタン、フォーム、またはその他のコンテンツモジュールをネストするかどうかにかかわらず、ボックスモジュールはシームレスに処理します。

これは、ボックスモジュールと実際に必要なコンテンツモジュールのみを使用して、複雑で応答性の高いレイアウトを作成できることを意味します。インターフェイスがそれを必要としたという理由だけで、構造要素を作成することはもうありません。

フードの下のクリーナーHTML

ビーバービルダー2.9のレイアウトをどのように構成するかを再考している間、ビルダー自体は舞台裏でクリーンアップを行っています。このリリースの2番目の主要な更新により、基本的なモジュールから不必要なラッパー<div>要素が削除されます。

以前のバージョンでは、見出し、画像、ボタンなどのモジュールには、実際のコンテンツに関する追加の<div>が含まれていました。次の例に示すように、マークアップに複雑さと膨満感が追加されました。

ビーバービルダー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はそれらのラッパークラスに依存しています！」 -心配しないで。ビーバービルダー2.9は、それを念頭に置いて設計されました。古いスタイリングとの互換性を維持するには、単一の設定で再びlapper <div>を再度に容易にすることができます。

レガシーラッパーのマークアップを復元する方法：

1. WordPressダッシュボードに移動します
2. [設定]> [ビーバービルダー]> [Advanced]に移動します
3. 「フォースモジュールラッパーDIVS」を有効にする

ただし、絶対に必要な場合を除き、この機能をオフにすることをお勧めします。クリーナーマークアップは、パフォーマンスを改善するだけでなく、最新のWeb開発のベストプラクティスを反映しています。レガシーCSSに依存している場合、これは、シンプルさと長期的な保守性のためにリファクタリングする絶好の機会かもしれません。

組み込まれた後方互換性

ビーバービルダー2.9の最高の部分の1つ？既存のサイトを壊すリスクなしに、これらすべての最新の改善が得られます。

これがどのように機能しますか：

• 既存のモジュール（2.9に更新する前に配置されたモジュール）は、元のラッパー構造で引き続きレンダリングされます。
• 更新後に追加された新しいモジュールは、デフォルトで新しいクリーンマークアップを自動的に使用します。

このデュアルレンダリング戦略により、スムーズな移行パスが得られます。現在のレイアウトはそのまま残り、新しいコンテンツを構築すると、より速く、より軽い構造から利益が得られます。

これらの変更があなたのウェブサイトのパフォーマンスを改善する方法

Beaver Builder 2.9は、Webサイトの読み込みをより速く、ランク付けし、よりスムーズなユーザーエクスペリエンスを提供するのに役立つ強力なパフォーマンスとワークフローの改善を導入しました。

より速く、よりスリムなページ
ラッパー<div>要素を削減し、コンテナモジュールをトップレベルの要素としてサポートすることで、レイアウトはよりクリーンで軽くなります。

よりスマートなランディングページ
不要な行と列の乱雑さをスキップします。これで、ヒーローセクションやCTAのボックスモジュールなどのコンテナモジュールのみを使用して、柔軟でハイコンバージョンのランディングページを構築できます。

クリーナーヘッダーとフッター
また、ボックスモジュールはヘッダーとフッターに輝いているため、構造化されたレスポンシブなレイアウトを作成して、労力が少なく、制御が増えます。

開発者に優しいマークアップ
過度のネスティングに別れを告げてください。合理化されたHTML出力は、CSSのターゲティングを簡素化し、特異性の問題を軽減し、カスタム開発を容易にし、保守しやすくします。

クライアントが優勝したパフォーマンス
代理店の場合、利点は明確です。サイトの高速化、クリーンなコード、より最新のビルドプロセスです。クライアントが「開発」を話さなくても、パフォーマンスとポーランド語の違いに気付くでしょう。

レイアウトを構築するより賢い方法

Beaver Builder 2.9は、単なる機能アップデートだけではありません。これは、レイアウトビルディングにアプローチする方法における思慮深い一歩です。コンテナモジュールを柔軟なレイアウトの基礎として導入し、HTML出力を合理化することにより、このリリースはビーバービルダーを最新の設計と開発の実践に沿ってもたらします。

結果？より速く、よりクリーンで、より直感的なワークフローで、時間を節約し、より良いパフォーマンスのページを提供します。シンプルなパンフレットサイトを作成したり、複雑なクライアントプロジェクトを管理している場合でも、これらの機能強化は、より簡単に構築し、自信を持って構築するのに役立ちます。

レイアウトをレベルアップする準備はできましたか？
Beaver Builder 2.9に更新し、今日よりスマートで、よりスリム、そしてより将来の準備ができているサイトの構築を開始します。