Divi 5のFlexboxレイアウトシステムが到着しました

今日、DIVI 5用のまったく新しいFlexBoxベースのレイアウトシステムを紹介します。

これはマイナーな更新ではありません。 Diviを再発生し、レスポンシブレイアウトの故障、カスタムモジュールの順序付け、簡単な垂直アライメント、要素の位置決めなど、レイアウト構造を構築できます。

石は裏返されず、選択肢も忘れられませんでした。私たちはそれをすべてしました、そしてそれは授業で最高です。

次のビデオをチェックして、新しい機能を参照してください。

Divi 5のまったく新しいレイアウトシステム

Diviのレイアウトシステムを再発明し、多くの新しい行テンプレートとレイアウトオプションを追加しました。 FlexBox、ネストされた行、およびモジュールグループを使用して、任意のレイアウトを作成できます！

新しいレイアウトシステムにより、要素の位置決め、間隔、ラッピング、および順序付けが簡単になります。

新しいFlexBox Rowテンプレートの堅牢な選択

最初に、ネストされたマルチローオプションを含む新しい行テンプレートの選択に気付くでしょう。もっと多くのバリエーションを楽しむべきです！

これらのテンプレートに限定されません。それらは便利な事前に構築された例です。設定パネルを掘ると、ガードレールはありません。必要な数の列を追加して、任意のサイズを任意のサイズに渡したり、列内に行をネストしてレイアウトを作成したりできます。

すべてのFlexBoxがコントロールします

すべての新しいFlexBoxオプションが利用可能です。レイアウトのラッピング、方向、注文、間隔、子要素の位置決めなどを制御できます。ハッキング、JavaScript、混乱なし、素晴らしく動作する直感的なコントロールを制御できます。

応答性のある行構造

レスポンシブウェブサイトの構築はかつてないほど簡単になりました。

すべてのブレークポイントで、1つの行に異なる構造を割り当てることができます。それは非常にシンプルであり、Diviは他のどのビルダーよりも優れているため、各デバイスのレイアウトを完全に変換できます。また、各デバイスの列のサイズをカスタマイズして、FlexBox設定を調整することもできます。

応答性の要素順序付け

応答性のある要素順序は簡単です。

要素が各デバイスで流れる方向と個々の要素の順序を簡単に変更できます。各デバイスの行構造を完全に変更し、その新しい構造内で最適に物事を再注文できます。

簡単な子要素の位置決め

FlexBoxは、親コンテナ内の配置要素をよりシンプルにします。

JavaScriptや絶対に配置された要素を使用する必要はありません。たとえば、列内に要素を垂直にセンタリングするのは、クリックするだけです。

要素の高さを統合することも簡単です。たとえば、すべての列を連続して同じ高さ、または列のすべてのモジュールを同じ高さにするのは簡単です。

専門分野と全幅のセクションを非難します

Diviの構造要素を大幅に簡素化し、専門分野と全幅のセクションを廃止しました（既存の全幅および専門要素が機能し続けます。新しいものを追加するオプションを削除しました）。

通常のFlexBox行ですべて（およびそれ以上）を行うことができるため、さまざまなセクションタイプは必要ありません。一意の全幅モジュールが名前が変更され、標準セクションで利用可能になり、柔軟性が高まります。

無限の新しいレイアウトの可能性

カバーする設定が多すぎて探索する可能性がありますが、1つのことが明らかです。Diviの未来のレイアウトシステムはここにあり、Divi Webサイトの構築は決して同じではありません。

物事をまとめる前に、Diviの新しいレイアウトシステムで構築されたいくつかのクリエイティブレイアウトを見せましょう。レイアウトをダウンロードして、自分でチェックアウトすることもできます。

レイアウトをダウンロードします

私たちもいくつかの驚きを投げました

このアップデートで他のいくつかの驚きの改善に気付くでしょう。

• 大幅な速度の改善- 大きくて複雑なレイアウトを編集するときに、ビルダーがはるかに速いことに気付くでしょう。無限にネスト可能な列と新しいコンテナ要素の導入により、非常に複雑なデザインを構築する自由があります。この更新により、レイアウトが夢中になっても、ビルダーがまだ速く稲妻になるようにしました。昼と昼の違いです！
• 新しい列オプション- ギャラリーモジュールやポートフォリオモジュールなどのすべてのグリッドモジュールには、すべてのブレークポイントでグリッドの列構造を制御できる新しい列設定があります。
• FullWidthモジュールの名前変更- FullWidth HeaderモジュールはHeroと改名され、FullWidth PortfolioモジュールはCarousel後に変更されました。両方のモジュールを標準セクションで使用できるようになりました。
• ポストカルーセルの新しい投稿タイプオプション- 新しく名前のポストカルーセルモジュールには、新しいポストタイプ設定があり、カルーセルにあらゆるタイプの投稿を埋めることができます。

今日Divi 5を試してみてください

Divi 5のFlexBoxは本日利用できます。これは、今年DIVIに登場する多くの機能の1つです。

Divi 5以降の最終リリースを進むにつれて、2週間ごとに更新を進めることができます。優先順位に応じて、Divi 5を使用して新しいWebサイトを構築したり、機能を追加するまで待機したりすることができます。

Divi 5のオリジナルの多相リリーススケジュールで概説されているように、Divi 5 Public Alphaは「Divi 5 Lite」のようなものです。いくつかの機能が欠落しており、既存のWebサイトには適していない場合がありますが、Divi 4のエクスペリエンスを好む場合は、新しいWebサイトで使用する準備ができています。

私たちはあなたにそれを試してほしい、そしてあなたがそれを愛しているなら、それを使ってください。誰もがそれを愛しているとき、私たちはそれを公式にします。

相互作用を試しましたか？

最近、ポップアップやトグルなどのインタラクティブな要素を作成するための堅牢なシステム、クリエイティブスクロールベースおよびマウスモーブメントベースの効果を作成するための堅牢なシステムのインタラクションをリリースしました。ポップアップビルダーではありません。それは何でもビルダーです。トリガーを作成し、効果を割り当て、ターゲットを選択し、カスタムインタラクションを実現します。ビデオの説明には、詳細を確認するリンクがあります。

すべての詳細については、このビデオをご覧ください。

Divi 5の更新が進行中です

2025はDivi 5の年です。退屈な仕事は私たちの後ろにあります。私たちはSuper-Fast Foundationを構築しましたが、Diviがカムバックする時が来ました。

Diviのカムバックのためにここにいる場合は、このビデオが好きでコメントを残して、私たちに大きな恩恵を与えてください。あなたがDiviを応援しているのを見るのは私たちにとって多くのことを意味し、アルゴリズムを供給して言葉を広めることが不可欠です。

YouTubeでフォローし、Diviニュースレターを購読することを忘れないでください。そうすれば、更新を見逃すことはありません。もう1つのDivi 5機能の発表でお会いしましょう。