Divi5の設計変数を知るために必要なすべて

設計変数は、最新のDivi 5アルファの最新の機能展開です。彼らは、DiviエコシステムにWebデザインに効率的なアプローチをもたらします。単なる時間を節約するツールではなく、色、フォント、サイズなどの再利用可能なデザイン要素を、ウェブサイト全体で即座に更新することができます。設計変数は、チームやクライアントの仕事にとって特に強力であり、技術的なノウハウなしで設計制御を一元化し、サイト全体の変更を簡素化します。

この投稿では、設計変数を理解するために必要なすべての情報、それらがどのように機能するか、およびDivi 5でそれらを適用する方法を提供します。単一ページを微調整するか、マルチページWebサイトを管理するかにかかわらず、設計変数は設計プロセスを合理化し、まとまりのあるデザインを迅速に達成するのに役立ちます。

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

Divi 5の設計変数とは何ですか？

簡単に述べたように、設計変数を使用すると、数回クリックするとウェブサイト全体に適用できる再利用可能でカスタマイズ可能なデザイン要素を定義できます。変数に単一の微調整を行うと、更新を即座に使用するすべてのインスタンスがあり、退屈な手動編集からあなたを救います。

DIVIの新しく組み込まれたCSSユニットとClamp（）、Calc（）などとデザイン変数を統合できます。これらのCSSユニットを使用すると、さまざまなデバイスや画面サイズに適応する動的で応答性の高いデザインを作成できます。設計変数は、これらの繰り返しの値を1つの場所で管理し、必要に応じてグローバルに更新するのに役立ちます。

Diviに精通している場合は、グローバルカラーシステムのエコーを認識する場合があります。デザイン変数は、その概念を取り上げて改善し、グローバルな色を設定してフォント、数字、画像、テキストを包含します。設計変数を使用すると、CSSユニットのパワーを組み合わせて、Clamp（）で動的フォントサイズを設定するか、Calc（）を使用して間隔を微調整できます。

Divi 5のプリセットベースの設計システムでは、設計変数が非常に役立ちます。それらは、ボタン、セクション、ヘッダーなどの要素に一貫したスタイルを適用するための合理化されたフレームワークを提供します。変数は、このシステム内のビルディングブロックとして機能し、設計の選択肢を便利に管理できます。ブランドの一貫性のために色を設定する場合、またはその場でタイポグラフィを調整する数値変数であろうと、変数はまとまりのあるサイトを構築できるようになります。

設計変数はどのように機能しますか？

DIVIの設計変数は、数値、色、テキスト、リンク、画像など、ウェブサイトのさまざまな側面に役立ちます。それぞれがあなたのウェブサイトの異なる側面を制御するように設計されています。設計変数の素晴らしいところは、それらがグローバルであることです。つまり、ウェブサイト全体ですべての繰り返し変数を管理および更新するためのより集中領域があることを意味します。

ウェブサイトに追加できるデザイン変数の種類を見てみましょう。

1。色変数

これらの再利用可能な色は、ヘックスコードやグラデーションなど、ブランディングを一貫性に保ちます。プライマリまたはセカンダリカラー、見出しやボディテキストの色などを割り当てることができます。

2。フォント変数

設計変数を使用すると、WordPressテーマカスタマイザーの制限を超えて移動できます。フォント変数を使用すると、タイポグラフィをグローバルに管理し、すべての見出しまたは段落が1つの更新と一致するようにします。見出しやボディテキストを超えて、証言、見積もり、またはフォントを割り当てる他のテキスト領域など、サイトの他の領域のフォント変数を作成できます。

3。番号変数

数値に変数を使用することは、パディング、マージン、境界などを指定するのに有益です。サイト全体の間隔を1か所から制御できます。数値を使用して、フォントサイズとボーダーラジウスを指定し、さまざまな画面サイズにわたって値を最適化するためにCalc（）やClamp（）などの高度なユニットと組み合わせることができます。

4。画像変数

画像変数は、ロゴ、背景パターン、ヒーローセクションの画像など、複数回使用する予定の画像を保存するのに適しています。他の設計変数と同様に、それらを一度指定し、サイト全体でどこにでも再利用します。

5。テキスト変数

テキスト変数を使用して、タグライン、電話番号、アドレスなどの編集可能なテキスト文字列を作成して、更新を管理しやすくすることができます。たとえば、営業時間や住所を1回追加することもできます。また、それらを使用するサイトのすべてのエリアは、即座に変更を反映します。

6。リンク変数

リンク変数は、サイト全体で再利用できるURLを保存します。ソーシャルメディアプラットフォームのリンク、アフィリエイトリンク、「見積もり」ボタンなど、頻繁に使用されるリンクを管理するのに最適です。リンクを変更する必要がある場合は、1回更新すると、すべてのインスタンスが自動的に更新され、壊れたリンクや手動修正がないようにします。

設計変数を使用することの利点

Divi 5の設計変数は、単なる新機能ではありません。DiviでWebサイトを構築するときに実際の利点をもたらします。単一の変数を更新し、サイト全体に広がる変更を即座に監視でき、効率を高めながら繰り返し編集の時間を節約できます。また、色、フォント、間隔、境界などを再利用できるようにすることで、統一された外観を維持し、デザインを上から下に一貫させるのに役立ちます。

calc（）やclamp（）などのCSS変数を使用すると、ほとんどの努力であらゆるデバイスで見栄えの良い応答性のある適応デザインを作成することができます。サイトのサイズに関係なく、変数により、設計の選択を簡単に監督し、まとまりがあり、洗練されたままでいる間、サイトが楽に成長するようにします。

DIVI 5の設計変数を使用した実用的な例

デザイン変数の基本をカバーしたので、Webサイト全体で作成した変数を統合する方法を見てみましょう。

例1：レスポンシブタイポグラフィ

Divi 5で設計変数を使用する最も効果的な方法の1つは、Clamp（）です。テキストサイズを定義します。 26px、5vw、90pxなどのH1タグの設計変数を設定できます。 Clamp（）関数は定義範囲内で値を設定し、レスポンシブタイポグラフィに非常に役立ちます。最小値、優先値、最大値の3つの引数が必要です。

この場合、最小値は26pxです。画面がどれほど小さくても、テキストがこのサイズ以下で縮小しないようにします。優先値は5VW（ビューポート幅）、つまり画面の幅の5％です。最後に、90pxは、ビューポートの大きさに関係なく、テキストがこれまでになる最大サイズを表します。

例2：一貫した境界

DIVI 5で設計変数を使用する別の効果的な方法は、設計要素全体の境界線を定義することです。行、列、画像、その他のデザイン要素が一貫した10pxの境界半径を持つようにしたいとしましょう。変数を使用してこれを簡単に定義できます。 10px値で数値変数を作成するだけです。 Divi 5の動的コンテンツアイコンを使用して、任意のモジュール、行、またはセクションに適用できます。

例3：ブランディングの一貫性

設計変数は、サイトに結束の感覚を生み出すことができ、ブランディングをしっかりと保つことができます。たとえば、プライマリとセカンダリの色のグローバルパレットを作成し、ブランドに合わせてフォントを設定してから、サイトのヘッダー、ボタン、段落、その他の要素に洗練された外観に割り当てることができます。

例4：コンテンツの更新

設計変数を使用する別の方法は、再利用可能なテキストの変数を作成することです。たとえば、月曜日から金曜日の午前9時から午後5時など、営業時間にテキスト変数を設定できます。そこから、フッターと連絡先ページに適用できます。営業時間が変更されたら、変数を1回更新するだけでいいです。

または、季節のヒーローの背景に画像変数を使用して、雪のようなシーンから春をテーマにした画像に交換できます。この画像をインテリアページヘッダーまたはアクションプレーモジュールで使用する場合は、イメージを1回変更する必要があります。

設計変数を始めます

設計変数を使用すると、Webサイトのほぼすべての部分にグローバルスタイルを作成できます。概念を説明するために、2つの数値変数を作成します。1つは境界半径用、もう1つはテキストサイズの見出し用で、それらを適用する方法を示します。

設計変数を始めるのは簡単です。 Visual Builderを有効にし、 Variable Managerアイコンをクリックします。

Variable Managerの設定を開くと、 [番号]タブをクリックして展開します。

[グローバル番号の追加]ボタンをクリックして、変数設定を表示します。

まず、任意のモジュール、列、行、またはセクションで使用できる境界の数値を設定します。高度なユニットドロップダウンメニューからPXを選択します。

ボーダー半径などの名前を割り当て、変数に15の値を割り当てます。

最後に、 [変数の保存]ボタンをクリックして変数を保存します。

DIVI 5に設計変数を適用します

変数が作成されたら、ウェブサイト全体でどこにでも適用できます。たとえば、ボタンモジュールを選択し、 [デザイン]タブに移動し、ボタンの境界設定を選択します。

ダイナミックコンテンツアイコンを表示するために、ボーダー半径設定の上部と右の境界半径フィールドの間にホバーします。

ダイアログボックスが表示され、ボーダー半径用に作成した設計変数が表示されます。それをクリックして、変数をボタンモジュールに適用します。

列の境界線など、サイトの他のコンテンツ領域に同じ境界半径の設計変数を適用できます。

応答性のあるタイポグラフィの変数を作成します

前述のように、Clamp（）関数を使用して、レスポンシブタイポグラフィの設計変数を作成できます。 [同じ番号]タブを使用して、H1見出しの新しいグローバル番号を作成します。ドロップダウンリストからクランプを選択し、タイトルとしてH1を追加し、値に26px、5vw、82pxを入力します。変更を保存します。

変数を適用するには、レイアウトの最初のH1見出しモジュールをクリックし、 [デザイン]タブにナビゲートし、見出しテキストH1テキストサイズフィールドを見つけます。

フィールドのわずかに上にホバーして、動的なコンテンツアイコンを表示します。ダイアログボックスが表示されたら、作成したH1変数を選択して適用します。

テキストは、変数で指定された新しいフォントサイズで更新されます。サイズを微調整する必要がある場合は、グローバル変数アイコンに戻り、変数を好みに応じて修正し、変更を適用してください。 H1 Design変数を適用したすべての見出しは自動的に更新され、サイト全体の変更が容易かつ高速になります。

設計変数を使用して設計の可能性を解除します

Divi 5の設計変数は、Webサイトの構築方法を改善し、効率、一貫性、および創造的な自由を1つの機能にブレンドする方法を改善します。レスポンシブなタイポグラフィ、インスタントアップデート、スケーラブルな設計システムでワークフローを合理化します。これにより、よりスマートなWebサイトを短時間で作成できます。 Diviユーザーであろうと初めて発見した場合でも、設計変数はプロジェクトを最小限の労力で新たな高みに引き上げることができます。

最新のDivi 5アルファをダウンロードして、可能なことを調べてください。設計変数を試して、それらがあなたの働き方をどのように変換するかを確認します。共有する考えはありますか？以下のコメントにドロップしてください！

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