フォントをDivi 5のフォントデザイン変数に置き換える方法

フォントの更新は頭痛になる可能性があります。タイトルフォントを変更すると、突然、表示されるすべての場所を追跡します。見出しを1つか2つ見逃すと、すぐにデザインが感じられます。フォントを手動で更新すると、矛盾が生じます。

DIVI 5は、フォント変数とプリセットでこれを解決します。すべてのインスタンスを追いかける代わりに、フォントを一度設定し、システムが残りを処理させることができます。タイポグラフィは、使用するモジュールの数に関係なく、清潔で統一されたままです。それがどれほどシンプルであるかを見てください。

静的フォントが問題を引き起こす理由

静的フォントのセットアップは、時間とともに悪化する合併症のウェブを作成します。各要素にフォントを直接追加すると、何百もの異なる場所にタイポグラフィの選択肢を散乱させます。

見出し用のPlayFairディスプレイを使用して、ボディテキスト用のポピンを使用してサイトを構築します。数か月後、よりモダンなフォントスタックに切り替えたいと思います。これで、すべてのモジュール、すべてのプリセット、すべてのカスタム設定を狩り、それらのフォントがどこに存在するかを見つけます。証言セクションに深く埋もれている1つの見を見逃すと、あなたのデザインは壊れているように見えることがあります。

フォントを1つずつ手動で更新すると、誤って異なるサイズまたはウェイトを使用できます。ほとんどの見出しを32pxに更新しますが、28pxに滞在するいくつかを逃します。かつてのコーディブなデザインは、今では不均衡に感じられます。

この散乱方法は、単純なフォントの変更を主要なプロジェクトに変えます。数分かかるべきものは、退屈な狩猟と更新の数時間にわたって伸びています。タイポグラフィを実際にデザインするよりも多くの時間を費やします。

代わりに使用するもの：Divi 5のデザイン変数とプリセット

設計変数は、設計設定を保存します。これをどこでも再利用できます。フォントを一度設定し、デザイン変数として保存してから、サイト全体で使用します。後で変数を変更し、それを使用してすべての要素を自動的に更新します。

DIVIには、数字、テキスト、画像、リンク、色、フォントの6つの変数タイプがあります。 2つのデフォルトのフォント変数を使用できます。1つは見出し用、もう1つはボディテキスト用です。 Variable Managerは、データベースアイコンの下の左側のサイドバーにあります。

これらの変数は、数字フィールド、フォントフィールド、間隔設定など、それらをサポートしないフィールドで機能します。サポートされているフィールドの横にある変数アイコンをクリックして、オプションを確認します。

オプショングループプリセットは何をしますか

オプショングループプリセット全体のモジュールではなく、タイポグラフィ、境界、間隔などの特定のスタイルグループを保存します。たとえば、フォントとサイズの見出しのためだけにプリセットを作成できます。

オプショングループプリセットを適用すると、そのスタイル領域のみが変更されます。残りのモジュールは同じままです。 1つの要素に異なるプリセットを問題なく組み合わせることができます。設計変数をオプショングループプリセットと混合して、柔軟性を高めます。変数を使用するプリセットを作成します。変数を更新すると、すべてのプリセットも更新します。

Divi5を使用して動的なフォントシステムを作成するためのステップバイステップガイド

フォント変数の設定には約20分かかります。それらが動作すると、フォントの変更がサイト全体で即座に発生します。そこに到達する方法は次のとおりです。

1.新しいシステムのフォント変数を作成します

左サイドバーのデータベースアイコンをクリックして、変数マネージャーを開きます。 [フォント]タブに移動します。 2つのデフォルト変数が表示されます。1つは見出し用、もう1つはボディテキスト用です。

• メインフォントを設定します：[見出し変数]をクリックします。フォントファミリと重量を選んでから保存します。ボディテキストについても同じことをしますが、清潔で読みやすいものを選択してください。
• 必要に応じてフォントを追加します。一部のデザインでは、引用符、声、または特別なテキストに追加のフォントが必要です。 [新しい変数を追加]をクリックすると、明確な名前を付けます。
• すべての詳細を入力します。各変数は、フォントファミリ、重量、スタイル、その他の設定を保持します。重視を追加したい場合は、見出しに大胆な重量、ボディテキストの通常のウェイト、イタリック体を使用してください。
• 名前をシンプルに保ちます：ラベルを混乱させる代わりに、「フォントを引用」または「ハイライトフォント」と呼んでください。
• 保存することを忘れないでください：保存ボタンを押すまで変更は貼り付けられません。

ほとんどのWebサイトは、見出しとボディフォントのみが必要です。小さなテキストの調整ではなく、特別な設計ニーズに追加の変数のみを追加します。変数が少ないと、新しいコンテンツの作成がはるかに簡単になります。

2.フォントサイズの数値変数を追加します

Variable Managerの[番号]タブに切り替えます。ここでは、フォントで動作するサイズ変数を作成します。これらをタイポグラフィスケールと考えてください。

あなたの見出しサイズから始めます。 H1、H2、H3などという名前の変数を作成します。デザインにとって理にかなっている別のサイズにそれぞれを設定します。他の画面に適応するサイズには、32pxのような通常のピクセル値またはClamp（）などのレスポンシブユニットを使用できます。

ボディテキストにはサイズ変数も必要です。 「ボディサイズ」のようなものと呼び、通常は16pxから18px約16pxから18pxの快適な読み取りサイズに設定します。

特別なテキストニーズの変数を作成することもできます。キャプションには「小さなテキスト」変数または証言の「大きなテキスト」変数が必要かもしれません。それらが後で何であるかを覚えているように、それらに明確に名前を付けてください。

これらの数値変数は、一貫したサイジングが必要な場所で動作します。ラインの高さ、間隔、またはサイト全体に複数回表示される測定にそれらを使用します。数値変数を更新すると、使用するものはすべて自動的に変更されます。

ほとんどのWebサイトは、見出しとボディフォントのみが必要です。小さなテキストの調整ではなく、特別な設計ニーズに追加の変数のみを追加します。変数が少ないと、新しいコンテンツの作成がはるかに簡単になります。

3.検索と交換を使用して、静的フォントを交換します

モジュール設定のフォントフィールドを右クリックして、検索および交換オプションを確認します。これにより、Diviが現在のフォント設定を自動的にロードするパネルが開きます。これで、その静的フォントを設計変数の1つと交換できます。

ソース要素フィールドは、始めたモジュールを示しています。これを変更して、ページ上の他の要素を出発点として選択できます。

検索値は、交換するフォントを表示します。別の静的フォントを選択する代わりに、フォント設計変数のいずれかに置き換え値を設定します。

フォントサイズの作品を見つけて交換します。フォントサイズフィールドを右クリックして、同じ交換パネルにアクセスします。これにより、数値変数を使用して24pxのような要素レベルのサイズを交換できます。

フォントサイズを手動で設定するテキストモジュールを探します。これらの散乱サイズ設定は、静的フォントと同じ問題を作成します。タイポグラフィスケールを調整したい場合は、各サイズを見つけるためにすべてのモジュールを狩ります。これらの静的サイズをH1、H2、ボディサイズ、またはその他の数値変数に置き換えます。

交換境界を設定します

変更が発生する場所を見つけて交換します。 「ページ全体」を選択して、レイアウト全体でフォントを更新します。 「現在の要素と子供」を選択して、その特定のセクションの変更とその内部にネストされたものを制限します。

親コンテナまたは特定のページエリアをターゲットにすることもできます。

要素タイプを見つけて交換すると、特定のモジュールに集中できます。完全なフォントスワップの「すべての要素」を選択するか、コンテナと構造要素をスキップする「モジュール」を選択します。特定のモジュールタイプのみをターゲットにすることで、さらに具体的に取得できます。

偶発的な交換は避けてください

「同一のフィールドのみ」オプションは、不要な変更を防ぎます。同じ値を共有する可能性のある他の設定に影響を与えることなく、フォントを交換する場合は、これをオンにします。

これにより、たまたま「10px」と呼ばれるフォントまたは似たようなものを交換している場合でも、境界半径は10pxに保たれます。

この設定がなければ、どこでもターゲット値を探して置き換えます。有効になると、システムは実際のフォントフィールドのみを変更し、他の設計設定だけを残します。

4。フォントシステムを介して作業します

さまざまなフォントの重みとスタイルの個別の検索と交換操作が必要です。あなたのサイトは、同じフォントファミリを通常の重量と大胆な重量で使用する場合があります。各バリエーションを個別に処理し、以前に作成した適切な設計変数に置き換えます。

毎回、プロセスは同じです。フォントフィールドを右クリックし、置換値を設計変数に設定し、スコープを選択し、変更を適用します。更新が必要な静的フォントごとにこれを繰り返します。

5.変数でプリセットを作成します

任意のテキストモジュールにアクセスし、[デザイン]タブに移動します。タイポグラフィを見つけて、プリセットアイコンをクリックします。ドロップダウンメニューから見出しフォント変数を選択します。サイジングにH1番号変数を適用します。

行の高さと間隔値を構成します。プリセットの「メイン見出し」に名前を付けて保存します。スターアイコンをクリックして、これをデフォルトとして設定します。新しいテキストモジュールは、これらの設定を自動的に採用します。同じ見出しタグとスタイルがないすべての既存のモジュールもこれらの設定を継承します。

見出しレベルごとにこのプロセスを繰り返すことができます。各プリセットは、さまざまな目的を果たしながら一貫性を維持します。

これらのタイポグラフィプリセットは、テキストフィールドを含む任意のモジュールで動作します。宣伝文句モジュール、アコーディオンコンテンツ、証言、および連絡先フォームはすべて、同じプリセットを受け入れます。このクロスモジュールの互換性は、繰り返しスタイリングタスクを排除します。

オプショングループプリセットは、特定のスタイルカテゴリのみをターゲットにします。ボタンの背景と境界設定をそのままに保ちながら、ボタンテキストに見出しプリセットを適用します。

6.すべての要素に新しい変数を拡張します

新しい変数を使用して要素を右クリックします。メニューから「属性を拡張」を選択します。最近更新されたモジュールとしてソース要素を構成します。

完全な更新のために、場所を「ページ全体」に設定します。属性タイプでは、「スタイル」を選択して、設計要素のみに焦点を当てます。

「同一のフィールドのみを交換する」を有効にして、パディング、マージン、またはフォントサイズに一致する可能性のあるその他の数値の不要な変更を防ぎます。 「すべての要素」を選択してモジュールとコンテナを更新するか、「モジュール」を選択して、コンテンツ要素を具体的にターゲットにします。

サイト全体の更新ではなく、小さなセクションで複雑なページを処理します。 「現在のセクション」を選択して、変更を一度に1つの領域に制限します。ヘッダーセクションから始めます。可変拡張機能を適用し、結果を確認し、メインコンテンツ領域に進みます。最後にフッターセクションを完成させます。

この系統的なアプローチは、競合のフォーマットを早期に識別し、更新プロセスを制御します。

Divi 5はタイポグラフィを簡単にします

以前は、PlayFairディスプレイからモダンなものに切り替えて、ほとんどの見出しを更新していましたが、3ページの証言を見逃しています。あなたのサイトは数週間偏っているように見えました。

Divi 5の変数は、ウェブサイトのタイポグラフィを合理化します。サイドバーのデータベースアイコンから見出し変数を変更し、すべてのテキストモジュールが即座に更新されます。その連絡先フォームフッターが含まれています。

次回ブランド変更するときは、50モジュールをクリックする代わりに2つの変数を更新します。見つけて交換するツールは、通常見逃しているものをキャッチします。あなたのタイポグラフィはしっかりと残り、あなたの週末はあなたのものであり続けます。