Diviのブログモジュールを使用してブログページを作成する方法

公開: 2022-02-07

通常、ブログに掲載されるすべてのレイアウトパックには、ブログのレイアウトが含まれています。これにより、ブログをすぐに準備できます。しかし、これらのブログページの1つを自分で作成する方法を見たいと思ったことはありませんか？この記事では、これらのブログレイアウトのいずれかを使用して、Diviのブログモジュールを使用してブログページを作成する方法を確認します。すべての設定を段階的に説明します。

始めましょう！

ブログページのプレビュー

まず、私たちが構築しているものを見てみましょう。

デスクトップのプレビュー

プレビューモバイル

新しいブログページの作成

新しいページを作成する

まず、ページを作成します。 WordPressダッシュボードで、[ページ] >[新規追加]を選択します。

新しいページを作成する

ページにわかりやすいタイトルを付けます。レイアウトパックのページの名前であるAcaiBlogPageを使用しています。右側のサイドバーで必要なページ属性を選択します。属性はデフォルトのままにしておきます。

ページタイトル：Acaiブログページ

新しいページを作成する

DiviBuilderに切り替えます

次に、DiviBuilderに切り替えます。ページの中央にある紫色のボタンをクリックします。DiviBuilderを使用します。これにより、Divi Builderがアクティブな状態でフロントエンドにリダイレクトされるため、ページの作成を開始できます。

DiviBuilderに切り替えます

ブログページのタイトルでヒーローを追加

ヒーローセクションのスタイル

最初のセクションから始めましょう。 セクションの設定を開きます。

ヒーローセクションのスタイル

[背景]まで下にスクロールして、色を＃f9f3fdに変更します。管理者ラベルとしてブログを入力します。セクションの設定を閉じます。

背景：＃f9f3fd
管理者ラベル：ブログ

ヒーローセクションのスタイル

ブログページのタイトルを作成する

次に、タイトルの行を追加します。緑色のアイコンを選択し、単一列の行を選択します。

ブログページのタイトルを作成する

次に、テキストモジュールを行に追加します。行を追加してもモーダルが開かない場合は、灰色のプラスアイコンを選択して、[テキスト]を検索します。

ブログページのタイトルを作成する

ブログタイトルテキストモジュールのスタイルを設定する

テキストモジュール設定を開き、見出し1を選択します。タイトル「ブログ」を追加します。

フォント：見出し1
テキスト：私たちのブログ

ブログタイトルテキストモジュールのスタイルを設定する

次に、 [デザイン]タブに移動し、[配置]を[中央]に設定します。 H1見出しテキストの場合、フォントとして鵜幼児を選択し、太字にします。

テキストの配置：中央
見出しテキスト：H1
フォント：鵜の幼児
重量：太字

ブログタイトルテキストモジュールのスタイルを設定する

色を＃442854に、サイズを130pxに設定し（これはデスクトップ用です。タブレットと電話をすぐに変更します）、線の高さを0.8emに設定します。

色：＃442854
デスクトップテキストサイズ：130px
線の高さ：0.8em

ブログタイトルテキストモジュールのスタイルを設定する

見出しのテキストサイズオプションにカーソルを合わせ、画面アイコンを選択します。タブレットアイコンを選択し、サイズを60pxに設定します。

タブレットテキストサイズ：60px

ブログタイトルテキストモジュールのスタイルを設定する

最後に、電話アイコンを選択し、サイズを40pxに設定します。

電話番号：40px

ブログタイトルテキストモジュールのスタイルを設定する

ブログページの最新の投稿とCTAを作成する

私たちのヒーローセクションには、最新の投稿とメールオプチンが含まれています。最初の行の下に新しい行を追加し、左側が2/3、右側が1/3の列デザインを選択します。

ブログページの最新の投稿とCTAを作成する

歯車をクリックして、行設定を開きます。

ブログページの最新の投稿とCTAを作成する

[デザイン]タブを選択し、[間隔]まで下にスクロールして、下部のパディングに0pxを追加します。設定を閉じます。

ボトムパディング：0px

ブログページの最新の投稿とCTAを作成する

注目のブログ投稿モジュールを追加してスタイルを設定する

次に、ブログモジュールを追加します。これには最新の投稿が含まれます。新しい行の左側の列にある灰色のプラスアイコンをクリックして、ブログモジュールを追加します。

注目のブログ投稿モジュールを追加してスタイルを設定する

コンテンツ

[コンテンツ]で、投稿数に1を入力します。

投稿数：1

注目のブログ投稿モジュールを追加してスタイルを設定する

要素

[要素]まで下にスクロールして、[作成者とページ付け]のチェックを外します。残りはデフォルトのままにします。

作者を表示：いいえ
ページネーションを表示：いいえ

注目のブログ投稿モジュールを追加してスタイルを設定する

レイアウト

次に、[デザイン]タブを選択し、[レイアウト]で[全幅]を選択して、注目の画像オーバーレイを無効にします。

レイアウト：全幅
注目の画像オーバーレイ：オフ

注目のブログ投稿モジュールを追加してスタイルを設定する

タイトルテキスト

[タイトルテキスト]まで下にスクロールします。 H2を選択し、鵜の幼児を選択します。 [太字]を選択して、色を＃442854に変更します。

見出しレベル：H2
フォント：鵜の幼児
重量：太字
色：＃442854

注目のブログ投稿モジュールを追加してスタイルを設定する

デスクトップのフォントサイズを30ピクセル、タブレットを20ピクセル、電話を18ピクセルに設定します。線の高さを1.1emに変更します。

サイズ：30pxデスクトップ、20pxタブレット、18px電話
タイトルラインの高さ：1.1em

注目のブログ投稿モジュールを追加してスタイルを設定する

本文

次に、[本文]までスクロールします。フォントにキャビンを選択し、色を＃442854に変更し、線の高さを1.8emに変更します。

フォント：キャビン
色：＃442854
線の高さ：1.8em

注目のブログ投稿モジュールを追加してスタイルを設定する

メタテキスト

次に、[メタテキスト]までスクロールします。フォントをCormorantInfantに変更し、WeightをRegularに設定し、TTスタイルを削除して、色を＃442854に設定します。 [サイズ]で、デスクトップを16ピクセル、タブレットを15ピクセル、電話を14ピクセルに設定します。線の高さを1.8emに変更します。

フォント：鵜の幼児
重量：レギュラー
スタイル：なし
色：＃442854
サイズ：デスクトップ16ピクセル、タブレット15ピクセル、電話14ピクセル
線の高さ：1.8em

注目のブログ投稿モジュールを追加してスタイルを設定する

間隔

次に、[間隔]まで下にスクロールして、[上マージン]を0vwに変更します。

トップマージン：0vw

注目のブログ投稿モジュールを追加してスタイルを設定する

ボックスシャドウ

最後に、 Box Shadowまでスクロールして、無効にします。

ボックスシャドウ：無効にする

注目のブログ投稿モジュールを追加してスタイルを設定する

ブログの電子メールテキストモジュールを追加してスタイルを設定する

次に、右側の列に移動して、メールCTAを作成します。まず、右側の列にテキストモジュールを追加します。灰色のプラスアイコンをクリックして、テキストを検索します。

ブログの電子メールテキストモジュールを追加してスタイルを設定する

コンテンツ

見出し2を選択し、「取引とレシピの購読」というテキストを入力します。

フォント：H2
テキスト：お得な情報とレシピを購読する

ブログの電子メールテキストモジュールを追加してスタイルを設定する

見出しテキスト

[見出しテキスト]で、[中央揃え]を選択し、[H2]を選択し、[鵜の幼児]を選択して、[太字]に設定します。

テキストの配置：中央
見出しテキスト：H2
フォント：鵜の幼児
重量：太字

ブログの電子メールテキストモジュールを追加してスタイルを設定する

色を＃442854に、サイズを32pxに、線の高さを0.95emに変更します。

色：＃442854
サイズ：32px
線の高さ：0.95em

ブログの電子メールテキストモジュールを追加してスタイルを設定する

間隔

最後に、[間隔]まで下にスクロールして、下マージンに10pxを追加します。テキストモジュールの設定を閉じます。

下マージン：10px

ブログの電子メールテキストモジュールを追加してスタイルを設定する