Divi 5排他的な機能（これまでのところ）

私たちは新しいDivi 5の機能を急速に展開しています。それぞれがパフォーマンスを改善し、ワークフローを合理化し、強力な設計機能を指先にもたらすように設計されています。概要が必要ですか？この投稿では、チェックアウトする価値のあるDivi 5の排他的な機能に取り組みます。そして、これは始まりに過ぎません。 FlexBoxやThe Loop Builderなどのエキサイティングな新機能が近日公開されています。私たちの更新は、DIVIを毎日使用するデザイナーや開発者から聞いた一般的な問題点に対応しています。

Divi 5は、新しいWebサイトで使用する準備ができています。

Divi 5専用の機能（およびそれらがどのように機能するか）

Divi 5は、Webサイトのデザインに革新的なアップグレードを導入し、設計タスクを改革および加速するツールの配列を使用して、より直感的にします。次の8つの機能は、新しく再構成されたDiviの可能性を示しています。

1。カスタマイズ可能なブレークポイント

2025年2月6日にリリースされた機能

DIVI 5は、カスタマイズ可能なブレークポイントシステムを使用して、レスポンシブデザインの柔軟性の向上を導入します。ほとんどのページビルダーは、ユーザーを3つの標準ビューのみに制限していますが、Divi 5は最大7つの一意のブレークポイントを可能にします。これらはすべてカスタムピクセル値に設定できます。

これにより、他の人気のあるビルダーよりもユーザーがより多くの制御が可能になります。これは、通常、固定されたデバイスサイズに固執し、限られた調整オプションを提供します。多くのプラットフォームでは、厳格な境界内の設計を強制しますが、Divi 5を使用すると、デザインが特別な注意を払う必要がある正確な画面幅をターゲットにできます。

標準的なトリオを超えて

ほとんどのウェブサイトビルダーは、デスクトップ、タブレット、モバイルトリオに固執しています。 Divi 5は、これが人々が実際に実際にWebを何十もの異なる画面サイズで閲覧するかと一致しないことを認識しました。

DIVI 5を使用すると、次のようなブレークポイントを設定できます。

• 電話（<767px）
• 電話全体（<860px） - ランドスケープモバイル視聴に最適
• タブレット（<980px）
• タブレットワイド（<1024px） - 大きなタブレットと同様のデバイスをキャッチします
• デスクトップ（> 981px）
• ワイドスクリーン（> 1280px）
• ウルトラ幅（> 1440px）

他のWordPressページビルダーはブレークポイントコントロールを提供しますが、Divi 5の精度と使いやすさに一致するものはありません。システムは直感的なままであり、すべてのブレークポイントに同じ馴染みのあるDIVIコントロールが適用されます。

視覚的なブレークポイントの処理

Divi 5は、他のほとんどのビルダーと区別する機能であるCanvas Scalingを紹介します。固定されたデバイスのプレビューを切り替えることに限定される代わりに、キャンバスの端をドラッグして、任意の幅でレイアウトを確認できます。

このアプローチは、Webブラウザー内で直接作業するような、即座に現実的なフィードバックを提供します。現在のウィンドウよりも広いブレークポイントを設計する場合、キャンバスは比例して調整されるため、小さな画面でもデザインを正確に確認できます。

ブレークポイント間を移動すると、経験は一貫しています。コントロールは同じように動作し、レイアウトは予想外にシフトしません。この信頼性は、他のページビルダーの頭痛となる可能性のあるレスポンシブデザインからの推測とトラブルシューティングを低下させます。

もっと詳しく知る

2。オプショングループプリセット

2025年3月11日にリリースされた機能

オプショングループプリセットは、Divi 5で最もエキサイティングな新機能の1つであり、あなたに合った設計システムを構築する能力を拡大します。オプショングループプリセットは、デザインのビルディングブロックです。要素プリセットは特定の要素のスタイリングにロックされますが、Divi 5のオプショングループプリセットは、あらゆる要素タイプで動作します。

タイポグラフィ、境界、影、背景など、特定のデザインプロパティの再利用可能なスタイルを作成し、これらのスタイルをさまざまな要素にわたって混ぜることができます。たとえば、見出しスタイルのプリセット、ボタンスタイリング用のもう1つ、ボックスシャドウ用の3つ目を作成する場合があります。

セットアップしたら、テキストモジュール、宣伝文句、行動への呼びかけ、またはセクションや行などのコンテナでさえ、これらのスタイルをクリックして互換性のある要素に適用できます。

なぜこれがあなたのワークフローにとって重要なのか

これは、デザインを更新する必要がある場合の時間節約です。サイト全体の要素の境界半径を変更することにしたとします。各ボタン、画像、およびセクションを狩る代わりに、ボーダープリセットを一度編集し、そのプリセットアップデートを自動的に使用してすべての要素を編集するだけです。

さまざまな要素タイプで作業する機能により、Divi 5のオプショングループプリセットが非常に役立ちます。同じボーダースタイルは、モジュール、列、行、またはセクションに適用できます。このクロス要素の互換性は、繰り返しスタイリングの仕事の時間を節約します。

この柔軟性はさらに一歩進んでいます。 Diviのオプショングループプリセットは、基本的なスタイリングオプションを超えて拡張されています。また、条件付きディスプレイ、HTMLバックグラウンドビデオ、スクロールエフェクトなどのスクリプトベースの機能もカバーしています。これにより、サイト全体の静的スタイリングとインタラクティブな動作の両方を一貫した制御できます。

もっと詳しく知る

3。高度なユニット

2025年3月19日にリリースされた機能

DIVI 5はCSSユニットの取り扱いを改善し、レスポンシブな設計を容易にしました。

これで、ビルダー内に直接今日のWebデザインに必要なCSSユニットの全範囲にアクセスできます。つまり、ピクセル（PX）、パーセンテージ（％）、EMS（EM）、ルートEMS（REM）、ビューポートユニット（VW、VH、VMIN、VMAX）、およびグリッドには文字幅（CH）や分数単位（FR）などのさらに高度な選択肢を使用できます。

これは最初はマイナーなアップデートのように見えるかもしれませんが、実際には、レスポンシブレイアウトを構築するための柔軟性を高めることができます。

なぜ別のユニットが重要なのか

携帯電話、タブレット、デスクトップで見栄えを良くしたいサイトを構築すると、ピクセルのみを使用して頭痛が生じる可能性があります。 300px幅の要素はデスクトップではうまく見えますが、モバイルでレイアウトを破る可能性があります。

Viewportなどの高度なユニットを使用すると、同じ要素を80VW（Viewport幅の80％）に設定でき、すべてのデバイスで完全に縮小します。または、REMユニットを使用して、テキストをベースフォントサイズに比例させ、アクセシビリティの調整をはるかに簡単にします。

ここで、Calc（）、Min（）、Max（）、Clamp（）などのCSS関数とユニットを組み合わせて、Real Magicが発生するのを参照してください。 Divi 5はこれらすべてをサポートしているため、あらゆる画面サイズに適応する真の流動的なレイアウトを作成できます。

たとえば、セクションの高さを計算（80VH - 60px）に設定して、ヘッダーのスペースを出しながら画面の大部分を占有させることができます。または、画面で成長しますが、読みやすい制限内にとどまるテキストには、クランプ（16px、4VW、22px）を使用します。

クランプ（）の柔軟性

Clamp（）関数は、多くの応答性のある設計上の問題を解決するため、特別な注意に値します。最小限、優先、最大サイズを一度に設定することで、Clamp（）機能を多くのWebデザイナーのお気に入りの機能にします。

画面サイズで成長しているが、読みやすいままの見出しが必要な場合があります。見出しモジュールでは、テキストサイズをクランプに設定できます（36px、5vw、72px）。見出しは36pxよりも小さく、72pxを超えることはありませんが、それらのサイズの間では、ビューポート幅の5％で拡張されます。

これにより、ブレークポイントのない画面サイズ間のスムーズな遷移が作成されます。タブレットでは大きすぎる、または大きなモニターでは小さすぎるテキストは問題になりません。あなたのタイポグラフィはレイアウトで呼吸します。

また、さまざまな設計要素には異なるユニットが必要であることを理解しています。そのため、Divi 5の高度なユニット機能は、タイポグラフィだけでなく、マージン、パディング、その他の間隔値でも驚くほど機能します。

• テキストの場合、REMユニットはすべてを比例させます。ボディテキストを1レムに設定し、見出しを2.5レムに設定すると、ベースフォントサイズを変更すると、すべてが比例してすべて更新されます。
• レイアウトの場合、固定ユニットと液体ユニットを混合してみてください。サイドバーは300pxで最適に機能する場合がありますが、メインコンテンツはCalc（100％〜350px）を使用して残りのスペースを埋めることができます。
• 間隔の場合、EMユニットはテキストサイズのスケーリングをするパディングを作成します。これにより、テキストサイズが変更された場合でも、デザインの割合が一貫しています。

また、他の議論された機能とよく再生します

特に素晴らしいことは、これらのユニットを使用するためにカスタムCSSを書く必要がないことです。それらは視覚的なインターフェイスに直接構築されています。さまざまな値を試して、結果を即座に見ることができ、これらのソリューションを手作業でコーディングするよりも、学習曲線をはるかに穏やかにすることができます。

これらのユニットは、DIVI 5の他の機能と統合されています。必要なユニットを設計変数として使用して、オプショングループプリセットを介してサイト全体に適用できます。これにより、サイト全体を流れる優れたデザインの連鎖反応が作成されます。例えば：

• 見出しサイズのような数値変数を作成します：クランプ（26px、5vw、82px）; H1見出し用。この変数を見出しテキストプリセットに適用します。見出しは、モバイルで26pxからデスクトップで82pxの間でスムーズにスケールし、それらのサイズの間の流動的な5VW計算が行われます。
• 数値変数をクランプ（20px、5VW、80px）に設定し、それをマージンとして使用すると、デスクトップ上のモバイルと寛大な呼吸室に狭い間隔があり、間にスムーズな移行があります。
• 数値変数スペースユニット：20pxを使用してベース間隔を設定し、レイアウトプリセットにcalc（）で使用します。たとえば、より大きなギャップにcalc（var（–space-unit） * 2）を適用し、より狭いスペースにcalc（var（–space-unit） / 2）に適用します。基本値を更新すると、すべての派生間隔が比例して調整されます。

これは、表面を傷つけるだけです。これらの構成をブレンドすることにより、Diviのシンプルさと新たな機能を活用するWebサイトを作成できます。

もっと詳しく知る

4。設計変数

2025年4月3日にリリースされた機能

ほとんどのウェブサイトビルダーには、グローバルな色とフォントを設定する方法があります。 Divi 5はこのアイデアを取り、それで実行します。色やフォントだけでなく、数字、画像、プレーンテキスト、さらにはWebリンクの変数を作成できます。

これについて考えてください：ほとんどのビルダーでは、どこにでも更新するプライマリカラーを設定できます。しかし、複数のページで電話番号を変更したい場合はどうなりますか？または、サイト全体で使用されている繰り返し画像を交換しますか？ DIVI 5は、これらの状況を簡単に処理します。

すべての変数は、Visual Builderのサイドバーのシンプルなパネルに住んでいます。清潔で見つけやすく、すべてを1つの場所に置きます。

プリセットと完璧にマッチします

デザイン変数とプリセット（オプショングループプリセットと要素プリセットの両方）は、維持可能でスケーラブルなデザインを作成するために連携します。変数を参照するプリセットを構築し、柔軟な設計システムを作成できます。

たとえば、メインの見出しフォントのデザイン変数を作成し、見出しのタイポグラフィプリセットでその変数を使用する場合があります。後でフォントを変更することにした場合、プリセット自体ではなく、変数を1回更新するだけです。これにより、ほとんどのビルダーが提供しない別の制御層が作成されます。

この2層アプローチにより、他のビルダーよりも多くの制御が得られます。何か（変数）が表示される場所（プリセット）からどのように見えるかを分離します。

Calc（）やClamp（）などのCSS関数を備えた数値変数を使用して、異なる画面サイズに完全に適応するレスポンシブデザインを作成できます。サイトの間隔のリズムの変数を設定し、レイアウト全体に適用して、美しくスケーリングする一貫した比率を得ます。

変数を変更すると、それを使用するすべてがすぐに更新されます。これにより、数時間の作業が数秒のクリックに変わります。

これが保守可能なデザインの作成にどのように役立つか

動作中の設計変数のいくつかの実用的な例を見てみましょう。

• ブランドをどこでも同じように見せてください。色、フォント、間隔の変数を設定します。一貫した外観のために、サイト全体のプリセットでそれらを使用します。
• ホリデーセールの実行：キャンペーングラフィックスの画像変数を作成し、プロモーションコピーのテキスト変数を作成します。シーズンが終了したら、サイト全体を更新するために1回更新します。
• ボーダースタイル：10pxなどのボーダー半径の数値変数を作成し、すべてのボタンプリセット、画像モジュール、カードに適用します。デザインの方向が変更された場合、1つのアップデートはサイト全体の丸い角に影響します。
• クライアントの更新を簡単にする：更新を行う必要があるクライアントのためにサイトを構築するとき、デザイン変数は輝きます。コンテンツの変数をセットアップすると、連絡先情報や営業時間など、頻繁に変更されます。デザイン設定に触れることなく、これらを更新できます。

設計変数は、Diviのテーマビルダーでも動作します。これは、ヘッダー、フッター、テンプレートがページと同じ変数プールを使用することを意味します。剛性パターンに閉じ込められる他のシステムとは異なり、Divi 5の変数は、整理されたままにしながら、物事を柔軟に保ちます。

もっと詳しく知る

5。ネストされた列

2025年4月17日にリリースされた機能

Divi 5はネストされた行を導入します。これにより、レイアウトをより制御できます。この追加により、列内に行を配置すると、カスタムコードなしで以前のバージョンでは不可能な複雑なレイアウトが作成されます。

ネストされた行を使用すると、高度なグリッドレイアウト、雑誌スタイルのコンテンツブロック、およびはるかに少ない労力でカードベースのデザインを構築できます。独自のマルチカラムレイアウトを含む列のあるセクションが必要ですか？これで、ビルダーで正しく行うことができます。

深さのある建物

ネストされた行を追加すると、モジュールを追加するのと同じように機能します。セクションを選択し、[プラス]ボタンをクリックし、オプションから[行]を選択します。そこから、行を追加してネストされた行を作成し、コンテンツで埋めることができます。

この一見単純な変化は、多くのデザインの可能性を開きます。独自の列構造を備えたサイドバーウィジェットを作成したり、ネストされたギャラリーを使用した製品ショーケースを構築したり、複雑なレイアウトを備えたデザイン機能の比較テーブルを作成したりできます。

最良の部分は、それがあなたのワークフローにどれほど自然に適合するかです。学ぶべき新しいものは何もありません。より多くの場所で行を使用しているだけです。 Diviで構築する方法を知っている場合、ネストされた行の使用方法をすでに知っています。

ネストされた列は、サイトビルダーの実際の問題を解決します。各サービスに独自の2列のレイアウトがあるサービスセクションを作成したいですか？以前は、カスタムCSSまたは複雑な回避策が必要でした。今ではすぐに構築されています。

コンテンツが多いサイトの場合、列幅とネストされたコンテンツ領域を混合した雑誌スタイルのレイアウトを作成できます。各記事または機能は、ページレイアウトを維持しながら、独自の列構造を持つことができます。

ただの最初のステップ

ネストされた列は、Divi 5のレイアウトの進化の始まりにすぎません。チームは、Diviをさらに柔軟にするために、完全なFlexBoxベースのレイアウトシステムに向けて取り組んでいます。

将来の更新により、追加のレイアウトコントロールが導入され、カスタムコードなしで複雑なデザインを作成するためのさらに多くのオプションが得られます。この系統的なアプローチにより、各新しい機能が次の機能に移行する前に完全に機能します。

Divi開発チームは、中途半端な機能を急いでいるのではなく、レイアウト設計の将来のための堅実な基盤を構築しています。各ステップは最後に構築され、将来の防止と使いやすいシステムの両方を作成します。

もっと詳しく知る

6。モジュールグループ

2025年5月1日にリリースされた機能

多くの場合、Webサイトの構築とは、同じコンテンツパターンを繰り返し作成することを意味します。完璧なチームメンバーカードをデザインし、次の人のために20分間再作成します。モジュールグループは、関連する要素を再利用可能なユニットにパッケージ化できるようにすることにより、これを解決します。

変更は次のとおりです。各ピースを個別に扱う代わりに、完全なブロックで作業します。製品カードは、個別に選択する必要がある6つの異なるモジュールではなく、移動するものの1つになります。 50の製品カードで間隔を調整する必要がある場合は、各カードを手動で編集する代わりに、グループテンプレートを1回更新します。

大きなサイトには本当の利点があります。多数のチームメンバー、製品カタログ、またはサービスリストを抱えるクライアントプロジェクトが管理可能になります。あなたは繰り返しのアセンブリの仕事をしていません - あなたはコンテンツと微調整に焦点を合わせています。

カスタムモジュールの組み合わせを作成します

モジュールグループは、単一のモジュールが通常処理できない可能性を開きます。背景画像、オーバーレイアイコン、見出し、説明、「詳細を学ぶ」と「見積もりを入手」を必要とするサービスカードを構築します。

モジュールグループを使用すると、これらの要素をどのように希望するかを正確に重ねます。これは、標準テンプレートに適合しないコンテンツに役立ちます。

価格表には、モジュールグループ内で3つのネストされた行を使用できます。最初の行の見出し、2番目の価格の詳細、および3番目の機能リストです。これにより、組み込みの価格設定テーブルモジュールが提供していないフォント、色、間隔を個別に制御できます。

同じアプローチは、グループ構造内に配置されたアイコン、画像、見出し、およびテキストモジュールを使用した証言で機能します。すべてを単一のユニットとして管理しやすいままにしながら、標準の証言モジュールよりも多くのレイアウトの柔軟性を得ることができます。

重要な利点は、建物のレイアウト制御を、複数の要素を1つのピースとして扱うという利便性とゼロからのレイアウト制御を組み合わせることです。

再利用可能なコンポーネントライブラリを構築します

効果的なモジュールグループを作成したら、グローバル要素として保存します。これにより、各プロジェクトで成長するコンポーネントライブラリが作成されます。スタイリングを改良すると、20ページにわたって証言レイアウトの更新が行われ、デザインを反復する間、製品のショーケースは一貫しています。

ページを作成するたびにゼロから始める代わりに、一貫したレイアウトから始めて、新しいページとレイアウト要件に適応します。

Diviクラウド統合の容易さを受け入れます。このツールを使用すると、コンポーネントはプロジェクトからプロジェクトに簡単に移動できます。特定のクライアントサイトのモジュールグループの堅牢なセットを開発するとしましょう。今後の割り当ての基礎としてそれらを活用できるようになりました。このようにして、すべてのプロジェクトは以前のソリューションの利点を取得しますが、その明確な美学を保持します。

Divi 5の設計システムでシームレスに動作します

モジュールグループは、デザイン変数とオプショングループプリセットでそれらを使用すると非常に興味深いものになります。証言グループを構築するとします：引用、著者名、会社、写真。

固定色を設定する代わりに、ブランドの色変数を参照します。見積スタイリングの場合、カスタムフォント、サイズ、ラインの高さを含むタイポグラフィのオプショングループプリセットを作成します。著者名には、別の見出しオプショングループプリセットを適用します。

次に、そのモジュールグループをグローバル要素として保存します。これらのオプショングループプリセットは、サイト間のすべての証言を設計システムに接続します。クライアントがより暗いグレーを必要とする場合は、変数を1回変更し、すべての証言グループモジュールが更新されます。見積スタイリングを調整する必要がある場合は、タイポグラフィオプショングループプリセットを1回編集します。すべての証言の引用は即座に変化します。

これにより、どこにでも散らばっている個々のモジュールの管理が勝ちます。モジュールグループは、境界、背景、テキストスタイリングにオプショングループプリセットを使用するため、グループ化されたすべての要素を介したプリセットフローを自動的に更新します。

もっと詳しく知る

7。属性マネージャー

2025年5月16日にリリースされた機能

アクションモジュールの呼び出しでボタンをスタイリングしました。色が機能し、ホバーエフェクトはよく見えます。これで、連絡先フォームに同じボタンスタイルが必要ですが、CTAの見出しや背景は必要ありません。

通常のコピーパステはここでは機能しません：あなたはすべてを得るか何も得るでしょう。 Divi 5属性管理機能のおかげで、ボタンパーツのみをコピーできます。 CTAを右クリックし、コピーするものを選択し、

次に、それらのボタンスタイルのみを連絡先フォームに貼り付けます。

移動するものを選択して選択します

DIVI 5は、すべての要素を異なるタイプの属性に分割します。コピーするものを選択します。

• すべての属性 - すべてがコピーされます
• デザイン属性 - 色、間隔、プリセット、しかしテキストや画像はありません
• スタイルの属性 - カスタムが変更されます
• コンテンツ属性 - テキストと画像のみ
• プリセット - プリセットの割り当てのみ

ボタンのスタイリングが必要であるが、テキストではないとしましょう。デザイン属性をコピーします。セクションの背景プリセットが必要ですが、パディングはしませんか？プリセットのみをコピーします。

異なるモジュール間で動作します

あるタイプのモジュールから属性をコピーして、別のタイプに貼り付けることができます。たとえば、アクションモジュールのコールからコピーして、連絡先フォームに貼り付けることができます。 Divi 5は、両方のモジュールでどの設定が機能するかを把握し、残りを無視します。

これは、異なるモジュールタイプで同じスタイリングを必要とするサイトを構築するときに役立ちます。ボタンを使用するすべてのフォーム、証言、または他のモジュールのボタン色を再作成する必要はありません。

グループレベルのショートカット

属性システムは、選択的なグループ管理により深くなります。設定パネルを完全にスキップします。コンテキストメニューから特定の属性グループを直接クリックして適用します。

完璧なボタンプリセットでモジュールをコピーしましたか？選択的なメニューを介して、そのボタンプリセットを他の要素に貼り付けることができます。タブハンティングはありませんし、ダイビングの設定もありません。

同じ精度がリセットに機能します。コンテンツをそのままに保ちながら、すべてのデザイン属性をワイプします。または、カスタムスタイリングオーバーライドを保存しながら、プリセットのみをリセットします。

ショートカットのスピード

すべてのアクションでは、コンテキストメニューに正確に表示されるキーボードショートカットを取得します。いくつかの重要な組み合わせとスタイリングが加速します。ショートカットはすべての属性タイプにわたって一貫しているため、指はパターンをすばやく学習します。

これは、クリックを保存するだけではありません。何百もの要素を備えたサイトを構築する場合、これらの微小効率は時間の節約された時間に合わせます。繰り返しの手動作業は、迅速でターゲットを絞ったアクションになります。

あなたのデザインシステムでうまく再生します

属性マネージャーは、Divi 5のプリセットエコシステムに直接接続します。これらのシステム接続は、オプショングループプリセットと設計変数を使用してモジュールをコピーするときに沿って移動します。

プリセットを含む貼り付け属性、およびそれらの新しい要素はすぐにグローバルスタイリングシステムに接続します。プリセットを後で更新すると、すべてのコピーされた要素が変更を自動的に反映します。デザインシステムは、要素を迅速に構築および複製するため、接続されたままです。

もっと詳しく知る

8。設定検索とフィルタリング

2025年5月29日にリリースされた機能

Webサイトの構築とは、設定を調整することを意味します。 Diviモジュールは、数十のオプションをパネルに詰め込み、その1つのカラーフィールドのタブを狩ることができます。 Divi 5は、Divi 4から検索機能を元に戻しますが、うまく機能します。

すべての設定パネルの上部に検索バーがあります。必要なものを入力し、Diviには一致するオプションのみが表示されます。 「国境」をお探しですか？すべての国境関連の設定が表示され、他のすべてが消えていきます。 「パディング」を調整する必要がありますか？すべての間隔コントロールが即座にポップアップします。

これにより、作業が遅くなるクリックとスクロールがなくなります。タブを開いてグループを狩る代わりに、数秒で必要なものを見つけることができます。

あなたが変えたものによってフィルタリングされます

リアルタイムセーバーは、「変更された」フィルターです。クリックして、すでに調整した設定のみを表示します。これは、レイアウトパックまたはスターターサイトをつかみ、カスタマイズされたものを確認するときに役立ちます。

ビジネスレイアウトをインポートしますが、色を変更したいとします。変更されたフィルターを押して、すべてのモジュールを掘り下げることなく、すべてのカスタムカラーの選択を見つけます。どのフォントが変更されたか、どの間隔が微調整され、どの効果が追加されたかを確認できます。

これは、クライアントプロジェクトにも最適です。誰かがあなたが彼らのサイトでカスタマイズしたものを尋ねると、変更されたフィルターはあなたの作品をはっきりと示しています。

スマートフィルタリングオプション

変更されたフィルターを超えて、タイプを設定してソートを取得します。パレットを更新するとき、「色」フィルターはすべての色のフィールドに一度に表示されます。タイポグラフィの変更が必要な場合、「フォントファミリ」と「フォントウェイト」フィルターは、すべてのモジュールでテキスト設定を明らかにします。

システムは、どの設定が最も重要であるかを知っています。色とフォントは、人々が行う最も一般的な変化であるため、フィルターを取得します。間隔の調整が頻繁に行われるため、サイズがグループ化されます。

これらのフィルターは、サイト全体の変更を行ったときにクリックを保存します。すべてのモジュールを個別に開く代わりに、変更する必要がある設定のフィルタリングされたリストを使用します。

もっと詳しく知る

Divi 5が人気のあるオプションに対してどのように積み重なるか

Webサイトビルダーマーケットにはオプションが混雑していますが、Divi 5はいくつかの真に新機能のおかげで際立っています。これがDivi 5を違うものにするものを見ています：

これがあなたのプロジェクトにとって何を意味するのか

Divi 5の機能の組み合わせは、他のビルダーが完全に一致できない設計システムを作成します。オプショングループのプリセットとモジュールグループだけで、Divi 5を競合他社よりも先に進みます。

設計変数がプリセットとモジュールグループで動作する場合、多目的なものが得られます。プリセット内の参照変数、それらをグループ化された要素に適用し、すべての要素をサイト全体で自動的に更新する値を変更します。今後のFlexBoxおよびLoop Builder機能をミックスに追加すると、カスタムコーディングを必要とせずにWebサイトを作成することができます。

次は何が来るのですか？

Divi 5ロードマップは、間もなく着陸する継続的な更新を示しています。 7つのチームに分かれている開発者は、少なくとも2週間ごとにさまざまな機能にフルタイムで作業し、更新を出荷しています。これは、今後数週間で期待できることのスニークピークです。

フレックスボックスレイアウト

最大の変更は、完全なFlexboxレイアウトシステムです。これは、完成から数週間離れています。これにより、レイアウトの作成方法が完全に置き換えられます。カスタムCSSの代わりに視覚コントロールを介して、新しい行テンプレート、自動垂直センタリング、コンテンツラップ、および間隔分布を取得します。

モジュールグループは、関連するモジュールをバンドルするコンテナとして出荷されたばかりです。 FlexBoxと組み合わせることで、雑誌のレイアウト、一致した高さの製品ショーケース、以前は回避策を必要とする複雑なアライメントを作成できます。 FlexBoxが到着すると、特殊セクションが消えます。

ループビルダーとwoocommerceの更新

FlexBoxレイアウトシステムとモジュールグループに基づいて、ループビルダーは、単一のモジュール、グループ、またはセクション全体を繰り返すことができます。テンプレートにロックする他のビルダーとは異なり、繰り返しを定義して動的コンテンツに接続します。ネストされたループも機能します。たとえば、各投稿がループレビューを表示して、投稿をループするブログカテゴリ。

WooCommerceモジュールは、Divi 5のアーキテクチャを使用してゼロから再構築されます。現在のモジュールは、後方互換性を介して動作しますが、プリセットや変数とは対話しません。新製品モジュールは数週間以内に完成し、WooCommerceのサポートをベータ版の軌道に乗せます。

高度な色

色相、飽和、軽さ（HSL）の相対的な色をサポートすると、数学的な色の関係を構築できます。プライマリカラーを一度設定してから、バリエーションを自動的に生成します。「プライマリブルーが20％軽く」またはベースを変更したときに更新する補完的なシェード。

ベータおよび移行計画

ベータは、3つの目標が完了したときに始まります。既存のサイトの後方互換性の改善、完全なウコンマースモジュールサポート、およびアルファフィードバックに基づく継続的なバグ修正です。

現在の進捗状況で進むと、数か月後にベータ版を示唆しています。また、チームはバックエンドに取り組んでいるため、Divi 4サイトは変更を必要とせずに移行できます。 Divi Marketplaceのサードパーティモジュールには、完全な互換性が必要です。

新しいプロジェクトの場合、Divi 5 Alphaはほとんどのビルドに十分な機能を提供します。パフォーマンスの改善だけでスイッチを正当化します。既存のサイトは、特定の新機能が必要な場合を除き、ベータを待つことで恩恵を受けます。

ベータ版が到着すると、完全な機能セットと徹底的なテストから信頼性が得られます。公式リリースはすぐに続き、将来のプロジェクトの強固な基盤を提供します。

Divi5を試す準備はできましたか？開始方法は次のとおりです

これらのDivi 5の排他的機能は、違うものを作成するために連携します。一貫したデザインのためにビルダーと戦う代わりに、自分自身を維持するシステムをセットアップします。同じスタイルを繰り返し再構築する代わりに、一度作成してどこでも再利用します。これはほんの始まりに過ぎません！

したがって、Divi 5を使用して新しいWebサイトを構築することにより、今日のカーブに先んじてください。すべてのDIVIメンバーが無料で利用できます。アカウントエリアに向かい、コピーを手に入れてください。

WordPressがインストールされたら、通常のテーマをアップロードします。外観>テーマ>新しい>アップロードテーマをアップロードします。テーマをアクティブにし、資格情報でログインし、構築してください！最初のビルドでは、すべてをゼロから再構築した理由が表示されます。

覚えておいてください：今すぐ新しいWebサイトにのみDivi 5を使用してください。アルファフェーズ中に既存のサイトを移行することはお勧めしません。