Divi 5の属性管理について知る必要があるすべて

Divi 5は、Webサイトを構築するための合理化されたアプローチを紹介します。フォントから色まで、すべてのデザインの調整は、サイト全体に楽に流れ、繰り返しの仕事の時間を節約します。 Divi 5の属性管理機能を使用すると、Webサイトをより速く、柔軟性を高めることで、Divi 5 Alphaフェーズの実用的な新機能の展開にすることができます。

この投稿では、Divi 5の属性管理について知る必要があるすべてのものに飛び込みます。それが何であるか、デザイナーにとって非常に役立つもの、それを使用してまとまりのあるプロフェッショナルウェブサイトをより速く、より効率的に構築する方法を説明します。

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

飛び込みましょう。

Divi 5の属性管理とは何ですか？

Divi 5の属性管理は、WebデザイナーがWebサイト全体でスタイル、プリセット、コンテンツを管理および適用する方法を改善できる機能です。ボタンのタイポグラフィスタイルを変更するか、CTAモジュール全体のスタイル全体を複製するか、セクションの外観をデフォルトにリセットするかどうかにかかわらず、属性管理により、プロセスがこれまで以上に簡単に、高速で、より直感的になります。

この機能は視覚ビルダーに統合されており、メニューと設定パネルを右クリックすることでアクセスできます。このアプローチは、Diviのプリセットベースの設計アプローチの基礎です。

属性管理の重要なコンポーネント

属性管理は、2つの重要な柱の上に構築されています：粒状制御とプリセット統合。

属性に対する粒状制御

設計者は、CTAモジュール全体、オプショングループプリセット（タイポグラフィまたはボーダースタイル）、タブ（デザイン、コンテンツ、または高度）、または個々のフィールド（ボタンの背景色など）などの要素など、複数のレベルで属性を管理できます。この柔軟性により、幅広い正確な調整が可能になります。たとえば、モジュールのすべての属性をコピーするか、そのボーダースタイルのみを別の要素に選択的に貼り付けて、不要な変更なしに必要なものを正確に適用することができます。

オプショングループおよび要素プリセットとの統合

属性管理は、Divi 5のプリセットシステムと連携して動作します。オプショングループプリセットは、バックグラウンド、ボーダー、パディングスタイルなどの再利用可能なスタイルセットであり、サイト全体の一貫性のために複数のモジュールに適用できます。

一方、要素プリセットは、宣誓、CTA、アコーディオン、スライダーなどの設計モジュールで動作するスタイルの設計パッケージです。属性管理を使用すると、これらのプリセットまたはその属性をコピーして貼り付けることができ、複雑なデザインを簡単に複製したり、Webサイト全体で特定のスタイルを更新したりできます。

属性管理が重要な理由

属性管理により、デザイナーと開発者は、DIVIにより効率的にWebサイトをより高速かつ効率的に構築することができます。シングルクリックでプリセットまたはコピー属性を適用すると、迅速なプロトタイピングと大規模なスタイルの変更を維持しながら、大規模なスタイルの変更が可能になります。 Divi 5のプリセット駆動型フレームワークのバックボーンとして、美しく、まとまりのあるWebサイトを簡単に作成することに集中することができます。

Divi 5のプリセットの理解

プリセットは、Divi 5の効率的なデザインワークフローの基礎であり、一貫したスケーラブルなWebサイトを簡単に可能にします。それらが属性管理を強化する方法を探りましょう。

属性管理を備えた機能の向上

プリセットをコピーアンドペーストワークフローに統合することにより、Divi 5を使用すると、デザイナーは以下を可能にします。

デザインを効率的に複製します

要素プリセットを使用すると、ユーザーは完全なモジュール設計（完全にスタイルのCTAモジュールなど）をコピーし、他の場所に貼り付け、単一のアクションで同じスタイリングとコンテンツを確保できます。要素プリセットを貼り付けると、CTAの背景、タイポグラフィ、およびボタンスタイルを別のモジュールに即座に適用できます。

ターゲットスタイルを適用します

オプショングループプリセットなど、より多くのターゲットスタイルをコピーして貼り付けることができます。特異なデザイン要素をコピーして貼り付ける機能により、粒状制御が可能になり、デザイナーが境界、影、見出しのデザイン設定などの複数の要素に特定のスタイル属性をコピーして貼り付けることができます。これにより、コンテンツやレイアウトなどの無関係な属性を上書きすることなく、サイト全体の一貫性が保証されます。

プリセットは、手動スタイリングを削減し、ウェブサイト全体で凝集デザインを維持することにより、属性管理を合理化します。それらは、個々の要素とグローバルな設計システムを橋渡しし、迅速な更新と一貫したスタイリングを可能にします。

実用的な例

CTAモジュールで一貫したボタンスタイリングを備えたマルチページWebサイトを設計するシナリオを考えてみましょう。プリセットと属性管理がどのように連携するかは次のとおりです。

まず、ブランディングボタンという名前のオプショングループプリセットを定義します。属性管理を使用して、このプリセットをCTAのボタンからコピーして、About USセクション、ヒーロー、またはページのその他のボタンのボタンに貼り付けることができます。これにより、すべてのボタンがウェブサイト全体で同じルックアンドフィールを共有し、プリセット設定がそのままであることが保証されます。

属性管理の仕組み

Divi 5の属性管理システムは、モジュール、列、行、およびセクション全体で属性をコピー、貼り付け、リセットするツールを使用して、スタイリングと設計要素の管理を簡素化します。

属性をコピーします

プロセスは簡単です。モジュール、列、行、またはセクションの要素を右クリックし、属性をコピーすることを選択します。これにより、コンテンツ、スタイル、モジュールに関連付けられたプリセットなど、すべての属性がキャプチャされます。または、キーボードショートカット（MacのShift + Command + CまたはWindowsコンピューターのShift + Alt + C ）を使用して、モジュールの設定にアクセスせずにスタイルをコピーできます。

より詳細な制御のために、より正確な制御を得るために、フィールド、オプショングループ、または要素プリセットレベルで属性をコピーできます。たとえば、特定のフィールドグループを右クリックすることにより、見出しモジュールのコンテンツタブに移動し、タイトル、リンク、背景、または管理者ラベルの属性をコピーできます。

属性は[デザイン]タブからコピーすることもできます。これにより、フォント、テキストサイズ、文字間隔などのオプショングループプリセットまたは設定を簡単にコピーできます。属性をコピーする場所で設定を上書きすることを心配することなく、必要なスタイルのみをコピーできます。

また、Advanced Tabに属性をコピーして、CSSスニペット、表示条件、遷移、スクロール効果、およびワンクリックで配置を簡単に複製できるようにすることもできます。

貼り付け属性

概念は属性を貼り付けるときも同じですが、より多くのオプションがあります。 DIVI 5では、すべての属性を貼り付けることができます。これにより、ソースモジュールの設定から新しいコンテンツ、スタイル、および関連するプリセットを新しいコンテンツ、および新しいプリセットに貼り付けます。コピー属性と同様に、キーボードショートカットを使用してそれらを貼り付けることができます - MacのShift +コマンド + VまたはWindowsのShift + Alt + V - 1回のクリックで設定を適用します。

また、テキストシャドウ、フォント、見出しサイズ、間隔、境界など、デザインタグのすべての設定をコピーする見出しモジュールの設計設定など、特定の属性のみを貼り付けることもできます。

同様に、間隔（パディングまたはマージン）やサイジングを含むモジュールのスタイル設定のみを貼り付けることができます。

同じコンテンツをあるモジュールから別のモジュールに貼り付けたい場合は、[コンテンツ属性を貼り付け]を選択すると、Diviはモジュールの既存のコンテンツを前のコンテンツからコピーしたコンテンツに置き換えます。

最後に、ソースモジュールに関連するプリセットがある場合、貼り付け見出しプリセットを選択すると、関連するプリセットをモジュールに適用し、プリセットドロップダウンメニューに割り当てます。

スタイル、設計設定、プリセットの貼り付けに加えて、特定の属性を貼り付けて選択できます。たとえば、選択したデザイン、スタイル、またはコンテンツ属性を貼り付けることを選択できます。Divi5は追加のメニューにオプションを入力して、貼り付けたい特定の設定を選択できます。

属性のリセット

Divi 5の属性管理システムを使用すると、特定の要素のいずれかを完全にまたはみの要素のいずれかで、任意のモジュールの属性をリセットできます。

たとえば、すべての属性（Mac上のシフト +コマンド + rまたはWindowsのShift + Alt + R）をリセットすることができます - すべてのコンテンツ、スタイル、および関連するプリセットをワンクリックで削除します。

ただし、スタイリングや設計などの特定の属性をリセットできます。さらに具体的には、間隔、スクロールアニメーション、CSSスニペットなど、選択したスタイル、デザイン、または適用されたコンテンツ設定のみをリセットできます。

実用的なアプリケーションと利点

属性管理がDIVI 5に必要な追加である理由を実証しました。以下では、主要なユースケースを調査し、機能の利点を強調し、合理化されたワークフローの育成への影響​​を示す実用的な例を提供します。

ユースケース

属性管理は、デザイナーが複数のページにわたってスタイルをコピーして貼り付けることができるようにすることにより、ブランドの一貫性を保証します。たとえば、ブランドがすべてのアコーディオンモジュールに特定のフォントとアイコンの色を持つ必要がある場合、1つのActorsionモジュールから属性をコピーして、すべてのインスタンスに適用できます。

属性管理を使用すると、プリセットをすばやく複製および変更して、設計のバリエーションをテストできます。たとえば、CTAモジュールの要素プリセットをコピーし、色やレイアウトを調整し、ゼロから開始せずにデザインを比較するために異なるモジュールに適用できます。これにより、設計プロセス中の実験と反復が高速化されます。

また、特定の属性をリセットして、更新されたデザインガイドラインに合わせて選択的な更新を実行することもできます。たとえば、クライアントがボタンの新しい背景色を要求する場合、CTAのボタンのボタン属性をリセットし、新しいスタイルを作成し、ページ上の他のボタンに貼り付けて、タイポグラフィや境界のような他のスタイルを残します。

利点

属性管理を使用してDivi 5にWebサイトを構築することにはいくつかの利点があります。

• 時間を節約する：属性管理は、大規模なWebサイトの主要な時間帯である繰り返しのマニュアルスタイリングを排除します。要素間の属性またはプリセットをコピーして貼り付けるには数秒かかり、デザイナーは退屈なタスクではなく創造性に焦点を当てるように解放します。
• 彼らはあなたのデザインをスケーラブルにします：プリセットと属性管理はサイト全体の更新を楽にします。オプショングループのプリセットへの単一の変更は、すべてのリンクされた要素にわたって伝播する可能性があり、数十ページの巨大なサイトでも一貫性を確保できます。
• 属性は精度を提供します。属性管理の粒度制御により、目的の属性のみがコピー、貼り付け、またはリセットされることが保証されます。この精度は、スタイルプリセットを適用するときにコンテンツを上書きするなど、不要な変更を防ぎ、デザイナーが編集に自信を持っています。

ヒントとベストプラクティス

属性管理の可能性を最大化するには、スマート戦略とベストプラクティスを採用することが重要です。これらのヒントは、属性管理を効果的に活用し、効率的なワークフロー、一貫した設計、スムーズな設計プロセスを確保するのに役立ちます。

属性管理インターフェイスを学習します

属性管理の最良の側面の1つは、ビジュアルビルダー内にどれだけ深く統合されているかです。各ショートカットが行うことを試して、それらを使用する方法を学ぶために時間をかけてください。各オプションには特定の目的があります。たとえば、見出しモジュールの上にホバリングして右クリックするときに属性をコピーできます。

これらの属性を貼り付けたい場合、選択するいくつかのオプションがあります。たとえば、すべての見出しの属性（デザイン、スタイル、コンテンツを含む）を貼り付けたり、見出しのあるモジュールに特定の属性またはプリセットを選択的に貼り付けることができます。

変数とプリセットから始めます

プロジェクトの早い段階で、グローバルな設計変数、デフォルトプリセット、要素プリセット、およびオプショングループプリセットをセットアップすることにより、強力な設計基盤を確立します。たとえば、画像境界のオプショングループプリセットと、最初から一貫したスタイリングを確保するために、画像モジュールのデフォルト要素プリセットを作成します。この積極的なアプローチは、リワークを最小限に抑え、すべての要素をブランドのアイデンティティに合わせます。

プリセットを整理します

属性管理タスク中の混乱を避けるために、プリセットを明確かつ説明的に名前を付けてください。たとえば、スタイル1などの一般的な名前ではなく、丸いボーダー15pxとしてプリセットされたオプショングループをラベル付けします。クリアネーミングにより、モジュール全体でプリセットの属性をコピーまたは貼り付けたときに、正しいプリセットを簡単に識別して適用できます。

ブレークポイントを確認してください

レスポンシブスタイルのようなコピーされた属性を確保し、デスクトップ、タブレット、モバイルのDivi 5のカスタマイズ可能なレスポンシブブレークポイントに合わせてください。たとえば、テキストスタイルをコピーするときは、他の場所に貼り付ける前に、Visual Builderのレスポンシブビューのすべてのデバイスで正しくレンダリングすることを確認してください。これにより、デザインはすべての画面サイズで洗練された機能を保証します。

これらのベストプラクティスに従って、属性管理を活用して、DIVI 5で一貫した効率的でプロフェッショナルなデザインを作成できます。

Divi 5のアプリケーション管理の力を解き放ちます

Divi 5の属性管理機能は、デザイナーがモジュール、列、行、または一貫したブランディングのセクション間で属性をコピー、貼り付け、リセットできるようにすることにより、Webデザインの効率を再定義します。その詳細な制御と直感的なインターフェイスにより、最新のWebデザインの基礎となり、複雑なタスクを正確なアクションに簡素化します。

属性管理を自分で体験する準備はできていますか？最新のDivi 5 Public Alphaをダウンロードして、この新しい機能に飛び込み、DiviでWebサイトを構築する方法を変更する方法を確認します。簡単なメモ：Divi 5は新しいWebサイトで輝く準備ができていますが、既存のサイトをまだ移行することはまだお勧めしません。

Divi 5は、クエリループビルダーやFlexBoxコントロールなどのエキサイティングな機能で進化し続けているため、今こそ属性管理を活用し、Webデザインを次のレベルに引き上げる時です。

私たちはあなたの考えを聞きたいです。以下のコメントセクションで経験を共有するか、お気に入りのプラットフォームでタグを付けてソーシャルメディアで会話に参加してください。