Divi 5のデフォルトプリセットを使用してサイト全体をスタイリングする

オプショングループプリセットの到着は、Divi 5内で非常に多くの新しい可能性を開きました。ニックは、これがDiviをヒットする最も重要な機能であると言い、テストすると、彼がそれを言った理由が正確にわかります。

すでにプリセットを要素化するために使用されていますが、オプショングループプリセットは、使用を停止しないデザインコントロールのまったく新しいレイヤーを追加します。ただし、両方のタイプのプリセットが「デフォルトプリセット」をサポートしています。それが次の2000年の言葉の過程であなたに見せたいことです。

Divi 5のデフォルトプリセットとは何ですか？

デフォルトのプリセットは、Webサイトで編集する最初のプリセットです。多くの点で、これらはテーマカスタマイザーの完全な代替品です。

ページの編集時にすぐに作業できる2種類のデフォルトプリセットがあります。デフォルトの要素プリセットとデフォルトのオプショングループプリセットです。より馴染みのあるため、最初に要素プリセットをカバーしましょうが、オプショングループプリセットですべてのデザインを開始する必要があります。

デフォルトの要素プリセット

要素プリセットは、ウェブサイトで何度も使用する要素を設計するための迅速な作業を行います。要素プリセットを使用すると、Blurbモジュールなどのモジュールを使用して、モジュールのデフォルトプリセットを編集できます。デフォルトのプリセットが編集されると、サイトに新しいBlurbモジュールを追加するときに同じスタイルを使用します（新しいアイテムがデフォルト設定を使用するため）。

デフォルトの要素プリセットを編集する方法

デフォルトのプリセットの編集は簡単です。デフォルト設定を変更する要素をクリックします（この場合、テキストモジュール）。右上では、プリセットセレクターをクリックします。

ドロップダウンメニューに少なくとも1つのプリセットが表示されます。その要素のデフォルトのプリセットです。設定（ギアアイコン）を見つけ、それをクリックして、特定のページ要素からデフォルトのプリセットの設定オプションに設定オプションを変更します。

パン粉（作業中の要素のネストされた位置を表示する）が消え、「プリセット」という言葉が設定パネルの左上に表示されると、プリセットを編集していることがわかります。また、プリセットセレクターが「デフォルトプリセット」と書かれていることに気付き、青くなります。ここから、編集したい要素オプショングループに移動します。この場合、 [デザインタブ]> [テキスト]> [テキストサイズ]に移動して、このモジュールのテキストコンテンツのサイズを編集することにしました。

[プリセットを保存]をクリックして、変更をサイト全体に変更します。

あなたが知らなかった場合に備えて
しばらくDiviを訪れていた場合は、モジュールプリセットについて知っています。要素プリセットはモジュールプリセットと同じですが、プリセットをセクションや行などの非モジュール要素でも使用できるため、モジュールプリセットを呼び出すことは混乱していました。

Divi 5のページのワイヤーフレームビュー。モジュールではなくコンテナであるための基準を取り付けている間、この行にプリセットがある方法に注意してください。

デフォルトの要素プリセットは、単にモジュールに異なるカスタム要素プリセットを適用するか（以下の詳細）、特定のモジュールまたは要素にスタイルを直接適用するだけで「オーバーライド」できます。 DIVIは、CSSと同様に、特異性ルールを使用して動作します。この場合、モジュールに直接適用される設定は、デフォルトの要素プリセットに適用される設定よりも具体的です。

しかし、ブロックには、最初にDivi Webサイトを設計する必要があるという新しいプリセットがあります。

デフォルトのオプショングループプリセット

DIVIの新しいオプショングループプリセットを使用すると、同様のオプショングループを使用する可能性のあるさまざまなモジュールと要素にまたがるデフォルトスタイルを作成できます。これはすべて、「デフォルト」オプショングループプリセットで行われます。オプショングループのこの新しい概念の詳細についてファジーな場合は、私たちの投稿で詳細を読むことができます。

オプショングループプリセットについて学びます

要するに、異なるモジュールには異なる構成があります（4つの異なる要素を比較する例については、以下の表を参照してください）。

ある要素の複合機能が別の要素とオーバーラップすると、オプショングループレベルでスタイルを共有できます。つまり、異なるモジュールや要素（多くのモジュールのタイトルテキストなど）で同様のモチーフを設計するときに時間を節約できます。特に、見出し、ボディテキスト、影、アニメーション、粘着性機能、境界、間隔、ボタンを使用すると、はるかに高速にウェブサイトをデザインすることになります。

デフォルトのオプショングループプリセットを編集する方法

デフォルトのオプショングループプリセットを編集するには、モジュールまたは行/セクションの設定パネルに移動します。利用可能なオプショングループ（テキスト、タイトルテキスト、ボタン、背景など）の上にホバリングします。プリセットをサポートするオプショングループは、ホバリング時にそのOGフィールドの右側にプリセットアイコンを表示します。プリセットアイコンをクリックして、そのオプショングループのデフォルトとカスタムプリセットを表示します。

以下は、単一のモジュールの特定の側面を編集し、同じ側面をオプショングループプリセットで編集することの違いを示すビデオです。

現在編集中のオプショングループのみの場合、UIが光から暗くなる場合（その場合は反対である場合を除く）。あなたは彼らが有効にするために変更を保存する必要があります。

デフォルトプリセットとカスタムプリセットの違いは何ですか？

デフォルトのプリセットは、ページまたはテンプレートに配置された新しい要素（モジュール/セクション/行）に自動的に適用されるスタイルです。何があっても、DIVI内のすべての要素とすべてのオプショングループには、デフォルトのプリセットがあります。デフォルトのスタイルがどこから来たのかを以下に参照してください。

カスタムプリセットは、デフォルトのプリセットと同じくらい簡単に管理し、適用するのが簡単ですが、自動的に使用されない追加のプリセットです（デフォルトの代わりにこれらのカスタムプリセットを適用する必要があります）。それらは、暗いセクション、サイドバー、密なコンテンツディスプレイなど、デザインのニーズが何であれ、特別な状況で使用されます。

すべてのWebサイトは、デフォルトのオプショングループプリセットを使用して可能な限り設計する必要があります。次に、デザイン仕様ごとに同様の状況を処理するために、追加のカスタムオプショングループプリセットを作成する必要があります。これらのOGプリセットでカバーされていないものはすべて、デフォルトの要素プリセットとカスタム要素プリセットで設計できます。まだ設計する必要がある残りのエッジケースのために、個々のモジュールにスタイルを直接適用できます。

Diviはエキサイティングな段階にあり、すべての新機能が展開されています。高度なユニットと設計変数が低下すると、すべてのCSSユニットと機能を備えたCSS変数を設定できます。そこから、すべてのプリセットでこれらのCSS変数を使用して、デザインワークフローを約10倍の一貫性を高くすることができます。

また、要素プリセット内にネスティングオプショングループプリセットを許可する計画された機能もあり、それらに組み込まれたオプショングループプリセットのロジックを使用して要素プリセットを作成できます。つまり、OGプリセットを編集すると、関連する要素プリセットも変更されます（その逆もある程度も同様です）。

Divi 5のデザイナーと開発者にとって、未来は明るく見えます！

カスタムプリセットをデフォルトのプリセットに変える方法

デフォルトのプリセットがあり、カスタムプリセットもあります。デフォルトのプリセットの代わりにカスタムプリセットを適用する方法を見ましたが、デフォルトにしたいと思ったらどうでしょうか？

まあ、それは簡単です。要素プリセットまたはオプショングループプリセットのドロップダウンに移動します。デフォルトを作成し、スターアイコンをクリックするカスタムプリセットの上にホバリングします。次に、変更を保存します。プリセットは、ウェブサイト全体でデフォルトのプリセットになりました。

デフォルトプリセット内のスタイルはどこから来ていますか？

編集されていないデフォルトプリセットは、テーマカスタマイザーにあるスタイルの値を単純に継承します。ほぼすべてのWordPressのテーマは、テーマカスタマイザー（ブロックテーマでさえ）の一部の側面を使用していますが、Diviは接続されているが使用する必要はないようにしました。将来のある時点でカスタマイザーを交換する可能性がありますが、今のところ、それは現代のワードプレステーマの癖であるWordPressコアから引き継がれた遺物です。

ファイナンシャルアドバイザーのスターターサイトを使用したとします（1つの具体的な例として）。テーマカスタマイザーでは、ヘッダーテキストサイズが30pxに設定されています。

ページのVisual Editorに登場し、見出しまたはテキストモジュールの「デフォルトプリセット」をクリックし、H1標高のテキストの見出し> [テキストの下で]をチェックすることにより、デフォルトプリセットで使用されている同じ値（30px）を見ることができます。

Divi 5フィールドの灰色の値は、それが継承された値、この場合はテーマカスタマイザーから継承されていることを意味します

しかし、それは単にこのスターターサイトによって設定されたデフォルトです。インポートされたレイアウトパックのプリセットを使用した場合、またはゼロから開始した場合、テーマのカスタマイザーで異なるデフォルト値が設定されます。

デフォルトのプリセットを使用してWebサイトを構築する方法

ワイヤーフレームの数ページでビルドを開始することをお勧めします。あなたが設計する必要があることを知っているものを、いくつかのページにすべてを置きます。

最も単純なモジュールに頼ってジョブを完了し、可能な場合は同じモジュールセットの使用を繰り返してみてください。見出し、テキスト、宣伝文献、メニュー、画像、アコーディオン/トグル、ビデオモジュールを使用して、ページのほとんどのワイヤーフレームを構築する方法を検討してください。必要に応じて他のモジュールを追加しますが、ほとんどのことに対してコアのモジュールセットに固執すると、オプショングループと要素のデフォルトプリセットの両方を使用するのがはるかに高速になります。

このページでは、セクション、行、列、テキスト、宣伝、画像、ボタン、およびメニューモジュールを使用します。この特定のページのようにシンプルなものを保持することにより、設計する必要があるオプショングループの数を減らします。

次に、デフォルトのオプショングループプリセットを使用して、最も抜本的な変更の設計を開始する必要があります。ほとんどのデザインでは、これは次のとおりです。

1. セクション間隔：上/下のマージン、左/右マージン、および必要なパディングを含めます。
2. セクションの背景色：ほとんどの場合に使用するデフォルトのオプショングループプリセットを作成し、代替/コントラストの背景色のカスタムオプショングループプリセットを作成します。バックグラウンドオプショングループのデフォルトプリセットは、列の背景にも適用できることに注意してください。
3. タイポグラフィ：H1-H6から始めます。モジュールの使用に応じて、見出しモジュールとテキストモジュールの見出しテキストの下のデフォルトのオプショングループプリセット、およびblurbモジュールのようなもののタイトルテキストでこれらを起動することをお勧めします。次に、通常のテキストで作業し、テキストモジュールのテキストオプショングループとBlurbモジュールのようなもので見つかったボディテキストオプショングループに焦点を当てます。
4. その他の設計設定：境界線、ボックスシャドウ、フィルター（画像のスタイリングの場合）、アニメーションのオプショングループプリセットを作成します。これらの場合、デフォルトプリセットは使用しない傾向がありますが、ページ要素に選択的に適用できるカスタムプリセットを作成します。
5. 高度な設定：これは上記のステップに似ていますが、遷移やスクロールエフェクトなどのオプショングループプリセットを作成します。また、デフォルトのプリセットを使用しない傾向がありますが、ページ要素に選択的に適用できるカスタムプリセットを作成します。

この方法でデフォルトのオプショングループプリセットを作成すると、サイト全体にスタイルの適用が自動的に開始されます。デフォルトのOGが更新されるたびに、Webサイト全体の関連要素がこれらの変更を自動的に受け入れます。

デフォルトのプリセットは時間を節約します

要素とオプショングループの両方のバラエティの両方のデフォルトプリセットは、大量の時間を節約できます。 Divi 5の燃えるようなビルダーを使用して、これらの機能を使用してサイトの構築を開始するのが待ちきれません。そして、それはDivi 5で展開されている新機能の終わりでさえありません。

Diviの新しい計画的な機能を備えているため、指先に真のデザインシステムがあります。最初にデフォルトのプリセットを使用してサイトを編集してみましたか？どうでしたか？以下のコメントでお知らせください。これらの機能の使用方法を共有してください。

Divi5をダウンロードするDivi5についてすべて学ぶDivi5デモを試してください