静的スタイルをDivi 5の設計変数に置き換える方法

色、パディング、または1つのモジュールを一度に微調整したことがある場合は、おそらく、ゆっくり、エラーが発生し、退屈なマニュアルスタイルの変更が可能であることに気付くでしょう。

Divi 5は、それを処理するより賢い方法を紹介します。設計変数を使用して見つけて交換すると、レイアウト全体で静的スタイルを更新し、数分で再利用可能な設計システムを構築できます。方法を見てみましょう。

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

「静的スタイル」とは何ですか？

Diviレイアウトをインポートする場合、または事前に設計されたセクションを使用すると、フォント、色、間隔、境界などのすべてがすでに設定されています。レイアウトがプリセットを使用していない場合、これらの値が要素レベルで適用されることに気付くでしょう。

見出しでは、フォントサイズが手動で入力され、ボタンは特定の色コードを使用する場合があり、パディングまたは間隔が固定番号を使用する場合があります。これらの直接適用値は、静的スタイルと呼ばれます。

そして、彼らは最初は無害に見えますが、あなたが変更をしたいとき、彼らはすぐに問題になる可能性があります。静的スタイルの問題は、管理に時間がかかることです。すべてのボタンの色を変更するか、セクション全体で間隔を調整する場合は、それぞれを手動で編集する必要があります。それはゆっくりとイライラします。

ここで、完全なWebサイトブランドを手動で更新するか、繰り返しスタイルでいっぱいの複雑なレイアウトに取り組んでいると想像してください。多くのデザイナーは、このプロセスがどれほどイライラするかを共有しています。しかし、何年もの間、それを修正する信頼できる方法はありませんでした。そのため、Divi 5でよりスマートなソリューションを構築しました。

Divi 5が静的スタイルの交換を簡単にする方法

Divi 5での目標の1つは、デザインワークフローをより速く、繰り返し低下させることです。それを支援するために、2つの強力な機能を追加しました。デザイン変数を追加します。これにより、スタイルを集中させ、レイアウト全体で即座に更新できるようになります。それらを詳細に理解しましょう。

デザイン変数を使用すると、グローバルスタイルを定義できます

Divi 5を使用すると、最終的に独自のデザインフレームワークを視覚的に構築し、それを使用してブランドスタイルをすばやく変更できます。

すべてのモジュールに同じ色、フォント、または間隔を手動で適用する代わりに、Divi 5を使用すると、これらの値を設計変数として保存できます。これらは、サイト全体で参照できる再利用可能な値であり、デザインをより一貫性があり、維持しやすくします。

Visual Builderの内部では、変数マネージャーを使用すると、6つの異なるタイプの変数を作成および整理できます。色、フォント、数字（間隔やサイズなど）、テキスト、画像、リンクを使用できます。

セクションパディングのような明確な名前で各変数を保存できます。そのため、それを見つけて再利用する方が簡単です。 CSS変数を手動で書くのとは異なり、Diviのインターフェイスを使用すると、コードに触れることなくこれらの値を視覚的に管理できます。

これらの保存された変数を適用することも簡単です。モジュールをカスタマイズしている間、設定に移動し、変数マネージャーアイコンを見つけて、リストから変数を選択します。

変更を加える時が来たときに本当の利点がわかります。パディングをどこにでも変更したいとしましょう。数十のモジュールを編集する代わりに、変数マネージャーで値を1回更新するだけで、サイト全体で更新されます。

適用された設定フィールドでリアルタイムで変化する値に注目してください。それがグローバルな設計システムの力です。

また、これもデザインスタイルに限定されません。繰り返しのコンテンツを効果的に管理するために、住所、電子メール、または会社のキャッチフレーズなど、テキスト、画像、リンクをコンテンツ変数として保存することもできます。もうコピーパスティをする必要はありません。動的なコンテンツのように挿入するだけで、サイト全体で一貫性を保ちます。

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

検索して交換すると、静的なスタイルからグローバルスタイルに切り替えることができます

Divi 5の検索および交換機能を使用すると、各モジュールを個別に編集せずに、レイアウト全体でスタイルの値をすばやく更新できます。色、フォント、間隔、または数回のクリックで単一の出発点からセクション全体で繰り返されるその他の設定などの静的値を変更するのに役立つように設計されています。

それを使用するには、ビジュアルビルダー内の任意のスタイルフィールドを右クリックするか、3つのドットをクリックします。ドロップダウンに検索と交換オプションが表示されます。

これにより、新しい発見と交換パネルが開きます。ここでは、目的の変更を加えて、それらを大量に適用できます。

• （1.）ソース要素：ターゲットにしている設定（テキスト、色、間隔など）。ドロップダウンを開くと、実際にレイヤー階層であることがわかります。
• （2.）値を見つける：特定のフォントまたはカラーコードなど、交換する正確な値。
• （3.）交換値：代わりに適用する新しい値または変数。
• （4.）場所で検索して交換：変更を適用する場所を選択します。このモジュール、セクション、またはページ全体。
• （5.）要素タイプで検索して交換：すべての要素または特定のモジュールタイプのみに変更が適用されるかどうかを決定します。
• （6.）同一のフィールドのみを置き換える：有効にすると、設定と値の両方が正確に一致する場合にのみ、交換が行われます。

これがどのように機能しますか。ページ全体で使用される見出しフォントを変更したいとしましょう。モジュールごとにモジュールを移動する代わりに、検索および交換パネルを使用します。

見出しの設定から開くと、ソース要素が自動選択されるため、常に手動で選択する必要はありません。

（さまざまな要素をクリックすると、パネルオプションが自動的に調整されます。）

検索値で、交換する値を入力します。この例では、それは現在の適用フォントであるMedula Oneです。交換値で、適用する新しい値を選択します。 Aclonicaを選択しましょう。

次に、ページ全体のすべてのインスタンスを更新するか、場所の検索と交換の列、行、またはセクションのみを更新するかを選択します。すべての見出しモジュールをターゲットにしたいので、すべての要素として検索と交換をすべての要素に保ちます。

そしてそれだけです。見つけて交換するだけで、数秒で20の見出しインスタンスが更新されます。ボディテキストとボタンフォントが触れられないままになっていることに注意してください。それは、彼らが異なる値を使用しているためです。そして、それがシステムがどれほど正確であるかです。

Diviは、正確な一致が見つかった場合に変更のみを適用します。これは、変化を必要としないデザインを台無しにすることなく、自信を持って静的スタイルをクリーンアップできることを意味します。しかし、ここで設計変数はどのように適合しますか？

彼らはケーキの上のアイシングのようなものです。交換値フィールドに設計変数を使用することもできます。その上にホバリングし、Variable Managerアイコンをクリックし、保存された変数を挿入します。

これにより、スタイルをグローバルに再利用可能なシステムにリンクし、更新がはるかに簡単で効率的です。これは、すべての静的値を設計変数に置き換えて、将来のウェブサイトに置き換える方法です。

検索と交換に関するすべてを学びます

これらの機能（およびさらに多く）はDivi 5内で利用できます。ビルダーは、より速いパフォーマンス、よりスマートなワークフロー、およびより多くの制御を提供するために再考されました。正直なところ、それらについて読むことはエキサイティングですが、これらの機能を自分で体験するときに本当の変化に気付くでしょう。

静的スタイルを保存された変数に置き換える方法

どのツールを使用するかがわかったので、今度はそれらが動作しているのを見る時が来ました。

このプロセスを説明するために、例として、Pie Shopランディングページのレイアウトをインポートしました。フォント、色、間隔などのこのレイアウトのデザインの詳細は、静的スタイルとして適用されました。従来の方法では、モジュールごとにモジュールをカスタマイズする必要があります。しかし、このチュートリアルでは、カバーしたばかりのワークフローを使用して、段階的に置き換えます。

ただし、飛び込む前に、レイアウトをスキャンしてパターンをスキャンしてください。ボタン全体で使用される同じ色、見出しの同様のフォントサイズ、セクション間の一貫した間隔、または同一の境界設定など、繰り返されるスタイルを探してください。これらの繰り返しの値は、特に後で変更する可能性が高い場合、設計変数の最良の候補者です。

1.設計変数を保存します

パイショップのレイアウトを分析した後、ページ全体に一貫して表示されるいくつかの値を特定し、好みのスタイルでそれらを更新したいと思います。これらには以下が含まれます：

• 行の境界幅
• ボタンパディング
• 見出しテキスト
• ボディテキスト
• ボディテキストの色

現在、それらは静的スタイルとして適用されています。したがって、同じ設定を手動で繰り返す代わりに、設計変数に変換します。これにより、数回クリックしてページスタイルを更新するためのシンプルで再利用可能なフレームワークが提供されます。

行の境界幅から始めましょう。変数を作成および保存するには、変数マネージャーを開き、タイプを選択します。行の境界幅については、番号変数を選択します。次に、変数に名前を付けて値を割り当てます。 [変数の保存]をクリックします。

保存すると、この変数はクリックして再利用できます。境界線の幅を設定できる場所に表示されます。見出しのテキスト、ボディフォント、テキストの色、ボタンパディングについて同じプロセスに従います。これらの保存された変数は、私のレイアウトのデザイン言語の基礎を形成するようになりました。あなたも同じことをします。

このようにして、ボタン間隔を微調整するか、後でフォントを変更することにした場合、すべてのモジュールを1つずつ更新する必要はありません。変数を更新するだけで、残りは自分自身を更新します。

2。検索と交換を使用して、静的スタイルを変数に切り替えます

設計変数を準備すると、次のステップは、検索と置換を使用してレイアウト全体で静的値を置き換えることです。ボタンのパディングから始めましょう。

現在、各ボタンは手動で入力されたパディングを使用します：上部と下部は6px、左右に1pxです。一貫性をもたらし、更新を簡単にするために、2つの変数を作成しました。

• Button-T =上部および下部のパディング用の12px。
• 左右のパディング用のボタンl = 32px。

これらを適用するには、任意のボタンの設定を開き、デザイン>間隔>パディングに移動し、パディング値を右クリックして、オプションから検索と交換を選択します。

検索および交換パネルでは、既存の静的値を変数マネージャーから保存された変数に置き換えます。

[検索と交換]をクリックした後、ページの5つのボタンインスタンスすべてが即座に更新され、新しいパディング値を使用します。

以前に特定した他の静的スタイルについて、同じ手順に従うことができます。検索と交換を使用して、それぞれが保存された変数と交換すると、グローバルな設計システムに完全に接続されているレイアウトになります。

3。好みのスタイルをプリセットに変換します（オプション）

このステップは、この記事の範囲でオプションですが、設計システムを拡張する強力な方法です。

静的スタイルを変数に置き換えたら、これらのモジュールをオプショングループプリセットとして保存できます。たとえば、境界幅の保存された変数を列に割り当てた後、その行を行の境界プリセットとして保存しました。

プリセット内の変数を使用すると、変数の値の変更など、設計システムへの将来の更新は、そのプリセットを使用してすべてのモジュールで自動的に反映されます。手動で何かを再申請または更新する必要はありません。

したがって、数回クリックして新しいブランディングでページ全体を更新しただけでなく、将来の更新をより速く、より簡単で、完全に接続する柔軟なシステムも作成しました。それは実際のレイアウトでどのように機能しますか？動作しているのを見る時間。

ページスタイルの更新はこれまで以上に簡単です

静的スタイルからデザイン変数に切り替える理由は簡単です。更新を簡単にします。設計変数が整っていると、レイアウトの編集は非常に簡単になります。

ウェブサイト全体で見出しフォントを変更したい場合は、各モジュールを1つずつ編集する必要はありません。変数マネージャーを開き、以前に保存したフォント値を更新するだけで、変数が使用されるすべての場所に変更が適用されます。

オプショングループプリセットは、設計変数を使用している場合にも自動的に更新されます。これにより、スタイルが接続されたままになるため、異なるモジュールやページで同じ編集を繰り返す必要はありません。

先にパイショップのレイアウトをカスタマイズしたとき、各ボタンや見出しを手動で調整しませんでした。保存した変数を編集しました。以前に定義したフォント、パディング、および色がページ全体に自動的に適用されました。レイアウトは、私がすでに構築したシステムに従いました。

確かに、パディングを微調整したり、1つのモジュールで色を変更したりすることは難しくありません。しかし、サイト全体で多数のスタイルを更新している場合、違いは非常に大きくなります。それは速くだけでなく、よりクリーンで、より信頼性が高く、エラーが発生しやすくなります。

これは、変数への切り替えの真の価値です。デザイン全体が管理しやすくなります。そして、クライアントが来月の迅速なブランディングの変更を求めたとき？彼らがコーヒーを終える前にあなたは完了します。

検索と交換でバルク編集を簡単にします

デザインが変更されるたびにゼロから始める必要はありません。 Divi 5のシステムが配置されているため、更新は雑用のように感じられず、単純な前進のように感じられます。

このワークフローは、セットアップ中に役立つだけではありません。それが将来の更新を簡単にするものです。クライアントが新しいフォントを要求する場合でも、別のブランドの色をテストしたい場合でも、変更を1回作成して、どこにでも反映されているのを見ることができます。

Divi 5は、Real PeopleがWebサイトを設計する方法をサポートするように設計されています。そして今、あなたの設計システムはあなたのアイデアと同じくらい柔軟になる可能性があります。