Divi 5のオプショングループプリセットについて知る必要があるすべて

DIVI 5のオプショングループプリセットは、より効率的でスケーラブルな設計アプローチを提供するスタイルの管理を簡素化します。同じスタイルを複数の要素に適用する必要はもうありません。オプショングループプリセットを使用すると、複数の要素にわたって境界、影、間隔などのオプショングループプリセットを作成および適用し、それらを混合して一致させ、グローバル更新を簡単に作成できます。

この投稿では、Divi 5での設計方法をオプショングループプリセットに変更し、この新しいアプローチの利点を調べ、使用方法を示す方法をさらに深く掘り下げます。ワークフローを合理化し、より保守可能な設計システムを構築したい場合は、これは見逃したくないゲームチェンジャーです。

次のビデオをチェックして、新しい機能を参照してください。

オプショングループプリセットの基本を理解する

オプショングループプリセットの実装に飛び込む前に、この新しい高度な機能をよりよく理解できるように、いくつかの基本について説明しましょう。

オプショングループプリセットが説明されています

DIVI 5のオプショングループプリセットにより、ユーザーはWebサイト全体で複数の要素に適用できる再利用可能なデザインスタイルを作成できます。要素プリセット（しばらくの間DIVIで存在している）とは異なり、これらのプリセットはすべての要素で動作し、背景、境界、タイポグラフィなどの一貫したスタイリングを可能にします。

それらはグローバルに階層化、組み合わせ、更新されることができ、繰り返しのスタイリング作業を削減しながら、まとまりのある設計システムを維持することができます。

さらにグローバルなコントロール

オプショングループプリセットの前に、DIVIのスタイリング要素は、手動調整または特定の要素のすべての設計設定を制御する要素プリセット（セクション、行、列、モジュール）のいずれかを適用する必要がありました。要素プリセットは依然として重要であり、一貫性を維持するのに役立ちますが、主にスタイル自体の代わりに要素全体に焦点を当てています。そして、そのスタイルはあらゆる要素に適用できます。特定のソースから撤回できるため、各要素でスタイルを繰り返す必要はもうありません。

オプショングループプリセットを使用すると、要素プリセットがさらに効率的になります。それらを組み合わせて、最も効果的な結果を生み出すことができます。

オプショングループプリセットをいつ作成する必要がありますか？

オプショングループプリセットを実装するにはさまざまな方法がありますが、一般的に作成すればするほど、より良いものになります。 Webサイトのオプショングループプリセットから早めに開始すると、編集時に時間を節約できます。

まもなく、オプショングループプリセットも内部の要素プリセットをライブできるため、要素プリセットを構築する前に作成するのは自然に感じられます。さて、あなたがゼロから新しいウェブサイトを構築しているとしましょう。このビルドにアプローチできる方法は次のとおりです。

1. 最初のページを設計します
2. スタイルをオプショングループプリセットに変えます
3. 要素プリセット内にオプショングループプリセットを含めます

このプロセスは線形ではなく、最初のページドラフトに満足するまで、オプショングループプリセットと要素プリセットの間を行き来することに気付くでしょう。

オプショングループプリセットを使用できるスタイル

右上隅にオプショングループプリセットアイコンを備えたスタイルは、1つに変えることができます。

オプショングループプリセットは、タイポグラフィ、色、背景、境界線、間隔、影、エフェクト、サイジング、レイアウト、ポジショニング、アニメーションなど、さまざまな設計設定から作成し、適用できます。これらのプリセットにより、設計者は繰り返し手動調整を必要とせずに構造化された再利用可能な設計システムを作成できます。

Diviのオプショングループプリセットの素晴らしい点の1つは、競合他社とは際立っていることです。これは、CSSだけに焦点を合わせているわけではないことです。また、スクリプトを使用して構築された効果も含まれています。これは、条件オプション、HTMLバックグラウンドビデオ、スクロールエフェクトなど、DIVIが提供するよりインタラクティブな機能で気付くことができます。

複数回使用するデザインインスタンスは、プリセットに変わる価値があります。これにより、デザインの更新が簡単になります。

オプショングループプリセットを実装する方法

基本について説明したので、オプショングループプリセットの実装に焦点を当てましょう。すべてを可能な限りシンプルで簡単に保つために、シンプルなボーダープリセットの作成に焦点を当てます。他のプリセットの作成にアプローチする方法は、このユースケースと同じです。

例：ボーダープリセットの作成

オプショングループプリセットの作成は非常に簡単です。ボーダープリセットステップを段階的に作成するプロセスを実行しましょう。デザインポートフォリオレイアウトパックに付属のホームページレイアウトを使用していますが、選択した他のレイアウトを自由に使用してください。

ステップ1：要素の設定を開く（列設定）

Divi Builderで、スタイルするモジュール（列など）を選択します。

ステップ2：[デザイン]タブに移動します

モジュール設定内で、[デザイン]タブをクリックします。下にスクロールして、ボーダーセクションを見つけます。

ステップ3：境界線を追加します

利用可能なオプションからボーダースタイルを選択します。物事をシンプルに保つために、私たちが行う唯一のことは、1pxの境界線を黒に追加することです。

ステップ4：オプショングループプリセットとして保存します

ボーダー設定の右上隅にあるアイコンをクリックして、新しいプリセットを作成します。プリセットに説明的な名前を付けます（例：境界線 - 裏地）。 [プリセットを保存]をクリックして最終化します。

他の要素に境界プリセットを適用します

オプショングループプリセットを作成したので、今度は他の要素に適用する時が来ました。セクション、行、列、またはモジュールのスタイリングを使用すると、プリセットを使用すると、最小限の労力で均一なデザインを実現できます。これらの手順に従って、保存されたボーダープリセットを適用してください。

ステップ1：他の要素を選択します

スタイリングする他のモジュール（例：画像モジュール）を開きます。 [デザイン]タブで、境界設定に移動します。

ステップ2：ボーダープリセットを適用します

オプショングループプリセットアイコンを見つけ、この投稿の前の部分で作成したプリセットを選択します。

オプショングループプリセットと要素プリセットを組み合わせます

特定の場合、特定の設定を要素レベルのみに適用することをお勧めします。隣に2つの列があり、同じ境界線ではなく、同じ設定をすべて共有してもらいたいとします。この場合、両方の列に共有列プリセットを使用できますが、それぞれに異なる境界プリセットを適用できます。

ステップ1：新しい列プリセットを作成します

最初の列を開き、右上隅に現在のスタイルから新しいプリセットを作成します。説明的な名前を付け、設定を保存します。

ステップ2：列プリセットと一緒にボーダープリセットを有効にします

次に、行の2番目の列に移動します。列2に最優先要素レベルの設定がないことを確認しました。そこに着いたら、前のステップで作成したプリセットを有効にします。

この時点で、両方の列が同じ要素プリセットを共有しますが、最初の列のみに追加の境界プリセットが含まれています（将来他の要素でも使用する予定です）。

デフォルトとしてオプショングループのデフォルトを割り当てる

オプショングループプリセットを使用したもう1つの優れたオプションは、デフォルトにする機能です。つまり、特定のスタイリング機能を含む要素を追加するとすぐに、選択したデフォルトのスタイリングが適用されます。これは、タイポグラフィ、色、ボタンに特に役立ちます。

たとえば、ボタンを取りましょう。ボタンスタイルは、連絡先フォームモジュール、CTAモジュール、電子メールOptinモジュールなど、いくつかのモジュールの一部です。これらのすべてのボタンに自動的に特定のスタイルを適用する必要がある場合は、オプショングループプリセットで可能です。方法を見てみましょう。

ステップ1：連絡先ページ内に連絡先フォームモジュールを開く

この特定の例では、設計ポートフォリオレイアウトパックに含まれる連絡先ページを使用します。新しいページを作成したら、このレイアウト（またはその他の連絡先レイアウト）をアップロードします。次に、そのレイアウト内で見つける連絡先フォームモジュールの設定を開きます。

ステップ2：静的スタイルからオプショングループプリセットを作成します

オプショングループのプリセットを作成するのは簡単です。 2つのオプションがあります。ゼロから作成するか、既存の静的スタイルをオプショングループプリセットに変えることができます。連絡先フォームモジュール内に設計されたボタンがあるため、再度スタイルを設定する必要はありません。代わりに、オプショングループプリセットのこれらの設定を再利用できます。 [デザイン]タブに移動し、ボタン設定を開きます。

この設定グループの右上隅をホバリングすると、アイコンが表示されます。このアイコンをクリックします。

「現在のスタイルからの新しいプリセット」を選択し、ボタンに「プライマリボタン」などの記述名を提供して続行します。

ステップ3：ボタンスタイルをデフォルトとして割り当てます

このボタンスタイルをWebサイト上のすべてのボタンのデフォルトにするには、「デフォルトとして割り当て」オプションを切り替えて、プリセット設定を保存します。

ステップ4：新しいUnstyled Email Optinモジュールを追加して結果を確認する

ボタン設定を備えたモジュールを追加するとすぐに、新しいデフォルトが適用されます。これは、最初のオプショングループプリセットを作成した接触フォームモジュールのみに限定されませんが、ボタン設定のあるすべての要素に拡張されます。ボタン設定を含むモジュールの1つは、アクションモジュールを呼び出すことです。

新しいプリセットの動作を確認するには、連絡先フォームモジュールのすぐ下に、非スタイルの最新電子メールオプティンモジュールを追加します。

この新しく追加されたモジュール内のボタンには、このチュートリアルの前の部分に適用された新しいデフォルトスタイリングが含まれていることがわかります。

プリセットをグローバルに編集します

ボタンプリセットの例を続けましょう。これは、Webサイト全体のすべてのボタンのデフォルトであるため、このボタンのスタイルを更新すると、膨大な時間を節約できます。編集するだけで、ウェブサイト全体に変更が適用されます。

既存のプリセットを編集するには、モジュールの1つに配置します。

ボタンプリセットをホバリングし、ギアアイコンをクリックします。これにより、すべての変更が行われる画面が開きます。たとえば、境界半径を5pxに変更しましょう。このボタンプリセットが使用されたすべてのインスタンスで、それがどのように効果を発揮するかがわかります。

必ず[プリセットを保存]をクリックしてください。このプリセットを使用したすべてのインスタンスに影響を与えることに言及する警告が表示されます。

オプショングループプリセットを使用することの重要な利点

オプショングループプリセットの使用を開始すると、過去に使用したことがないことを想像するのは困難です。今日の新しいオプショングループプリセットでDivi 5を探索する必要がある理由について説明しましょう。

1.より速く、より効率的な設計ワークフロー

オプショングループプリセットを使用すると、異なる要素で手動で設計変更を繰り返す必要はありません。プリセットを作成すると、普遍的に適用できます。設計更新が必要な場合、プリセットを変更すると、使用するすべての要素が自動的に更新され、時間と労力が節約されます。

2。スケーラビリティ

ウェブサイトが成長するにつれて、一貫した設計を維持することは挑戦になる可能性があります。オプショングループプリセットを使用すると、すべての要素が統一されたスタイルに従うことを保証することにより、デザインを効率的にスケーリングできます。中小企業のウェブサイトであろうと大規模なエンタープライズプロジェクトを管理しているかどうかにかかわらず、プリセットはクリーンで構造化された設計システムを維持するのに役立ちます。

3.簡単なコラボレーション

オプショングループプリセットは、同じプロジェクトに取り組んでいるデザイナー間のコラボレーションをよりスムーズにします。複数の要素を手動で更新する代わりに、チームメンバーはプリセットを使用して標準化されたスタイルをすばやく適用できます。さらに、個々の要素を個別に変更することなく、プリセットレベルで編集を行うことができるため、変更を要求するクライアントは、より合理化されたプロセスの恩恵を受けます。

4。サイト要素全体の一貫性

プロのウェブサイトにとって、設計の一貫性が重要です。オプショングループプリセットを使用することにより、すべてのボタン、見出し、および背景が同じ設計ルールに従うことを確認できます。これは矛盾を排除し、すべてのページでブランドアイデンティティを維持するのに役立ちます。

5.最小限の労力で簡単なグローバルアップデート

各要素のスタイルを手動で更新する代わりに、オプショングループプリセットを使用すると、グローバルな変更を簡単に行うことができます。プリセットへの単一の調整は、それを使用するすべての要素を即座に更新し、リビジョンに費やされる時間を短縮し、ウェブサイト全体で均一性を確保します。

今日はDivi 5を始めましょう

オプショングループプリセットは、Divi 5に強力な追加であり、Webサイトのデザインを管理するための柔軟で効率的な方法を提供します。これらのプリセットを活用することにより、ワークフローを合理化し、設計の一貫性を維持し、グローバルな更新を簡単に作成できます。今すぐオプショングループプリセットの使用を開始し、Webデザインプロジェクトで新しいレベルの制御と効率を体験してください。