Divi5の異なる要素タイプに拡張する柔軟性

デザインの更新を作成すると、ボックスをチェックする気がしません。しかし、多くの場合、ボタンスタイルの変更やフォントの更新など、単純なものでさえ、各モジュールを手動で編集することを意味します。ゆっくり、反復的で、台無しにしやすいです。

Divi 5は、拡張属性を使用して、Divi 4のアップグレードバージョンである拡張スタイルを修正します。さまざまな要素やモジュールの種類にまたがる場合でも、変更を一度適用してどこにでも拡張できます。この投稿では、この柔軟性が時間を節約し、ワークフローをクリーンアップする方法について説明します。

Divi 5の拡張属性とは何ですか？

拡張属性を使用すると、各モジュールを手動で編集することなく、わずか数クリックして、スタイル、コンテンツ、またはプリセットを1つの要素から他の要素に拡張できます。

YouTubeチャンネルを購読してください

しかし、それはあなたの典型的なコピーアンドペーストワークフローではありません（あなたが興味があれば、私たちもそれを持っています）。属性を拡張する属性は、同一の要素だけでなく、異なる要素タイプとモジュールタイプにわたって動作します。たとえば、見出しを一度スタイリングして、その同じフォントをトグルタイトル、個人モジュール名、または宣伝文字の見出しに適用できます。テキストのような同じスタイルグループを共有している限り、彼らはそれに続きます。

そして、それはそこで止まりません。どこでも、ほぼ何でも拡張できます。背景色を1つのセクションからコピーし、ページのすべての行、セクション、列、またはモジュールに適用します。

または、さまざまなモジュールのボタンスタイルを再利用します。スタイルを行動の呼びかけから連絡先フォームに拡張できます。使用を開始すると、更新についての考え方を変更します。あなたはもはや同じことを何度も何度もして立ち往生することはありません。拡張属性を使用すると、一貫性を保ち、時間を節約し、レイアウトの変更をより速く、より多くのコントロールで移動します。

DIVI 5の拡張属性を使用します

拡張属性は使いやすく、十分な柔軟性を提供します。開始するには、すでにスタイルを整えた要素を右クリックしてください。これは、モジュール、列、行、またはセクション全体である場合があります。表示されるメニューから、属性を拡張することを選択します。

（フォントや間隔など、特定の設定グループを直接右クリックすることもできます。これにより、既に選択されている拡張属性パネルが開きます。

拡張属性パネルが開くと、何を拡張し、どこに適用するかを決定します。

いくつかの明確なオプションが表示されます。

• （1.）要素から拡張：スタイリングし、コピーしたいアイテム。
• （2.）場所への拡張：変更がどこまで進むべきかを選択します。現在のセクション、親の行、または全ページのみ。
• （3.）要素タイプに拡張します：テキストモジュールのみまたはすべてのモジュールのみなど、ターゲットする要素のタイプを選択します。
• （4.）拡張する属性タイプ：コピーするものを選択：デザイン、コンテンツ、プリセット、またはそれらのミックス。
• （5.）拡張するオプショングループ：テキスト、ボーダー、ボタンスタイルなどの特定の設定グループに焦点を当てます。
• （6.）拡張するための修正フィールド：変更したフィールドのみを適用するか、すべてを含めることができます。

これが簡単な例です。テキストモジュール内の見出しをスタイリングし、同じセクションの他の見出しに同じフォントを適用する必要があるとしましょう。場所を親セクションに、要素タイプをテキストに設定し、ボディオプショングループを選択します（ボディスタイルのみを転送するだけなので）。

適用されると、そのセクションのすべてのマッチングテキストモジュールは、同じフォントスタイリングで更新されます。

これが、拡張属性を特に便利にするものです。デザイン全体をコピーしているわけではありません。拡張したいもの、1つのグループまたは複数のプロパティのみを一度に選択できます。両方のコンテンツとデザインをまったく異なるモジュールに持ち込むこともできます。

しかし、設定が最初に多くのように感じられる場合は、それが完全に正常であることを理解してください。いくつかの組み合わせをテストして、スコープ、要素の種類、および設定グループがどのように連携するかを理解する必要があるかもしれません。クリックすると、DIVIワークフローで最も効率的なツールの1つになります。

次のセクションでは、実用的な例を進めて、すべてがどのようにまとめられるかを示します。各設定がどのように機能するかを理解したら、拡張属性は、同じ作業を繰り返すことなく、一貫した設計を構築するための強力なツールになります。

Divi 5の拡張属性に関するすべてを学びます

Divi 5の拡張属性がDivi 4の拡張スタイルをどのように表しているか

Divi 4を使用している場合、おそらく拡張スタイルに精通しているでしょう。設計設定をある要素から別の要素にコピーできますが、同じ要素タイプ内でのみです。これにより、迅速な修正に役立ちましたが、より複雑な更新のために制限されます。

Divi 5の拡張属性は、そのアイデアをさらに進めます。デザインをコピーするだけでなく、コンテンツとプリセットでも機能し、適用されるものと場所を完全に制御できます。他のものに影響を与えることなく、背景色や境界半径のみのように、拡張するために特定のプロパティを選択することもできます。

一致するモジュールタイプにロックされたり、レイアウト全体で同じ変更を繰り返すことはありません。拡張属性を使用すると、セクション全体であろうとページ全体にかかわらず、再利用するものとそれがどこまで進むべきかを正確に選択できます。ワークフローに適応し、スタイリングをより速く、より賢く、より一貫性にするために構築されています。

拡張属性はDivi 5で利用できます - 最新バージョンをダウンロードして今すぐ試してください。

あなたが拡張できるものの5つの実用的な例（そしてその方法）

これまでのところ、拡張属性ができることについて話しました。それでは、実際に使用する方法を見てみましょう。これらの例は、さまざまな設定の組み合わせを歩きます。時間を節約し、アップデートをより効率的に適用することができます。

1.さまざまな要素タイプにわたってスタイルを拡張します

拡張属性は固定階層にロックされません。セクションからモジュール、行または列に移動するかどうかにかかわらず、さまざまなレイアウトレベルにわたってスタイルを適用できます。

これにより、レイアウト全体に視覚的な接続を簡単に作成できます。証言モジュールは、それが所有するセクションと一致させることができます。行動モジュールの呼び出しは、上記の行からスタイルをピックアップできます。スタイルグループを共有する限り、同様の要素間でスタイルを拡張することに限定されません。デザインのニーズに応じて、広範囲から特定に移動するか、またはその逆になります。

セクションから列まで拡張します

レイアウトのエッジを柔らかくするために、セクションに微妙な境界半径を追加したとしましょう。そのセクション内には、背景画像のある列があり、視覚的な一貫性のために同じ丸い角をミラーリングする必要があります。

半径を手動で再塗布する代わりに、セクションを右クリックし、拡張属性を選択し、要素タイプを列に設定し、オプショングループから境界を選択します。

列は同じ境界半径を継承するため、背景画像またはネストされたレイアウトは視覚的なフローを壊しません。

セクションから列まで拡張します

別の例は、一貫した空白を維持するために、セクションから行またはその他のセクションにパディングを拡張することです。セクションを右クリックして、 [拡張属性]を選択し、要素タイプをrowに設定し、オプショングループから[間隔]を選択します。

すべての行が同じパディング値を継承し、ページに一貫した間隔を与えます。

セクションからモジュールへの拡張

セクションには、必要な背景、境界線、または間隔が既にあるとしましょう。これらのスタイルを他の場所で再現する代わりに、そのセクションの内側にネストされているか、そのセクションの外に置かれていても、他の要素に直接渡すことができます。

たとえば、セクションに証言で必要な背景がある場合は、拡張属性を使用するだけです。要素タイプとして証言を選択し、スコープをページ全体に設定し、背景属性が選択されていることを確認します。

適用されると、証言は手動編集を必要とせずにその背景を継承します。

Webデザインでは、背景の色、境界線、間隔などの一貫した視覚的な詳細がすべてを結び付けるのに役立ちます。拡張属性を使用すると、レイアウト全体にその一貫性を簡単に運ぶことができ、毎回ゼロから始めることなく、洗練されたブランドのエクスペリエンスを作成できます。

列から列まで延長されます

逆アプローチに従うこともできます。たとえば、列から行まで拡張することもできます。列を組み立てるために、きれいで固いラインを追加したとしましょう。列が必要な場合は、視覚的な一貫性のために同じ境界線スタイリングを運ぶことができます。これらのスタイルを即座に再利用できます。 Border Option Groupを親の列に拡張するだけです。

行は同じ境界設定をピックアップし、2つの間に明確な視覚的な接続を作成します。これは、一貫したアウトラインまたはセパレーターに依存する層状のセクションまたは箱入りレイアウトを構築する場合に特にうまく機能します。

これらはほんの数回の組み合わせであり、逆転することもできます。実際には、ほぼすべてのレイアウトレベルにスタイルを拡張できます。拡張属性は、列間隔の内部のモジュールの適用から、セクションシャドウを行またはボタンに運ぶまで、完全な柔軟性を提供します。あなたもできます：

• 列からボーダーラジウスをコピーして、モジュールに適用します
• 列を横切るモジュールから変換アニメーションを再利用します
• セクションからその内部のすべてのテキストモジュールにフォントアラインメントを拡張します
• 一貫したスタイリングのために、ある列から別の列に画像フィルターを適用します
• 2つの要素がスタイルグループとコンテキストを共有する場合、拡張属性はおそらくそれを処理できます。

目標は、すべての組み合わせを暗記することではなく、レイアウトに合ったものを実験して発見することです。 1回限りの編集の代わりに再利用可能なデザインの動きについて考え始めると、ワークフローは自然により速く、クリーンで、より一貫性があります。

2。さまざまなモジュールタイプにわたってスタイルを拡張します

拡張属性は、ボタンのような共有スタイルグループを認識するため、ほんの数ステップで異なるモジュールに同じスタイリングを適用できます。

たとえば、あなたが愛するボタンを設計し、連絡先フォームでそれを使用したいとしたいとしましょう。手動でレストする代わりに、元のボタンを右クリックし、属性を拡張し、ボタンオプショングループを選択し、フォームに連絡する要素タイプを設定します。次に、スコープをページ全体に設定します。

デザインは、手動の調整なしに、連絡先フォームの送信ボタンに即座に持ち越されます。

他のモジュールのプロセスも繰り返すことができます。同じボタンスタイルを電子メールOptinに拡張する場合は、要素タイプを変更するだけでOptinに電子メールを送信すると、ボタンが自動的に一致します。

この種のクロスモジュールスタイリングは、ボタンが多いレイアウトを使用するときに時間を節約できます。 Diviは共有グループの一部としてボタンを扱うため、一貫性を破ることなく、どこにでもスタイルを整えて再利用できます。

3.オプショングループプリセットを保存して拡張します

拡張属性もプリセットで動作し、レイアウト全体で保存されたスタイルを再利用できます。

たとえば、丸みを帯びた角、微妙な境界線、柔らかい影のあるコラムを設計したと想像してください。それをボーダープリセットとして保存して、後で再度使用します。

拡張ボーダープリセットオプションは、要素にプリセットが保存されている場合にのみ表示されます。

これで、そのプリセットを他の列に手動で適用する代わりに、1つのステップで拡張できます。元の列を右クリックして、拡張属性を選択し、パネルから境界プリセットを拡張することを選択します。

選択したら、要素の種類を列に設定し、スコープを親セクションまたはページ全体に設定します。プリセットスタイリングは、再びセットアップすることなく、すぐに他の列に引き継がれます。

これにより、特にカスタムボーダースタイル、影、またはプリセットの下でグループ化されたその他のデザインを使用する場合、レイアウトを一貫性に保つのが簡単になります。

4.スタイルを一度してから、変更したものだけを拡張します

レイアウトをゼロから構築するとき、すべての要素を個別にスタイリングすることは無限に感じることがあります。スタイルを拡張して、最初の影、次に境界線、間隔など、一度に1つのプロパティを拡張します。

そこで、すべての変更されたフィールドオプションが登場します。各設定を手動で選択する代わりに、1つの要素をスタイリングしてから、残りの変更のみを適用できます。

たとえば、ギャラリーの1つの画像に柔らかい境界線と明るい影を追加したとします。

他のすべての画像に同じ外観を適用するには、スタイルの画像を右クリックし、拡張属性を選択し、変更されたフィールドのすべての変更されたフィールドを選択して列を拡張します。

変更したプロパティのみが持ち越されます。他のすべては手つかずのままです。これにより、他の設定を上書きせずにデザインが一貫しています。これは、コントロールを失うことなくバルクスタイリングをスピードアップする最も簡単な方法の1つです。

5.単一のモジュール内でスタイルを拡張します

属性を拡張する属性は、モジュール間だけでなく、モジュール内でも機能します。たとえば、アコーディオンモジュールをご覧ください。 1つのアイテムをスタイリングしてから、それらの変更をさらに5回繰り返さなければならなかった場合、それがどれほど退屈であるかを知っています。

これで、最初のアイテムをスタイリングし、スタイルをさらに拡張するだけです。

デザインを適用したら、拡張属性パネルを開き、アコーディオンモジュールを選択し、適用する特定の変更フィールドを選択します。

確認すると、同じモジュール内の他のすべてのアイテムが自動的に更新されます。これは、スタイリングを一貫性に保ち、単一のアクションですべてのアイテムに変更を適用するための簡単な方法です。

拡張属性は、真のデザインの柔軟性のロックを解除します

Divi 5の拡張属性は、設計を変更するためのより速く、より集中的な方法を提供します。ボタンや見出しから境界、コンテンツ、さらにはネストされた要素まで、コピーされるものとそれがどこに行くかを完全に制御できます。

さまざまなモジュール、レイアウトセクション、設計レベルで動作し、すべてワークフローをスムーズで効率的に保ちます。しかし、自分で試してみると、それを信じることができます。したがって、今日Divi 5の拡張属性を試してみて、以下であなたの経験を私たちと共有してください！