ブログ記事を改善したいですか？ Divi ヒーローセクションを追加することによって？
全画面表示のヒーロー セクションは、どの Web ページでも見栄えがしますが、特にブログ投稿では見栄えがします。
アイキャッチ画像は全画面表示ですが、タイトルやメタ テキストを配置するためのデザイン オプションはたくさんあります。 それは簡単です Divi Theme Builder .
この記事では、フルスクリーンのヒーロー セクションをブログ投稿テンプレートに追加する方法をいくつか紹介します。 ディビ。
のは、始めましょう。
概要
これは、このチュートリアルで設計する内容のプレビューです。
ポスト タイトル デスクトップ版モジュールを含むヒーロー セクション
投稿タイトル モバイル版モジュールを含むヒーロー セクション
ポスト タイトル デスクトップ バージョン モジュールを使用した代替ヒーロー セクションのレイアウト
今すぐDIVIをダウンロードしてください!!!
モバイル投稿タイトル モジュールを使用した代替ヒーロー セクションのレイアウト
メタデータ付きのヒーロー セクション デスクトップ バージョン
メタデータ付きのヒーロー セクション モバイル版
今すぐDIVIをダウンロードしてください!!!
フルスクリーン ヒーロー セクションのブログ投稿テンプレート
でブログ投稿テンプレートを作成できます Divi Theme Builder を最初から作成するか、Elegant Themes ブログからテンプレートをダウンロードします。 それらを見つけるには、ブログを検索してください 「無料ブログ投稿テンプレート」. テンプレートをダウンロードした場合は、必ず解凍してください。
この例では、 Divi のファッション デザイナー レイアウト パックの無料ブログ投稿テンプレート 。 レイアウトパックも使用します フリー ヘッダーとフッター ファッション デザイナー .
フルスクリーンのヒーロー セクション用のブログ投稿テンプレートをダウンロードまたは作成します
ブログ投稿テンプレートをダウンロードするか、最初から作成することができます。 XNUMX つアップロードしますが、フルスクリーンのヒーロー セクションを作成するプロセスは同じです。
方法 1: フルスクリーン投稿タイトル モジュール
このメソッドは、 PostTitle モジュール . すべての情報をまとめて表示する場合に適しています。 テンプレートを作成したら、編集アイコンを選択して開きます。
アップロードしたテンプレートには、注目の画像を含むセクションがあります。 このセクションを削除し、 全角セクション その代わりに。
選択 全角投稿タイトル 全幅モジュールのリストにあります。
デフォルトでは、すべての項目が選択されています。 それらを有効のままにします。 スクロールして アイキャッチ画像の配置 選択 タイトルの上.
- アイキャッチ画像の配置: タイトルの上
スクロールして 背景色 色を #fff9f2 に設定します
- 背景: #fff9f2
タイトルテキスト
タブを選択します 設計。 タイトル テキストについては、H1 を保持し、Playfair ディスプレイを選択します。 Left Justified に設定し、色に #34332e を選択します。
- タイトル：
- 見出しレベル: H1
- フォント: Playfair Display
- テキストの配置: 左揃え
- テキストの色: #34332e
のために 文字サイズ で、デスクトップ バージョンを 65px、モバイル バージョンを 42px、行の高さを 1,2em に設定します。
- タイトル テキスト サイズ (デスクトップ): 65px (デスクトップ)、42px (電話)
- タイトル行の高さ: 1,2 em
メタテキスト
スクロールして メタテキスト. フォントに Montserrat を選択し、デスクトップ バージョンでは右揃え、モバイル バージョンでは左揃えのミディアム、大文字に設定します。 色は #7b7975 を選択してください。
- メタフォント:
- フォント: モントセラト
- 重量: 中
- スタイル: TT
- メタ テキスト:
- 配置: 右 (デスクトップ)、左 (電話)
- カラー: #7b7975
をセットする フォントサイズ デスクトップ バージョンは 14 ピクセル、モバイル バージョンは 10 ピクセル、文字間隔は 1 ピクセル、行の高さは 1,6 em です。 設定を閉じて、テンプレートを保存します。
- メタ テキスト:
- サイズ (デスクトップ): 14px
- サイズ (電話): 10px
- 文字間隔: 1px
- 行の高さ: 1,6 em
背景画像のタイトル
選択した画像にタイトルを表示する場合は、同じデザイン設定を使用してタブに戻ります。 コンテンツ.
選択 タイトル/メタ背景画像 以下のために アイキャッチ画像の配置.
- アイキャッチ画像の配置: タイトル/メタ背景画像
スクロールして 経歴 選択 背景グラデーション. 左の色を #fff9f2 に、右の色を rgba(255,255,255,0) に、方向を 90 度に、開始位置を 30% に設定し、[はい] を選択して背景の画像の上にグラデーションを配置します。 設定を閉じて保存します。
- 勾配停止:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- 勾配方向: 90 度
- 背景画像の上の正方形のグラデーション：はい
方法 2: メタデータを含むフルスクリーンのヒーロー セクション
このメソッドは、Text モジュールを使用します。 動的コンテンツ 情報のために。 これは、すべてのアイテムを異なる場所に表示する場合に適したオプションです。
まず、テンプレートをダウンロードし、最初のセクションを削除します。 左の列でモジュールとその設定を再作成しますが、それらを構成できるように順を追って説明します。
メタデータを使用したフルスクリーン ヒーロー セクションの設定
の設定を開きます までスクロールします 背景画像。 選択する 背景グラデーション 次のように設定を変更します。
- 勾配停止:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- グラデーションの方向: 90 度
- 背景画像の上の正方形のグラデーション：はい
選択 背景画像 オプションを選択します 動的コンテンツを使用する.
選ぶ 注目の写真 オプションで。
タブを選択します 設計までスクロールします サイジング. 最小高に 100vh を追加します。 セクション設定を閉じます。
- 最小高さ：100vh
メタデータを使用したフルスクリーン ヒーロー セクションの設定
次に、セクションに XNUMX 列の行を追加します。
追加する テキストモジュール 右の列にあります。
彼のために コンテンツ、sélectionnez 動的コンテンツを使用する.
選ぶ 投稿/アーカイブのタイトル オプションのリストで。
- 動的コンテンツ: 投稿/アーカイブのタイトル
タブに移動 デザイン。
- 見出し：
- テキスト: H1
- フォント: Playfair Display
- テキストの配置: 左揃え
- テキストの色: #34332e
のサイズについて テキスト 、デスクトップ バージョンの場合は 65px、モバイル バージョンの場合は 42px、行の高さを 1,2em に設定します。
- 見出し：
- テキストサイズ: 65px (デスクトップ)、42px (スマートフォン)
- 行の高さ: 1,2 em
スクロールして 間隔 上部パディングに 50% を入力します。 設定を閉じます。
- パディング: 50% (上)
この記事は次のサイトでも読むことができます。 Divi の全幅ヘッダー モジュールを使用してヒーロー セクションを作成する方法
メタデータ カテゴリのヒーロー セクション
新しいセクションを追加する ヒーローセクションのレギュラー。
その設定を開き、 カラー #fff9f2 の背景。 設定を閉じます。
- 背景色: #fff9f2
次に、 リーニュ 新しいセクションへの 4 つの列の。
メタデータ カテゴリ テキスト付きのフルスクリーン ヒーロー
追加する テキストモジュール 左の列に。
モジュール設定を開き、選択します 動的コンテンツを使用する テキストの本文用。
選択 過去のカテゴリー リスト内の
- 動的コンテンツ: 投稿カテゴリ
タブを選択します 設計 見出しテキストまで下にスクロールします。 H4 を選択します。 フォントに [Playfair Display] を選択し、デスクトップ バージョンの場合は右揃え、電話バージョンの場合は左揃えで、中、大文字に設定します。 色は #7b7975 を選択してください。
- 見出し：
- テキスト表示
- フォント: Playfair Display
- フォントの太さ: 中
- スタイル: TT
- テキストの配置：中央
- テキストの色: #7b7975
デスクトップ バージョンのフォント サイズを 14 ピクセル、モバイル バージョンのフォント サイズを 10 ピクセル、文字間隔を 1 ピクセル、行の高さを 1,6 em に設定します。 設定を閉じて、テンプレートを保存します。
- 見出し 4:
- サイズ (デスクトップ): 14px
- サイズ (電話): 10px
- 文字間隔: 1px
- 行の高さ: 1,6 em
スクロールして 間隔 下マージンに 0px を追加します。 設定を閉じます。
- マージン（下）：0px
メタ テキスト メタデータを含むフルスクリーン ヒーロー セクション
次に、Category モジュールをコピーして、次の列にドラッグします。 各メタ モジュールの設定は同じです。 最初のモジュールを作成し、それを XNUMX 回コピーして他のモジュールを作成する方法を示します。
作家
設定を開いて削除します コンテンツ 動的。
上をクリックします 動的コンテンツを使用する そして選ぶ 投稿者.
- 動的コンテンツ: 投稿者
タブ内 設計, 以下の設定を変更します。
- 見出し 4:
- フォント: モントセラト
- フォントの太さ: 中
- スタイル: TT
- テキストの配置 (デスクトップ): 中央
- テキストの配置 (電話): 左
- カラー: #7b7975
のパラメータ フォントサイズ 含む：
- テキストサイズ: 14px (デスクトップ)、10px (スマートフォン)
- 文字間隔: 1px
- 行の高さ: 1,6 em
La 下マージン 0px が必要です。
- マージン（下）：0px
日付
コピー Author モジュールを開き、次の列にドラッグします。
消して コンテンツ dynamique 現在、選択 動的コンテンツを使用する 選択 投稿の公開日. 設定を閉じます。
- 動的コンテンツ: 公開日の投稿
commentaires
最後に、 コピー Post Publish Date モジュールを開き、最後の列にドラッグします。
他のモジュールと同様に、動的コンテンツを削除して選択します 動的コンテンツを使用する .
選ぶ コメント投稿数 あなたの選択から。
- 動的コンテンツ: 投稿コメント数
今回は、フィールドにスペースと「コメント」という単語を追加します 後 . 小さなモーダルを閉じてから、設定を閉じます。 作業を保存します。
- 後: コメント
結果
ポスト タイトル デスクトップ版モジュールを含むヒーロー セクション
投稿タイトル モバイル版モジュールを含むヒーロー セクション
ポスト タイトル デスクトップ バージョン モジュールを使用した代替ヒーロー セクションのレイアウト
モバイル投稿タイトル モジュールを使用した代替ヒーロー セクションのレイアウト
メタデータ付きのヒーロー セクション デスクトップ バージョン
モバイル版のメタデータを含むヒーロー セクション
今すぐDIVIをダウンロードしてください!!!
まとめ
それだけです！ これは、フルスクリーンのヒーロー セクションをブログ投稿テンプレートに追加する方法です。 Divi.
モジュール Divi およびテーマ ビルダーには、全画面のヒーロー セクションを作成するためのいくつかのオプションが用意されています。 どの方法も非常にうまく機能し、それぞれに利点があります。
これらの方法を使用して、フルスクリーンのヒーロー セクションを任意の Divi ブログ投稿テンプレートに追加できます。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
