Divi 5のプリセットを備えた設計変数を使用します

オプショングループプリセット（要素プリセットとうまく組み合わせて）と設計変数は、効率を向上させるのに役立つ2つのエキサイティングなDIVI 5機能です。 Divi 5を使用することを学ぶと、すべてのWebサイトビルドがどれほど速くなるかを体験できます。効率を改善する素晴らしい方法は、グローバルデザイン変数マネージャーに設計変数を設定し、プリセットを使用してサイト全体でそれらの事前定義値を使用することです。これは、Diviを使用してWebサイトを設計するための最もスケーラブルな方法で簡単に行うことができます。この投稿では、最大限のものを作成する方法を紹介します。

Divi 5は新しいWebサイトの準備ができており、Divi 4に欠けている新しい機能が含まれています。ただし、既存のWebサイトをDivi 5に変換することはまだお勧めしません。

Diviのプリセット +設計変数を組み合わせます

DIVI 5は、設計変数とオプショングループプリセットを通じて、新しいレベルの設計モジュール性を導入します。オプショングループプリセットは、ボディテキスト、間隔、境界、フィルターなどの特定のスタイルグループをターゲットにし、異なるモジュールに適用できます。一方、要素プリセットは、特定のモジュールまたは要素の完全な設計構成（セクション/row/列/モジュールグループ）を保存します。

これらのタイプのプリセットはどちらも、設計変数と組み合わせると最適に機能します。

設計変数は、視覚ビルダー内の左側のサイドバーに住んでいます（そして、簡単にアクセスできるようにドッキングできます）。フォント、色、数字、テキスト文字列、画像、リンクのグローバル値を定義できます。作成されると、これらの変数は動的値をサポートする任意のフィールドで再利用できます。これには、Divi 5のほぼすべての設計フィールドが含まれています。デザイン変数の更新には、その変数が使用されるすべてのインスタンスを更新するという追加の利点があります。

数字、テキスト、URL、色、フォント、画像を簡単に使用できるデザイン変数を設定します

Divi 5で最もスケーラブルなワークフローは、明確な操作の順序に従います。まず、新しい変数マネージャーを使用してグローバル設計変数を定義します。次に、オプショングループプリセットと要素プリセットにこれらの値を適用します。システムを破ることなく、要素レベルで何かをオーバーライドできます。

このアプローチは、コンテンツとニーズが進化するにつれて柔軟性のある安定した設計システムを提供します。

なぜ設計変数とプリセットを組み合わせるのですか？

デザイン変数は、ビルド全体で継続的に使用する繰り返しの基本情報とスタイルと考えてください。プリセット（オプショングループまたは要素レベル）は、より大きなグループ化であり、設計変数を拡張できます。

両方を一緒に使用すると、メンテナンスが簡単なタイトな設計システムを作成できます。これらを一緒に使用する理由は次のとおりです。

1.プリセットを迅速に作成します

ベンジャミン・フランクリンを誤って引用するために、「計画の1オンスは努力する価値があります。」設計変数は、ビルドの計画と準備段階で作成するものと考えることができます。

すべての変数をセットアップするのに少し時間がかかる場合がありますが、要素プリセット（およびOGプリセット）を作成すると、基礎が既に配置されているため、それらを飛行します。

2。グローバルアップデート

設計変数により、サイト全体で繰り返し使用される変数を簡単に更新できます。プライマリカラーを変更したり、フォントに向かっている場合、または何かのサイズを変更したい場合は、変数マネージャーからそうすることができます。プリセットレベルで適用されるすべてのスタイルにも同じことが言えます。単一のプリセットを更新し、同じプリセットを共有する他のすべての要素が変更されます。

したがって、個々の変数を更新するか、要素/オプショングループ全体を更新するかにかかわらず、どちらも数秒でグローバルな変更を行う方法です。 2つの間では、スタイルの70％以上を占める可能性があります（グローバルスタイル=メンテナンスブーン）。

3.デザインについてグローバルに考えるように強制します

これらを一緒に使用するとき、最初にデザイングリッドを使用してすべてのデザイン決定を強制します。これにより、あなたがより訓練されるのに役立ち、デザイナー/開発者のチームがDIVIでよりよく協力できるようになります。

4.ページが少ない

これには生産性の利点がありますが、Webサイトの各ページにロードされたCSSの量を減らすこともできます。プリセットは、特にモジュールあたりのスタイルを減らして、スタイルシートを大きくします。

デザイン変数とプリセットを備えたWebサイトを作成します

これらのツールを使用してDivi 5でスケーラブルなページを構築する方法の実際の例を見てみましょう。チェスクラブレイアウトパックをインスピレーションとして使用し、プリセット内のデザイン変数を使用して再作成します。

ステップ1：設計変数を定義します

左側の編集パネルに設計変数マネージャーを開くことから始めます。コアブランドの色を追加します。これには、通常、プライマリ、セカンダリー、および明るいセクションや暗いセクションのアクセント、背景、テキストのためのいくつかのサポートトーンが含まれます。

次に、フォント変数を設定します。少なくとも2つを定義します。1つは見出し用、もう1つはボディテキスト用です。ブランドがボタンやアクセントに特別な書体を使用している場合は、それも追加してください。

次に、タイポグラフィシステムの一連の数値変数を作成します。 Clamp（）関数を使用してH1からH6を定義するため、それぞれが画面サイズ全体で流動的になります。 Clamp（）を使用して、ボディテキストサイズとボタンテキストサイズを定義することもできます。フッターやブログカードなどの小さなスペースについては、コンパクトなフォントサイズの変数を追加することも検討してください。

セクション幅、パディング、ボーダーラジウスなどの一貫した間隔値の数値変数を定義して続行します。また、「Book Now」や「See Membership Plans」などの一般的なCTAフレーズに1つまたは2つのテキスト変数を追加することもできます。これらは、サイト全体で再利用されると、後で簡単に管理および更新できます。

ヒーローイメージ、ロゴのバリエーション、パターンイメージなど、同じ画像を複数回再利用することを期待している場合は、先に進んで画像変数として定義してください。

ステップ2：セクション/行/モジュールを備えたワイヤフレームを作成します

設計変数が設定されたので、ページ構造をレイアウトすることから始めます。必要なセクション、行、およびモジュールを追加して、レイアウトを視覚化します。

このステップは厳密に構造的です。まだスタイリングではありませんが、次にオプショングループプリセットを適用する準備をしています。コンテンツやその他の要素を配置すると、追加の変数が役立つ領域を発見する場合があります。それらを書き留めて、先に進む前に追加できるようにします。

あまり見た目はありませんが、これらは、スタイルを整えたときにレイアウトの目標のように見えるビルディングブロックです

Chess Clubレイアウトパックからホームページレイアウトを再作成しているが、新しいデザイン変数とオプショングループプリセットを使用していることがわかります（試行された真の要素プリセットとともに）。このようにして、このページが完了したら、他のページをさらに速く作成できます。

ステップ3：オプショングループプリセットに変数を適用します

ワイヤーフレームが設置されたので、オプショングループプリセットを使用してサイトのビルディングブロックをスタイリングする時が来ました。これらのプリセットは、テキスト、サイジング、間隔、背景などの個々のスタイルグループに適用され、同じオプショングループ（OG）を使用するすべてのモジュールで動作します。

タイポグラフィから始めましょう。見出し（テキストや宣伝モジュールなど）のある任意のモジュールをクリックし、[デザイン]タブを開き、見出し/タイトルオプショングループを見つけます。グループの上にホバリングし、プリセットアイコンをクリックして、そのグループのデフォルトのプリセットの編集を開始します。

以前に作成した設計変数を使用して、目的のフォントファミリ、サイズ、およびラインの高さを設定します。各見出しレベル（H1 – H6）のカスタムOGプリセットを作成し、応答性制御のために一貫したクランプベースの変数を割り当てることができます。デフォルトレベルをH2またはH3に設定することを忘れないでください。ページごとに1つのH1しか必要ないため、H1のデフォルトはめったに意味がありません。

DIVIのサポートされているフィールドで設計変数アイコンを見つけて、関連する変数の1つを適用します

[設計変数]アイコンをクリックすると、そのフィールドに適用できるすべての関連デザイン変数のリストが表示されます（モジュール/要素、モジュール/要素プリセット、OGプリセットレベルのほとんどのフィールドで動作します）。

ボディテキストについてこのプロセスを繰り返します。より小さなUIスペース（フッターやブログループなど）用のコンパクトなテキストシステムを作成した場合、これも定義する時です。

ページまたはサイト上の他の場所で使用するすべてのデザイン要素は、オプショングループプリセットを使用して作成します。これは、特にセクションのサイジング（幅/高さ）、背景色/パターンモチーフ、およびオンの場合に当てはまります。

このステップの終わりまでに、視覚システムのほとんど（テキストスタイリング、間隔、背景）は、モジュール、一貫性があり、設計変数によって完全に駆動されます。

ステップ4：頻繁に使用されるモジュールの要素プリセットを作成します

一部のモジュールはより複雑で、要素プリセットを作成する必要があります。これは、多くのモジュールが他のモジュール間で使用されないオプショングループを持っているためです。この例で複数のボタンバリエーションを作成したいので、要素プリセットを使用してそれを実現します。

背景色、テキスト色、フォント、間隔、リンクを引き出すデフォルトのボタンモジュールプリセットから始めます。これらはすべて、設計変数から供給されます。それぞれのバリエーションが設計変数とモジュール設定の異なる混合を使用するため、オプショングループプリセットの代わりに要素プリセットを備えたボタンを設計しています。テキストは単一のOGでスタイルを整えることができますが、ボタンのようなものには、それらのあらゆる部分をスタイリングおよびデザインするための複数のOGがあります。

これを行う最も簡単な方法の1つは、モジュールでボタンを直接スタイリングすることです。次に、「現在のスタイルの新しいプリセット」をクリックすると、これらの設計設定を新しい要素プリセットに適用できます。

2つのボタンスタイルでそれを行うと、Webサイト全体にボタンモジュールに適用する2つの要素プリセットがあります。また、これらの要素プリセットまたは設計変数のいずれかを編集して、将来それらに変更することもできます。

同じプロセスは、証言モジュール、ブロググリッド、または1つのサイトで2回以上再利用するものにも当てはまります。アイデアは、プリセット（OGまたは要素）を使用してトラブルを1回実行し、プリセットを後で再利用するときに利益を享受することです。

Diviでデザインする未来はこちらです

Divi 5の設計変数とプリセットの組み合わせは、単なる新機能ではなく、設計のスケーラビリティについてまったく新しい考え方です。設計変数から始めて、プリセットを介してそれらをカスケードすることにより、これまで以上に速く、美しく一貫したページを作成できます。そして、何かを変更する必要がある場合は、一度変更する必要があります。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトをDivi 5に変換することはまだお勧めしません。