レイアウトパックのスタイルをすぐに検索して交換する方法

フルレイアウトパックのデザインを更新すると、5つまたは6つの異なるページで同じスタイルを変更する必要があることに気付くまで、シンプルに聞こえます。これらのスタイルは静的値として適用されるため、フォントの変更やセクションパディングの調整などの小さな更新でさえ、ページごとに行われたときに時間がかかります。

しかし、数回のクリックでこれらすべての繰り返しスタイルを更新できたらどうでしょうか？それがまさにDivi 5で発見され、交換されることです。フォントの交換、色の交換、間隔の調整など、この機能はレイアウト全体の変更を即座に行うのに役立ちます。レイアウトパック全体をクリーンアップしてレストルするために使用する方法を紹介します。

Divi 5で見つけて交換するもの

Findと交換は、Divi 5の機能であり、レイアウト全体で繰り返しスタイルの値をすばやく更新できます。フォント、カラーコード、パディング、またはシャドウエフェクトでも、その値を1回変更して複数の要素に適用することができます。

それで、これは実際にどのように機能しますか？ビジュアルビルダーの任意のモジュールから始まります。テキストの色やフォントサイズなどのスタイルフィールドにホバリングすると、3ドットのアイコンが表示されます。それをクリックします（またはフィールドを右クリックします）。

これにより、置き換える価値、新しい値がどうあるべきか、および変更を適用する場所を定義するパネルが開きます。そのモジュールだけに焦点を合わせたり、セクション全体に展開したり、ページ全体でレイアウトを行いたりすることができます。

このワークフローを経験したら、なぜそれがこのような役立つツールであるかを理解できます。同じ色やフォントを変更して数十のモジュールを狩る代わりに、1つのターゲットを絞った更新を行い、レイアウト全体に数秒で波及するのを見ます。ただし、FindとSpelpleの可能性を本当に解除するには、すべてが変化するデザイン変数でどのように機能するかを確認する必要があります。

見つけて交換する方法は、レイアウトスタイルをより速く更新するのに役立ちます

2つのシナリオを説明します。まず、基本的な検索と交換操作、次に設計変数を使用して同じタスク（これが秘密兵器）を使用します。

Divi 5で検索と交換を使用します

プロセスは簡単です。任意のスタイルフィールドからトリガーし、交換するものを選択し、複数のモジュールに変更を適用します。本当の例でそれを歩きましょう。

すべてのページの見出しのフォントサイズを増やしたいとします。視覚ビルダー内の見出しモジュールをクリックすることから始めます。 [設定]> [設計]> [見出し]> [見出しテキストH1フォントサイズに移動します。右クリックまたはホバリングして、検索および交換オプションを見つけます。

これにより、検索と交換パネルが多くのオプションを備えています。

• （1）ソース要素：これは、テキストサイズ、色、パディングなど、ターゲットにしている設定を定義します。パネルを開いた場所に基づいて自動的に選択されます。
• （2）値を見つける：レイアウト全体で使用される現在の値。これは、30pxのようなフォントサイズ、＃000000のようなカラーコード、またはその他のデザイン設定です。これは自動的に追加されます。
• （3）値を交換：適用する新しい値。 Diviは一致する値を検索し、これに置き換えます。
• （4）場所で見つけて交換します：変更を適用する場所を選択します。単一のモジュール、そのセクション、またはページ全体に制限できます。
• （5）要素タイプで見つけて置き換えます：変化が影響するモジュールを決定します。すべてのモジュールまたはボタン、テキスト、ぼかしなどの特定のタイプのみに適用できます。
• （6）同一のフィールドのみを置き換える：これをオンにして、検索値に正確に一致するフィールドのみを更新します。これは、無関係な要素の偶発的な変更を回避するのに役立ちます。

たとえば、フォントサイズを30pxから液体クランプ（20px、4vw、50px）に置き換えます。ページ上のすべての見出しを更新するため、ページ全体とすべての要素を選択しました。

[検索と交換]ボタンをクリックして、何が起こるかを見てください。 30pxフォントサイズのすべての見出しには、Fluid Clamp（）値になりました。

他の見出しは、選択したスコープ内で正確に一致する値を更新するため、他の見出しは変わらなかった。手動編集は必要ありません。また、無関係な要素に偶発的な変更さえありません。この精度により、レイアウトパックのデフォルトスタイルのクリーンアップに最適です。

Diviの発見と交換に関するすべてを学びます

検索と交換で設計変数を使用します

設計変数と組み合わせると、検索と交換がさらに強力になります。静的値を別の静的値に置き換える代わりに、変数マネージャーから保存された変数に置き換えることができます。これにより、後で簡単に更新できる一貫した設計システムが構築されます。

同じ例を続けて、すべての見出しフォントサイズを更新しましょう。しかし、今回は、30pxを直接クランプ値に置き換える代わりに、 H3フォントサイズという名前の変数に置き換えます。

まず、変数を作成します。左サイドバーから変数マネージャーを開き、番号列に移動します。変数に名前を付けて、値を割り当てて保存します。

これにより、すべてのフォントサイズフィールドで変数が使用可能になります。魔法が来ました。検索パネルで直接使用して、保存された変数をすべての見出しフォントサイズに一度に割り当てることができます。

以前のように検索と交換パネルを開きます。交換値フィールドで、入力の上にホバリングし、変数マネージャーアイコンをクリックします。保存された変数、H3フォントサイズを選択し、同じ設定を続行します。

[検索]をクリックして交換して、変更を適用します。 30pxを使用するすべての見出しは、固定番号の代わりにH3フォントサイズ変数を参照します。

これが面白くなるところです。後でこのフォントサイズを調整する必要がありますか？変数マネージャーに移動し、H3フォントサイズ変数を開き、値を変更します。クランプをクランプに更新し（24px、5vw、60px）、この変数更新を自動的に使用してすべての見出しを使用します。

見つけて交換する必要はありません。 1つのアップデートを使用すると、レイアウトが変数が使用される至る所に調整されます。

この検索とデザインの変数の組み合わせにより、レイアウトパック全体が非常に効率的に更新されるようになり、このチュートリアルでこのプロセスに従います。設計変数を一度定義し、検索と交換を使用して、すべてのページの静的値から保存された変数に切り替えます。その後、更新は楽になります。

Diviの設計変数に関するすべてを学びます

これを実践する準備はできましたか？ Vise 5を使用し、交換および設計の両方の変数を使用するには、Divi 5が必要です。ビルダーは、パフォーマンスとよりスマートなワークフローのために完全に再構築されました。

レイアウトパック全体でスタイルを置き換える方法

見つけた方法と交換方法、およびそれを設計変数と組み合わせる方法がわかったので、実際のレイアウトパックでそれを実行してみましょう。この例では、学習管理システムをインポートします。これには、自宅、連絡先、コース着陸、価格などの複数のページが含まれます。

各ページは、同じフォント、色、間隔を使用しますが、すべて静的値として使用されます。以下のチュートリアルでは、これらをすべてのページで更新し、変数に変え、すべてを中央の設計システムに接続します。

1。レイアウトのデザインスタイルを監査します

何かの交換を開始する前に、数分かけてレイアウトパックを確認してください。各ページを開き、フォントサイズ、ボタンの色、テキスト間隔、セクションパディング、ボーダースタイルなど、繰り返されるすべてのデザインスタイルをすばやくリストします。 LMSレイアウトをレビューした後に見つけたものは次のとおりです。

• フォントサイズ： 30pxはすべてのH3見出しに使用され、複数のページでH2Sに48pxが使用されます
• フォント：ポピンはすべての見出しに一貫して使用されます
• プライマリボタン：背景色は白いテキストの＃4449E0です
• パディング：ほとんどのセクションでは、60pxの上部と下部を使用しています
• ぼやけたアイコン：アイコンサイズは24pxに設定されています
• 宣伝文句の境界線：宣伝文句モジュールには境界線が適用されていません
• セクションの背景：緑色の色＃47be68は、ほぼすべてのページのフッターセクションに表示されます

これらはすべて、各モジュール内に静的値として手動で入力されます。たとえば、Blurbモジュールは、アイコンの色と24pxの幅に＃4449E0を使用します。

このような繰り返しのスタイルを特定すると、設計変数に変換するものが正確にわかります。

この監査ステップは、続くすべての基盤を作成します。これにより、レイアウトを一貫性と保守可能に保つ体系的なアプローチを構築するのに役立ちます。

2。設計変数を保存します

レイアウトを監査し、繰り返しスタイルに注目したら、次のステップは、お好みの値のデザイン変数を作成することです。これにより、ハードコーディングされたスタイルを再利用可能なトークンに変えることができ、レイアウトが後で更新しやすくなります。すべての価値を保存した後、現在の値を私たちの価値に置き換えます。

カラー変数を作成します

以前の例では、宣伝文句のアイコンは色＃4449E0を使用していることがわかりましたが、それをプライマリブランドの色＃6C012Aに切り替えたいと思います。そうするために、色変数を作成します。

左側のサイドバーから変数マネージャーに移動し、色列を開きます。

下にスクロールして、グローバルカラーオプションの追加をクリックします。変数に名前を付けて値を入力します。 [変数を保存]をクリックすると、完了します。

数値変数を作成します

次に、ぼかしの周りに2pxの境界線を追加したいので、数値変数が必要です。このプロセスは似ていますが、別の列にあります。番号列に移動します。 [グローバル番号]をクリックし、変数に名前を付けて値を割り当てて、保存します。

フォント変数を作成します

また、すべての見出しフォントを私のブランドフォントであるAskharに変更したいと思います。これには、フォント変数が必要です。フォント列に移動し、新しい変数を作成し、名前を割り当て、フォントを選択して保存します。

それは完了です。このフォントは、レイアウト全体のすべての見出しテキストフィールドで選択可能になります。

セクションパディング、その他の見出しサイズ、追加のブランドカラーなど、残りの監査結果について同じプロセスに従ってください。レイアウトから繰り返される各スタイルは、変数になります（そしてすべきです）。

そうすれば、ヘックスコード、フォント名、または特定の値を覚えておく必要はありません。彼らはあなたの変数マネージャーに住んでいて、モジュールとページを越えてあなたをフォローしてください。そして何よりも、検索と交換を使用してレイアウト全体に適用できます。

3.検索と交換を使用して、変数を適用します

これが私たちが待っていた最も興味深い部分です。変数が保存されると、このレイアウト全体のスタイルを変更するのは迅速かつ簡単です。方法を見てみましょう。

アイコンの色を変更します

まず、アイコンの色を保存したプライマリブランドの色変数に変更しましょう。 Blurbの設定> Design> Image＆Iconに移動します。次に、アイコンカラーオプションの上にホバリングし、3つのドットをクリックします。検索と交換を選択します。

検索と交換パネルでは、変数マネージャーアイコンを見つけて変数を選択するためにホバリングするだけです。

そしてそのように、すべてのアイコンには新しい色があります。また、デザイン変数を保存するのではなく、静的値としてブランドの色を割り当てることで、逆の方法でそれを行うこともできましたが、将来の更新を簡素化するための追加のステップを追加しました。

どうやって？すべてのレイアウトページを変更しましたが、ブランドの色を切り替えたいと思います。すべてのページを再訪したり、モジュールごとにモジュールを実行したりすることに圧倒される必要はありません。すでにブランドカラーデザイン変数を保存しているため、サイト全体で値を更新するために値を変更するだけです。

すべての見出しフォントを変更します

次に、すべての見出しフォントを私のブランドフォントに切り替えましょう。見出しの設定>デザイン>タイトルテキストにアクセスします。タイトルフォントの上にホバリングし、検索と交換を開きます。交換値列で、ブランド見出しフォント変数を割り当てます。

すべての宣伝文字モジュールの境界幅を更新します

Border Widthの更新には、 Blurb Module変数を使用します。プロセスは一貫しています。吸血鬼の境界設定に移動し、検索と交換を開き、変数を選択し、適用します。

すべての静的値を設計変数に切り替えた後、レイアウトスタイルを直接変数にリンクすることができます。これは、ブランドの色を変更したり、見出しのタイポグラフィを調整したり、境界線の幅を調整したりする場合、代替品をやり直す必要がないことを意味します。変数を更新するだけで、すべてのリンクされた要素が即座に調整されます。

ボーナスステップ：プリセットを作成および保存する（オプション）

検索と置換および設計の変数は、強固な基盤を提供しますが、このシステムにさらに構築するオプションのステップがあります。プリセットで完全なスタイルをパッケージ化し、1回のクリックでどこにでも再利用できます。

ベース変数に満足したら、1つのステップを1つ深くして、より粒状スタイリングのためにプリセットを作成できます。これは、私たちが歩いたばかりのコアプロセスには必要ありませんが、最大の効率が必要な場合は探索する価値があります。

すべてのぼかしにシャドウエフェクトを追加するのが好きだとしましょう。したがって、宣伝型モジュールに最適なシャドウスタイルを設計しました。毎回このスタイルを手動でコピーする代わりに、プリセットとして保存できます。

終わり。このプリセットは、すべてのモジュールのプリセットドロップダウンに表示されます。他のモジュールに即座に適用できます。間隔、境界、影、またはその他のデザインの調整をやり直す必要はありません。

プリセットをさらに強力にするのは、柔軟性です。ワークフローの最適化と粒状制御を改善するために、さまざまな設定組み合わせのプリセットグループを作成できます。たとえば、プライマリライト、プライマリ、プライマリライトのアウトラインなどのバリエーションを備えたボタンスタイル用のプリセットグループが1つあり、それぞれが背景、境界線、間隔の異なる組み合わせを含みます。

このようにして、さまざまなコンテキストのオプションを持っている間、一貫性を維持します。プリセットは、レイアウトに同じスタイルを使用して10以上のモジュールがある場合に特に役立ちます。メモリや手動編集に依存する代わりに、すべてを事前に標準化します。

Diviのオプショングループプリセットに関するすべてを学びます

保存されたすべての設計変数を適用した後、前後のバージョンがどのように見えるかを次に示します。

4.同じプロセスを他のページに適用します

設計変数とプリセットがセットアップされると、レイアウトパックの残りの部分の更新がはるかに高速になります。

たとえば、コースのランディングページをご覧ください。ここで使用されているのと同じ静的値が表示され、フォント、ボタンの色、鈍い境界線、アイコンの色などが見られます。繰り返しますが、各設定を手動で微調整する代わりに、関連するモジュールを開き、検索と交換をトリガーし、一致するデザイン変数を割り当てます。

すべてのページで繰り返しスタイルごとにこのプロセスを繰り返します。完了すると、レイアウトパック全体が変数とプリセットに接続され、将来の編集がほぼ楽になります。

Diviの検索とデザイン変数を使用した更新されたコースランディングページ

検索と交換で数秒でレイアウト全体の編集を行います

DIVI 5で設計変数と学習の検索と交換のセットアップには、前払い時間がかかる場合があります。ただし、1つのレイアウトパックでそれを実行したら、数十のモジュールを手動でクリックすることに戻りたくありません。

レイアウトパック全体を散在した静的値から接続された設計システムに変換しました。検索と交換で数分かかったのは、モジュールごと、ページごとに古い方法で何時間もかかったでしょう。

これは、このプロジェクトの時間を節約することだけではありません。将来のすべてのDIVIプロジェクトをより速く、より一貫性にする設計システムを構築しています。