Diviでレイアウトパックスタイルをグローバルデフォルトに変換する方法

新しいDiviグローバルデフォルトアップデートは、Webサイト全体の要素に特定のデザインスタイルを適用するのに役立ちます。 それはあなたの時間を節約し、あなたがあなたのウェブサイトの概要を保ち、あなたがそれに慣れている方法で各グローバル設定をスタイルするのを助けます。 DiviBuilder自体の内部。

これで、Webサイトにレイアウトパックを使用している場合、レイアウトパックのスタイルをグローバルなデフォルトに変更したい可能性があるため、前後に移動する必要はありません。 しかし、それについて行くための最良の方法は何ですか？ 今週のユースケースチュートリアルでお見せします。 サイバーセキュリティレイアウトパックを使用してデモンストレーションを行いますが、この手法は使用するすべてのレイアウトパックに適用されますのでご安心ください。

それを手に入れよう！

1.レイアウトパックのレイアウトごとに新しいページを作成します

レイアウトパックのスタイルをグローバルデフォルトに変換することを計画している場合、最初に行う必要があるのは、レイアウトパックに付属するレイアウトごとに個別のページを作成することです。 レイアウトごとに個別のページを用意しておくと、2番目のステップに役立ちます。 レイアウトパック全体で使用されるデザイン要素をスキャンし、それらをグローバルデフォルトに変換します。

2.レイアウト全体で使用されているモジュールを検出し、それらをグローバルにします

レイアウトごとに個別のページを作成したら、ページのスキャンを開始して、使用されているさまざまなモジュールを見つけることができます。 セクション、行、列の設定は、作成するセクションのタイプによって異なるため、意図的にスキップしています。 また、ほとんどのセクションと行について、設計チームは、独自のグローバルデフォルトを簡単に設定できるように、Diviのデフォルト設定を使用することにしました。

先に進み、カスタムスタイルを含むCyber​​ Security LayoutPackで最も頻繁に使用されるモジュールを検出しました。 これらのモジュールは、Diviで最も人気のあるモジュールの一部でもあり、ほとんどすべてのレイアウトパックに含まれています。

• テキストモジュール
• プライマリボタンモジュール
• 仕切りモジュール
• メールオプチンモジュール
• お問い合わせフォームモジュール

テキストモジュールの本文と見出しの設定をグローバルデフォルトに変更する

モジュールスタイルをグローバルデフォルトに変換し始める時が来ました！ このモジュールはモジュールごとに行う必要があります。 テキストモジュールから始めましょう。 グローバル化することをお勧めする唯一の設定は、見出しと本文の設定です。 これらの2つのオプショングループは、作成するデザインに関係なく、ほとんどの場合同じままです。 間隔やサイズなどの他の設定は、通常、テキストモジュールがデザインの他の部分からどのように影響を受けるかによって異なり、途中で微調整されます。 この特定のモジュールのグローバルデフォルトを設定するプロセスを実行します。 次に、他のモジュールのグローバルデフォルトに変換することをお勧めする設定を一覧表示します。

レイアウト全体で、3つのテキストモジュールの見出しが使用されています。 H1、H2およびH3。 これらの3つの見出しと段落テキストの設定をグローバルデフォルトに変換します。 H3より先に進みたい場合は、H3グローバルテキスト設定で手動でスタイルを設定できます。

ランディングページには、これらすべての設定がさまざまなテキストモジュールに分散していることがわかります。 ヒーローセクションの最初のテキストモジュールには、H1コピーが含まれています。 設定を開き、H1テキスト設定に移動し、H1アイテムを右クリックして、[スタイルをデフォルトにする]をクリックします。

次に、段落の内容が含まれているテキストモジュールを見つけます。 テキスト設定に移動し、右クリックして[スタイルをデフォルトにする]をクリックします。

最後に開くテキストモジュールには、H2とH3の両方のテキストスタイルが含まれています。 各見出し項目を個別に右クリックし、[スタイルをデフォルトにする]をクリックします。 これらの手順を完了すると、テキストモジュールを使用できるようになります。

Webサイトの定期的なモジュールごとに、これらの手順を繰り返す必要があります。 他のものに移りましょう。

1.プライマリボタンモジュール

ボタンの設定

パディング

2.宣伝文モジュール

アイコン設定（必要な場合）

テキスト設定

タイトルテキスト設定

本文の設定

3.ディバイダーモジュール

回線設定

サイズ設定

4.メールオプチンモジュール

モジュール全体を除く：マージン+サイズ設定+変換設定

5.お問い合わせフォームモジュール

モジュール全体を除く：マージン+サイズ設定+変換設定

3.繰り返し要素を（グローバル）アイテムとして再利用のために保存します

これで、主に使用されるモジュールのグローバルデフォルトを設定した後でも、再利用を検討する可能性のある他の要素がいくつかあります。 これらの要素は通常、以下に限定されませんが、以下のとおりです。

• 二次ボタン
• 三次ボタン
• CTAセクション
• フッターセクション
• レイアウトパックの詳細：セクションディバイダーを備えた画像モジュール/異なるスタイルの宣伝文モジュール/…

これらの要素をDiviライブラリに保存し、必要に応じて再利用することをお勧めします。 フッターやCTAセクションなど、通常のアイテムではなく、グローバルアイテムとしてそれらの一部を保存すると便利です。 ボタンや異なるスタイルの宣伝文句モジュールなどの要素は、グローバルにせずに保存することをお勧めします。これにより、必要に応じてコピーとデザインに特定の変更を加えることができます。

要素にカーソルを合わせ、[ライブラリに保存]アイコンをクリックし、ライブラリアイテムに名前を付け、グローバルにするかどうかを選択して、[ライブラリに保存]をクリックすると、要素をDiviライブラリに保存できます。

4.Diviテーマオプションでデフォルトのカラーパレットを作成します

グローバルデフォルトを設定し、定期的な要素をDiviライブラリに保存すると、グローバルデフォルトとライブラリアイテムを使用して新しいページを最初から作成する準備がほぼ整います。 その前に、Diviテーマオプションのデフォルトのカラーパレットを変更することをお勧めします。 これらの色は、開いたすべてのデザイン要素に表示され、カラーコードを常にコピーして貼り付けることなく色を変更するのに役立ちます。 これにより、本当に重要なことに集中できます。 美しく機能的なウェブサイトを作成します。 Diviテーマオプションに移動し、カラーパレットに次のカラータイプが含まれていることを確認してください。

• テキストの色
• 背景色
• アクセントカラー

5.既存のページのモジュールスタイルをリセットする

グローバルデフォルトを設定し、ライブラリアイテムを保存し、デフォルトのカラーパレットを選択したら、新しいページの作成を最初から開始して、アプローチの違いをすぐに確認できます。 ただし、グローバルデフォルトを選択する前に変更された既存のページがある場合は、グローバルデフォルトを適用するために、モジュールスタイルに戻ってリセットする必要があります。 これがグローバルデフォルトの仕組みです。 モジュールに関する何かを手動で変更する場合は、グローバルデフォルトが透けて見えるように、モジュールも手動で削除する必要があります。 幸い、Diviが提供するスタイルの拡張機能を使用して、ページ全体にリセットスタイルを拡張することもできます。

最終的な考え

この投稿では、新しいDiviグローバルデフォルトアップデートを使用して、レイアウトパックをグローバルデフォルトに変換する方法を示しました。 サイバーセキュリティレイアウトパックを使用しましたが、この手法は、選択した任意のレイアウトパックで機能させることができます。 このユースケースチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にご遠慮なくお寄せください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。