DIVI 5の設計変数の導入

Divi 5のデザイン変数を導入することを楽しみにしています。これは、Diviの設計ワークフローを大幅に改善し、Diviユーザーに他のビルダーよりも深刻な脚を提供する新機能です。

色、フォント、数字、画像、テキストなど、あらゆるものの変数を定義し、Divi要素とプリセットに接続できます。変数を更新すると、ウェブサイトのデザインとコンテンツが変更されます。

変数とDIVIの新しいプリセットベースの設計システムの相乗効果は素晴らしいです。それがどのように機能するかをお見せしましょう。

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

Diviは、可変管理で「グローバル」になります

Diviのグローバルカラーシステムのおかげで、デザイン変数の概念にすでに精通している可能性があります。グローバルな色は、デザイン変数の一種です。ただし、このアップデートでは、グローバルなすべてを紹介しています！さらに、新しい変数マネージャーのおかげで、グローバル設定の管理はこれまで以上に簡単です。

新しい変数の作成

左サイドバーの変数アイコンは、ウェブサイトの変数マネージャーを開きます。新しい変数を追加し、名前と値を指定すると、その変数を任意のページの関連する設定にプラグインできます。 DIVIは現在、DIVIのすべてのネイティブ入力フィールドをカバーする6種類の変数をサポートしています。

• 色：色はすべてのWebサイトに不可欠です。ほとんどのWebサイトは、3〜4個の主要な色のみを使用しています。色変数を定義し、ウェブサイトを介してそれらを使用することは、ウェブサイト全体のカラーパレットを数秒で調整できることを意味します。
• フォント：静的フォントで作業する時代は終わりました。さらに、テーマカスタマイザーのグローバルフォント設定に限定されなくなりました。ウェブサイトのフォントを変数として定義し、すべてを1か所で管理できます。
• 番号：番号変数を使用して、Webサイトのサイジングシステムを設計できます。たとえば、すべての要素にわたって標準的な国境とラジウスサイズを使用できます。それを変数に変えると、単一の変数を編集することで、丸い角のサイズを調整できます。その他の毎日の用途には、ウェブサイトのテキストサイズとラインの高さの定義、コンテナの幅と間隔、およびその間のすべての定義が含まれます。
• 画像：複数のページで同じ画像を使用していますか？たとえば、おなじみのブランドモチーフとして機能する標準的な背景画像がある場合があります。それを変数に変えると、ブランドをリフレッシュするのは簡単です。
• テキスト：変数は設計に限定されません。テキスト変数を定義することもできます。たとえば、会社の電話番号と住所をテキスト変数に変換した場合、ビジネスの詳細が変更されたときに使用したすべての場所を探しに行く必要はありません。
• URLS ：URL変数も投げました。なぜなら、なぜですか？一年のさまざまな時期に、さまざまなページにアクションを促す主要なリンクを持ちたい場合があります（たとえば、販売中に変更してください）。そのURLをどこでも更新する代わりに、単一の変数を更新します。

要素とプリセットの変数を使用します

設定上の変数アイコンをクリックして、ウェブサイトから関連する変数と動的コンテンツのリストから選択します。

Diviの可変コンテンツシステムは、以前はコンテンツフィールドでのみ利用可能であったすべてのフィールドに拡張されています。つまり、数値フィールド、フォントフィールドなどに変数と動的コンテンツを割り当てることができます。

変数の例を設計します

設計変数は機器であり、Diviデザインワークフローのコアコンポーネントになります。しかし、コンセプトがクリックしていない場合は、いくつかの例を挙げましょう。

例1：グローバルフォントを管理します

設計変数を使用してワークフローを改善するにはどうすればよいですか？まず、フォント変数を考えてみましょう。

ほとんどのWebサイトは2〜3つのフォントを使用しています。おそらく、さまざまな要素とプリセットで希望のボディとタイトルテキストフォントのセットアップに時間を費やしたでしょう。

しかし、物事を切り替えたい場合はどうなりますか？プリセットでウェブサイトを最適に設計したとしても、戻ってフォントを変更するのは時間がかかる場合があります。特定のフォントを使用したすべての場所を覚えていることすらできません。

そこにフォント変数が入ります。

上記のビデオでWebサイトを構築しました。タイトルフォント、ボディフォント、ハイライトフォントの3つのフォント変数を使用しています。

タイトルフォント変数をデフォルトのBlurb Presetなどの要素に追加するのは簡単です。静的フォント値を使用したことがないが、代わりに変数に接続されているため、ウェブサイトのフォントは完全に動的です。

私のウェブサイトのタイトルフォントを変更するのは、タイトルフォント変数を更新するのと同じくらい簡単です。

例2：グローバルサイズを管理します

テキストサイズで同じことをすることができます。

以下のビデオのWebサイトでは、さまざまな見出しレベルとボディテキストスタイルの一連の8つのテキストサイズを定義しました。デフォルトのBlurb Presetを更新し、中程度の見出しテキストサイズ変数を割り当てると、すべての宣伝文字がその変数から値を継承します。

私はウェブサイト全体のテキストサイズを変数に基づいているので、私のウェブサイトのテキストサイズを変数マネージャーから完全に管理できます。

例3：ウェブサイト全体をグローバル化します

上記のビデオでは、変数の全力を活用するウェブサイトを見ることができます。すべての色は変数であり、フォント、テキストサイズ、ボーダーラジウスサイズ、およびコンテナ要素の間隔値も同様です。

それだけでなく、共有コンテンツを変数に変えました。私の会社名、電話番号、住所はコンテンツ変数です。

Webサイト全体でおなじみのブランドモチーフである背景画像でさえ、簡単に変更できる画像変数です。

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

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

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

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

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

スニークピーク：ネストされた列

私たちは機能を速く構築しています。新しい機能を完了するたびに、新しい機能を開始します。新しい機能を開始するたびに、スニークピークをお届けします。

見逃した場合に備えて、先週の機能スニークピークをチェックしてください。そこでは、ネストされた列を紹介します。行の中の列！これは単純なアイデアですが、DIVI 5のより柔軟なレイアウトシステムを作成するための重要な第一歩です。

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

Divi 5の更新が進行中です

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

見てくれてありがとう、そしてあなたが行く前に、私は尋ねることを望んでいます。 Diviのカムバックのためにここにいる場合は、このビデオにコメントしてください。すべてのコメントを読みます。このビデオが200コメントに届くのを見たいので、コメント数を確認して、できれば手を貸してください。これはアルゴリズムを養うための素晴らしい方法であり、さらに重要なことに、私たちはあなたとチャットするのが好きです。

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