ブログ投稿のデザインを合理化するためにDiviレイアウトブロックでグローバルプリセットを使用する方法

ブログのコンテンツを作成することは、デザインを気にすることなく十分に困難です。 そのため、すばらしいコンテンツの作成に集中できるように、サイトでデザイン要素をすぐに利用できる（または事前にデザインされている）ことが重要です。 確かに、従来のWordPressの子テーマでこれを処理できますが、ほとんどの場合、簡単に変更できないデザインに固執しています。

Diviを使用すると、ブログ投稿のデザインエクスペリエンスをより細かく制御できます。 Diviのグローバルプリセットを使用すると、サイト全体の要素に対してサイト全体のデザイン（子テーマなど）を作成でき、数回クリックするだけでデザインを微調整できるという利便性が追加されます。 さらに、デフォルトのWordPressブロックエディターでコンテンツを作成することに慣れている場合は、Divi Layout Blockの機能を利用して、投稿コンテンツ内でそれらのグローバルプリセット要素をその場で取り込むことができます。 これにより、テンプレートとサイトの他の部分に一致する新しいデザイン要素をブログ投稿内に追加できます。

このチュートリアルでは、Divi Layoutブロックでグローバルプリセットを使用して、ブログ投稿のデザインプロセスを合理化する方法を紹介します。 これを行うために、グローバルプリセットを使用して新しいブログ投稿コンテンツをすばやく効率的にデザインする方法を紹介します。 これは、サイトの全体的なブランディングを損なうことのないブログエクスペリエンスを作成するのに役立ちます。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

グローバルプリセットの概要

Diviの優れている点は、要素やモジュールの外観をカスタマイズするために使用できるさまざまなデザイン設定を使用して、Webサイトのデザインを完全に制御できることです。

新しいDiviプリセットシステムを使用すると、Divi要素（ボタンモジュールなど）のカスタム外観をデザインして、プリセットとして保存できます。 行ったすべてのデザイン変更は、プリセットに保存されます。 ページに新しいモジュールを追加すると、保存したプリセットを参照してすばやく適用できます。

プリセットが適用されると、モジュールのデフォルトデザインはプリセットによって制御されます。 プリセットのスタイルを更新すると、そのプリセットを使用するすべてのモジュールも更新されます。 これにより、保存されたプリセットの小さなコレクションを使用して、Webサイト全体のデザインを制御できます。 さらに、新しいモジュールを最初から設計する必要がなく、Diviプリセットライブラリから外観をすばやく選択できるため、ページに新しいモジュールを追加する際の時間を大幅に節約できます。

グローバルプリセットスタイルガイド

グローバルプリセットスタイルガイド（このチュートリアルで使用するガイドなど）を作成して、Webサイトのデザイン中に要素のデザインをすぐに開始できます。 これらのスタイルガイドには、サイトのデザインに一致するさまざまなプリセットを持つモジュールのコレクションが含まれています。 開始時にプリセットを使用できるようにすると、新しいモジュールごとに設計設定を更新する手間が省け、設計プロセスが合理化されます。 独自に構築したい人のためのスタイルガイドフレームワークもあります。

Diviレイアウトブロックの概要

Divi Layout Blockを使用すると、ユーザーはGutenbergエディター内のブログ投稿に任意のDiviLayoutを追加できます。 他のWordPressブロックと同じように、Diviレイアウトブロックをグーテンベルクで再利用可能なブロックに変換することもできます。 これにより、いくつかの役立つDivi Layoutデザインを、グーテンベルクで投稿を書く通常のフローに合理化するための扉が開かれます。

グローバルプリセットとレイアウトブロックがどのように連携するか

グローバルプリセットは「グローバル」であるため、そのプリセットのスタイルは、サイト全体のプリセットのすべてのインスタンスに影響します。 つまり、レイアウトブロックエディタで要素をデザインするときにグローバルプリセットを使用でき、それらのプリセットもそれに応じて更新されます。 したがって、Divi Layout Blockを使用してブログ投稿コンテンツにCTAを追加する場合は、通常のページや投稿と同じように、グローバルプリセットを使用してモジュールを追加することでCTAを作成できます。 これにより、一致するデザイン要素を投稿内にすばやく効率的に追加できます。

ブログ投稿のデザインを合理化するためのDiviレイアウトブロックでのグローバルプリセットの使用

グローバルプリセットスタイルガイドのアップロード

このチュートリアルでは、Webエージェンシーレイアウトのグローバルプリセットスタイルガイドレイアウトを使用して、グローバルプリセットの作成をすぐに開始します。 スタイルガイドをアップロードすると、Divi LayoutBlockを使用してブログ投稿にデザイン要素を追加するときに使用できるグローバルプリセットがいくつか用意されます。

グローバルプリセットをダウンロードするには、ブログ投稿にアクセスしてください。 「グローバルプリセットスタイルガイドのダウンロード」というタイトルのセクションまで下にスクロールします。 次に、メールアドレスを入力し、クリックしてダウンロードを受け取ります。

zipファイルをコンピューターにダウンロードしたら、ファイルを解凍して、WordPressダッシュボードに戻ります。

スタイルガイドのJSONファイルをDiviライブラリにインポートするには…

1. Divi> DiviLibraryに移動します。
2. [インポートとエクスポート]ボタンをクリックします。
3. [移植性ポップアップ]で、[インポート]タブを選択します。
4. WebエージェンシーのグローバルスタイルガイドJSONファイルを選択します。
5. 必ずプリセットのインポートを選択してください。
6. 次に、インポートボタンをクリックします。

これらのグローバルプリセットはすべて、DiviBuilderで使用できるようになりました。

投稿テンプレートのアップロード

スタイルガイドが配置されたので、スタイルガイド要素にすでに一致するWebエージェンシーのブログ投稿テンプレートをインポートすることにより、ブログ投稿テンプレートのデザインにジャンプします。

テンプレートをダウンロードするには、ブログ投稿に移動し、メールアドレスを入力し、クリックしてファイルをダウンロードします。

投稿テンプレートをインポートするには…

1. Divi> ThemeBuilderに移動します。
2. 次に、移植性アイコンをクリックします。
3. 移植性モーダルの下で、インポートタブを選択します。
4. ダウンロードした投稿テンプレートJSONファイルを選択します。
5. 次に、インポートボタンをクリックします。

プリセットを使用した投稿テンプレートの更新/設計

カスタム投稿テンプレートを配置したら、クリックしてカスタム本文テンプレートを編集します。 そこには、投稿テンプレートのデザインも表示され、インポートされたスタイルガイドから利用できるグローバルプリセットを使用して調整を行うことができます。 独自の投稿テンプレートを最初から作成する場合は、グローバルプリセットを使用して、投稿テンプレートのデザインをWebサイトの他の要素と一致させることができます。 たとえば、投稿タイトルにプリセットされている「WALP – H1 –1」を次のように使用できます。

または、動的な作成者情報を含む宣伝文にプリセットされた「WALP –Blurb2」宣伝文モジュールを使用することもできます。

投稿コンテンツモジュールは、ブログ投稿コンテンツがページ上に生成される領域です。 そのため、投稿コンテンツモジュールのデザイン設定を、サイト全体で使用されている他のテキスト要素と一致させることが重要です。

投稿テンプレートを最初から作成する場合は、さまざまなテキストモジュールからサイトを介してテキスト設定をコピーして貼り付けることができます。 または、サイトのグローバルプリセットスタイルガイドを事前に作成している場合は、スタイルガイドのそれらのモジュールからデザイン要素をコピーできます。

たとえば、1つのテキストモジュールですべてのテキストスタイル用に作成されたグローバルプリセットの見出しテキストスタイルをコピーできます。

次に、これらの見出しテキストスタイルを投稿テンプレートの投稿コンテンツモジュールに貼り付けます。 これにより、投稿コンテンツに使用されるすべての見出しがサイトのスタイルと一致するようになります。

ここで重要なことは、サイトのスタイルに一致する投稿テンプレートがあることです。 テンプレートを最初から設計する場合は、グローバルプリセットを使用すると、そのプロセスが非常に役立ちます。

Diviレイアウトブロックでのグローバルプリセットの使用

テンプレートが設計されたら、Divi Layoutブロックでグローバルプリセットを使用して、デフォルトのWordPressブロックエディターを使用して追加の投稿コンテンツ要素を設計する準備が整います。

これを行うには、ブログ投稿を編集（または作成）します。 次に、いくつかのモックコンテンツ（いくつかの見出しや段落、注目の画像など）があることを確認します。

現在、フロントエンドで投稿を見ると、投稿テンプレート内に投稿コンテンツが表示され、コンテンツ（見出し、本文など）は投稿コンテンツモジュールの設定からスタイルを継承しています。

投稿コンテンツモジュールは、基本的なテキストコンテンツのスタイル設定のみを処理します。 デフォルトのWordPressブロックエディターを使用して投稿全体に要素を追加する場合は、子テーマのカスタムCSSを介してそれらの要素のスタイルを変更する必要があります。 それは、Diviレイアウトブロックを使用しない限りです。

投稿テンプレートとサイトに一致させたいコンテンツを追加するには、DiviLayoutブロックを使用できます。 これにより、Divi Builderを使用して、必要なコンテンツを追加し、スタイルを設定できます。 また、グローバルプリセットも使用できるため、ブログ投稿コンテンツのデザインをその場でさらに合理化できます。

デザイン＃1：グローバルプリセットとDiviレイアウトブロックを使用してブログCTAを構築する

この最初の例では、投稿テンプレートとサイトデザインに一致するカスタムブログCTAを作成しましょう。

これを行うには、投稿コンテンツにDiviレイアウトブロックを追加します。

次に、[新しいレイアウトの作成]をクリックします。

これにより、基本的に通常どおりDiviBuilderであるレイアウトブロックエディターが開きます。 デフォルトのセクションに1列の行を指定します。

別のブラウザでグローバルプリセットレイアウトを開き、クリックしてフロントエンドでビルドし、要素が表示されるようにします。 そうすれば、一方のブラウザでレイアウトエディタを開き、もう一方のブラウザでスタイルガイドを開くことができます。

スタイルガイドがない場合は、サイトのページのレイアウトを開いて、持ち込みたいデザイン要素にアクセスできます。

スタイルガイドから背景をコピーする

このCTAでは、スタイルガイドのロイヤルブルーの背景を使用します。 テキストモジュールの設定を開き、背景をコピーします。

次に、レイアウトエディタでセクションの設定を開き、背景をセクションに貼り付けます。

H3プリセットでテキストモジュールを追加

次に、新しいテキストモジュールを行に追加します。

次に、設定を開き、以下を更新します。

次のHTMLを本文に貼り付けて、CTAのH3見出しを追加します。

<h3>Learn How One Client Increased Revenue by 500%</h3>

[グローバルプレゼンツ]ドロップダウンを開き、H3見出しのプリセットを選択します（WALP – H3 – 1）

デザインの更新

次に、テキストの色を白に更新し、配置を中央に配置します。

グローバルプリセット付きのボタンを追加

テキストモジュールの下に、新しいボタンを追加します。

次に、ボタンのテキストを更新し、グローバルプリセットボタンデザインの1つを選択します。 この例では、「WALP –ボタン3」を使用してみましょう。

変更内容を保存

完了したら、[保存して終了]をクリックします。

これで、WordPressブロックエディターに表示されている要素を確認できます。

デザイン＃2：グローバルプリセットとDiviレイアウトブロックを使用してブログの見積もりを作成する

この次のデザイン要素については、ブログ投稿に引用を追加します。

Diviレイアウトブロックを追加

開始するには、見積もりを表示する場所にDivi LayoutBlockを追加します。

次に、[新しいレイアウトの作成]をクリックします。

スタイルガイドから背景をコピーして貼り付ける

スタイルガイドから濃い青色の背景をコピーします。

次に、それをレイアウトエディタのデフォルトセクションに貼り付けます。

行を追加する

次に、セクションに1列の行を追加します。

プリセット付きの紹介文モジュールを追加する

次に、紹介文モジュールを列に追加します。 次に、グローバルプリセット「WALP–お客様の声2」を選択します。

これにより、ブログ投稿の見積もりの​​デザインを開始することができます。

デザインを更新する

[デザイン]タブで、次のようにデザイン設定を調整します。

• 引用アイコンの色：
• ボディフォントの太さ：軽い
• ボディフォントスタイル：斜体
• 本文の配置：左
• 本文の色：#ffffff
• 著者フォント：Ubuntu
• 著者のテキストサイズ：16px

新しいグローバルプリセットを追加

この紹介文のプリセットに大幅な変更を加えたので、将来の投稿の見積もりに使用するために、この時点で新しいプリセットを作成することは理にかなっています。

新しいプリセットを作成するには、「現在のスタイルから新しいプリセットを作成」ボタンをクリックします。 次に、新しいプリセットに名前（「ブログ投稿の見積もり」）を付けて保存します。 これで、グローバルプリセットを使用する準備が整いました。

レイアウトを保存すると、投稿コンテンツ内に表示されます。

デザイン＃1：グローバルプリセットとDiviレイアウトブロックを使用してブログ投稿に宣伝文を追加する

この次の例では、投稿にいくつかの宣伝文を追加します。

新しいDiviレイアウトブロックを追加

別のDiviレイアウトブロックを追加し、[新しいレイアウトの作成]ボタンをクリックします。

レイアウトエディタで、2列の行をレイアウトに追加します。

プリセット付きの宣伝文句モジュールを追加する

左側の列に、宣伝文句モジュールを追加します。

宣伝文に新しいアイコン画像を追加します。 次に、プリセットドロップダウンを開き、宣伝文句プリセット「WALP –宣伝文句4」を選択します。

2番目の宣伝文を追加

次に、宣伝文をコピーして列2に貼り付け、画像を更新します。

レイアウトを保存すると、投稿コンテンツに表示されます。

最終結果

フロントエンドの投稿を開いて、最終結果を確認します。

グローバルプリセットを備えた再利用可能なブロック

Diviレイアウトブロックで再利用可能なブロックを利用したい場合は、それらがグローバルプリセットで機能することを知っておくとよいでしょう。 したがって、以前に作成したブログCTAを再利用可能なブロックとして保存する場合は、投稿を作成するときにCTAを追加するために使用できる便利なブロックがあります。 また、CTAはグローバルプリセット付きのボタンとテキストを使用しているため、その要素のグローバルプリセットを更新すると、再利用可能なブロック内の要素も更新されます。

最終的な考え

グローバルプリセットは、Diviで利用できる最も強力なデザインツールの1つです。 時間をかけてサイト全体で使用するモジュールにグローバルプリセットを追加すると、レイアウトブロックを使用してブログ投稿テンプレートとコンテンツを設計する合理化されたプロセスを実際に利用できます。

コメントでお返事をお待ちしております。

乾杯！