ブログモジュールを使用してブログページを作成しますか de ディビ？
通常、すべてのDiviレイアウトパックは エレガントなテーマ ブログの作成に役立つブログ レイアウトを提供します。 ブログ 十分に速いです。 しかし、これらのブログ ページを自分で作成する方法を知りたいと思ったことはありませんか?
この記事では、Diviのブログモジュールを使用してブログページを作成する方法を説明します。 それぞれの設定を段階的に見ていきます。
始めましょう！
概要
始める前に、まず、作成するものの概要を見てみましょう。
新しいブログページを作成する
新しいページを作成する
まず、ページを作成します。 WordPressダッシュボードで、をクリックします ページ > アドオン.
ページにわかりやすいタイトルを付けます。
- ページのタイトル：Diviのブログ
DiviBuilderに切り替えます
ページの中央にある紫色のボタンをクリックします。 Divi Builderを使用する .
ブログページタイトルのセクションを追加します
セクションをカスタマイズする
最初のセクションから始めます。 それらを開く セクションパラメータ .
スクロールして 背景 色を＃f9f3fdに変更します。 管理者ラベルとしてブログを入力します。 セクション設定を閉じます。
- 背景：＃f9f3fd
- 管理者ラベル：ブログ
ブログページのタイトルを作成する
次に、を追加します リーニュ タイトルのために。 緑色のアイコンを選択し、単一列の行を選択します。
次に、 テキストモジュール ラインで。
ブログタイトルテキストモジュールをカスタマイズする
それらを開く テキストモジュール設定 H1を選択します。 タイトルを追加する私たちのブログ。
- フォント：タイトル1
- テキスト：私たちのブログ
次に、[スタイル]タブ 配置を中央に設定します。 H1タイトルのテキストでは、フォントとしてCormorant Infantを選択し、太字にします。
- テキストの配置：中央揃え
- ヘッダーテキスト：H1
- ヘッダーフォント：鵜幼児
- ソフトライトヘッダー：太字のテキスト
Colorを＃442854、Sizeを130px、LineHeightを0,8emに設定します。
- カラー：#442854
- デスクトップテキストサイズ：130px
- 線の高さ：0,8em
最新の記事を作成し、行動を促すセクション
私たちのセクションは、最新の記事とオプトイン メールで構成されています。
新しい行を追加 最初の行の下で、左2/3と右1/3の列デザインを選択します。
それらを開く ラインパラメータ 歯車のアイコンをクリックします。
を選択[スタイル]タブ、までスクロール スペーシング BottomInnerMarginに0pxを追加します。 設定を閉じます。
- 下部内部マージン：0px
注目のブログ投稿モジュールを追加してカスタマイズします
次に、を追加します ブログモジュール 。 これには前回の記事が含まれます。 新しい行の左側の列にある灰色のプラスアイコンをクリックして、ブログモジュールを追加します。
中身
下 中身 、投稿数として1を入力します。
- ポジション数：1
要素
スクロールして 要素 [作成者とページ付け]のチェックを外します。 残りはデフォルトのままにします。
- 著者を表示：いいえ
- ページネーションを表示：いいえ
配置
次に、 [スタイル]タブ レイアウトに[フルスクリーン]を選択し、注目の画像オーバーレイをオフにします。
- モデル：フルスクリーン
- 選択した画像オーバーレイ：無効
タイトルテキスト
スクロールして タイトルテキスト 。 H2を選択し、CormoranInfantを選択します。 [太字]を選択して、色を＃442854に変更します。
- 見出し2を挿入：HXNUMX
- フォントタイトル：鵜幼児
- ソフトライトタイトル：太字
- タイトルテキストの色：＃442854
フォントサイズを30ピクセルに設定します。 行の高さを1.1emに変更します。
- サイズ：デスクトップ用に30ピクセル、タブレット用に20ピクセル、電話用に18ピクセル
- タイトル行の高さ：1,1 em
本文
次に、下にスクロールして 本文 。 フォントにキャビンを選択し、色を＃442854に変更し、行の高さを1,8emに変更します。
- 警察隊：キャビン
- 本文の色：＃442854
- ボディラインの高さ：1,8 em
テキストメタデータ
次に、下にスクロールして テキストメタデータ 。 パラメータを次のように設定します。
- メタデータフォント：鵜の幼児
- メタデータ薄暗いライト：通常
- メタデータのコピースタイル：なし
- メタデータテキストの色：＃442854
- メタデータのテキストサイズ：デスクトップ16ピクセル、タブレット15ピクセル、電話14ピクセル
- メタデータ行の高さ：1,8 em
スペーシング
次に、下にスクロールして スペーシング 上マージンを0vwに変更します。
- トップマージン：0vw
シャドーボックス
最後に、下にスクロールして シャドーボックス 無効にします。
- シャドウボックス：無効にする
ブログの電子メールテキストモジュールを追加およびカスタマイズする
次に、右の列に移動して、 メールで召喚状を作成する 。 まず、右側の列にテキストモジュールを追加します。 灰色のプラスアイコンをクリックして、テキストを検索します。
中身
見出し2を選択し、「オファーを購読する」というテキストを入力します。
- フォント：見出し2
- テキスト：私たちのオファーを購読する
ヘッダーテキスト
以下のために テキスト タイトルの[CenterAlignment]を選択し、[H2]を選択し、[Cormorant Infant]を選択して、[Bold]に設定します。
- テキストの配置：中央揃え
- ヘッダーテキスト：H2
- ヘッダーフォント：鵜幼児
- ソフトライトヘッダー：太字
色を＃442854に、サイズを32pxに、線の高さを0,95emに変更します。
- ヘッダーテキストの色：＃442854
- ヘッダーテキストサイズ：32ピクセル
- ヘッダー行の高さ：0,95 em
スペーシング
最後に、下にスクロールして スペーシング 下の余白に10ピクセルを追加します。 テキストモジュールの設定を閉じます。
- 下マージン：10px
BlogEmailOptinモジュールを追加してカスタマイズする
それから私たちは行きます 作成する フォーム Eメール 。 右側の列のテキストモジュールの下にEmailOptinモジュールを追加します。
中身
まず、タイトルと本文を削除します。
- タイトル：なし
- 本文：なし
スクロールして メールアカウント サービスプロバイダーを追加します。
次に、下にスクロールして 背景 背景色の選択を解除します。
- 背景色を使用する：いいえ
フィールド
に入る [スタイル]タブ フィールドの背景色をrgba（255,255,255,0）に変更し、テキストの色を＃442854に変更します。
- 背景色フィールド：rgba（255,255,255,0）
- テキストカラーフィールド：＃442854
下にスクロールして フォントオプション フォントをキャビンに、サイズを16pxに、行の高さを1,8emに変更します。
- フォントフィールド：キャビン
- テキストサイズフィールド：16ピクセル
- フィールド列の高さ：1,8 em
次に、フィールドの丸みを帯びた角を32pxに、境界線の幅を2pxに調整し、境界線の色を＃442854に変更します。
- 角丸長方形コントロール：32px
- 境界線幅フィールド：2px
- 境界線の色フィールド：＃442854
ボタン
ボタンまでスクロールして、 ボタンにカスタム スタイルを使用する 。 サイズを18psに、ボタンの色を白に、ボタンの背景色を＃442854に変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：18ピクセル
- ボタンのテキストの色：#ffffff
- 背景ボタン：＃442854
境界線の半径を50ピクセルに、フォントをCormorant Infantに変更し、太字にします。
- ボーダー半径ボタン：50px
- フォントボタン：鵜の幼児
- ソフトライトボタン：太字のテキスト
最後に、マージンをいくつか追加しましょう。 上マージンに20px、上と下のパディングに12px、左と右のパディングに32pxを入力します。 EmailOptin設定を閉じます。
- 上マージンボタン：20ピクセル
- 上下のパディングボタン：12ピクセル
- ボタンの左右のパディング：32px
ブログ投稿リストに新しい行を追加します
今から アイテムのリストを作成する ページの。 まず、前のセクションの下に新しい単一列の行を追加します。
ライン設定
に移動 [スタイル]タブ 頂点の内側の余白に0pxを追加します。 ライン設定を閉じます。
- 内側マージン頂点：0px
ブログモジュールをラインに追加します
追加する ブログモジュール 灰色のプラスアイコンをクリックして[ブログ]をクリックして、新しい行に移動します。
ブログ投稿フィードのスタイリング
ブログページのフィードを変更しましょう。
ブログフィードコンテンツ
それらを開く ブログモジュールの設定 投稿数として3を入力します。 これにより、画面に表示する投稿の数を選択できます。
3などの小さい数値を使用すると、最近の投稿に集中してページサイズを小さくすることができます。 これは、頻繁に投稿しない場合や、ページをすっきりさせたい場合に適しています。 ブログの流れに焦点を当てたい場合は、6〜9などの投稿をさらに表示することをお勧めします。
- 投稿数：3
オフセットに1を入力します。 これにより、DiviはXNUMX番目のブログ投稿から開始するように指示されます。これにより、その上に表示されているブログ投稿に既に表示されているのと同じ記事を表示できなくなります。
- ポストオフセット番号：1
要素
スクロールして 要素 。 注目の画像、日付、カテゴリスニペット、ページ付けを有効にします。 残りを無効にします。
- 注目の画像を表示：はい
- データ：はい
- カテゴリ：はい
- 抜粋：はい
- ページネーション：はい
バックグラウンド
アクセス先 背景 グリッドタイルの背景色をrgba（255,255,255,0）に設定します
- グリッドグリッドタイルの背景色：rgba（255,255,255,0）
レイアウトとオーバーレイ
次に、 [スタイル]タブ 。 レイアウトをグリッドに設定したままにします。 この上に掲載されているブログ投稿には、全幅レイアウトを選択しました。 このブログフィードには、デフォルトのオプションであるグリッドレイアウトを使用します。 注目の画像オーバーレイを無効にします。
- レイアウト：グリッド
- 選択した画像オーバーレイ：無効
タイトルテキスト
以下のために タイトルテキスト 、H2を選択します。 Cormorant Infantを選択し、Boldに設定して、色に＃442854と入力します。
- 見出し2を挿入：HXNUMX
- フォントタイトル：鵜幼児
- ソフトライトタイトル：太字
- タイトルテキストの色：＃442854
テキストサイズとして20pxを選択します。 線の高さを1,1emに設定します。
- タイトルテキストサイズ：デスクトップ20px
- タイトル行の高さ：1,1 em
本文
スクロールして 本文 キャビンを選択します。 色を＃442854に設定します。
- 警察隊：キャビン
- 本文の色：＃442854
線の高さを1,8emに設定します。
- 線の高さ：1,8 em
テキストメタデータ
スクロールして テキストメタデータ そして鵜の幼児を選択します。 ウェイトを通常に、スタイルをなしに、色を＃442854に設定します。
- メタデータフォント：鵜の幼児
- メタデータ薄暗いライト：通常
- メタデータのコピースタイル：なし
- メタデータテキストの色：＃442854
- メタデータテキストサイズ：デスクトップ16ピクセル、タブレット15ピクセル、電話14ピクセル
- メタデータ行の高さ：1,8 em
ページネーションテキスト
それでは、 ページネーション 。 フォントには、Cormorant Infantを選択し、Boldを選択して、色を＃442854に変更します。
- フォントショーのページネーション：鵜の幼児
- ページングソフトライトを表示：太字
- テキストの色表示ページ番号：＃442854
スペーシング
次に、 間隔 上部に0vwマージンを追加します。 これにより、モジュールが前のモジュールと重複するのを防ぎます。
- トップマージン：0vw
国境
スクロールして 国境 四隅すべてに0pxと入力します。 これにより、マップの正方形の形状が得られます。
- 角丸長方形グリッドレイアウト：0px
シャドーボックス
最後に、下にスクロールして ボックスシャドウ 無効にします。 ブログ設定を閉じます。 ブログセクションが終了しました。
- シャドウボックス：なし
ブログページに新しい「召喚状」セクションを追加します
それから私たちは行きます 「召喚状」セクションを作成する ページの。 このセクションには、視差フルスクリーンの背景画像、 接触 およびソーシャル フォロー リンク。
新しいセクションを追加する
青いアイコンをクリックして 新しい通常のセクションを追加します ページの下部にあります。
- セクション：通常
[行動を促すフレーズ]セクションのスタイルを設定する
それらを開く セクションパラメータ 歯車のアイコンをクリックします。
バックグラウンド
スクロールして 背景 [画像]タブを選択します。 背景画像というラベルの付いた灰色のアイコンをクリックします。
メディアライブラリからフルスクリーン画像を選択します。 [視差効果を使用]を選択し、視差メソッドとして[CSS]を選択します。
- 背景画像
- 視差効果を使用する：はい
- 視差法：CSS
[管理ラベル]まで下にスクロールして、フィールドに「フッター」と入力します。 これは、セクションを追跡するのに役立ちます。
- 管理者タグ：フッター
次に、 [スタイル]タブ.
- 内部マージン：10vw（上と下）
新しい行を追加
緑のプラスアイコンをクリックして 単一の列に行を追加します 私たちのコンテンツのために。
サイズ剤
それらを開く ラインパラメータ [スタイル]タブに移動します。
- 最大幅：320ピクセル
タイトルテキストモジュール
行動喚起セクションにはタイトルが表示されます。 これを作成するには、 テキストモジュールを追加する ラインで。
タイトルテキストをカスタマイズする
タイトルを追加し、フォントを見出し3に変更します。
- フォント：見出し3
- テキスト：Diviについて
ヘッダーテキスト
に移動 [スタイル]タブ までスクロールします 字幕テキスト 。 位置合わせの中心を選択し、H3を選択し、鵜の幼児を選択し、太字に設定して、色を白にします。
- テキストの配置：中央
- ヘッダーテキスト：H3
- ヘッダーフォント：鵜幼児
- ソフトライトヘッダー：太字
- ヘッダーテキストの色：#ffffff
- ヘッダーテキストサイズ：デスクトップの場合は42ピクセル、タブレットの場合は20ピクセル、電話の場合は16ピクセル
- ヘッダー行の高さ：1,1 em
スペーシング
最後に、下にスクロールして スペーシング 下の余白に10ピクセルを追加します。 モジュール設定を閉じます。
- 下マージン：10px
アドレスのテキストモジュール
別のテキストモジュールを追加する あなたの住所のために。
物理アドレステキストモジュールのスタイルを設定する
住所テキスト
住所を段落テキストとして追加します。
- スタイル：段落
- テキスト：あなたの住所
段落テキスト
次に、のテキストに移動します [スタイル]タブ セミボールドのCormorantInfantを選択し、白に設定します。
- フォント：鵜の幼児
- ソフトライトテキスト：セミボールド
- テキストの色テキスト：#ffffff
- テキストテキストサイズ：デスクトップの場合は28ピクセル、タブレットの場合は20ピクセル、電話の場合は16ピクセル
- テキスト行の高さ：1,2 em
モジュールを追加してソーシャルネットワークでフォローしてください
最後のモジュールはモジュールです ソーシャルネットワークでフォローしてください 。 行の一番下に追加します。
スタイライズソーシャルメディアモジュールでフォローしてください
まずは [スタイル]タブ この時。 [モジュールの配置の中心]を選択し、アイコンの色を＃442854に変更します。
- モジュールの配置：中央
- アイコンの色：＃442854
スクロールして ボード角を丸くするために23ピクセルを追加します。
- 角丸長方形：32px
ソーシャルネットワークを追加してカスタマイズする
今、に戻ります [コンテンツ]タブ 含めたいソーシャルネットワークを追加します。 灰色のプラスアイコンをクリックします。
それらを開く 各ソーシャルネットワークの設定 、ネットワークを選択し、アカウントにリンクを追加します。 背景色を＃f9f3fdに設定します。 サブモジュール設定を閉じます。
- ソーシャルネットワーク：あなたの選択
- アカウントリンクURL：あなたのリンク
- 背景色：＃f9f3fd
ブログページを保存して、ビジュアルビルダーを終了します
最後に、 ページを保存する 右下隅にあるを選択します VisualBuilderを終了します ページの上部にあります。 あなたはあなたの仕事を見る準備ができています。
ブログページのプレビュー
これが私たちの結果です。
今すぐDIVIをダウンロード!!!
まとめ
そう ！ これは、Diviを使用してブログページを作成する方法を示しています。
Divi Builderを使用すると、興味深いレイアウトを簡単に作成できます。各モジュールを使用するには、複数の方法があります。 このチュートリアルで説明したように、同じページで複数のバージョンのブログモジュールを使用して、さまざまな方法でブログフィードを表示することができます。
懸念や提案がある場合は、 コメントセクション それを議論する。
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
