Diviブログ投稿テンプレートに全幅の注目画像を含める方法

公開: 2022-01-02

全幅の注目の画像は、どのブログ投稿でも見栄えがします。幸い、Diviテーマビルダーを使用して簡単に追加できます。それらを追加する方法は複数あるため、ニーズに最適な方法を選択できます。この記事では、ブログ投稿テンプレートに全幅画像を追加する4つの方法を紹介します。

プレビュー

動的セクションの背景デスクトップ

ダイナミックセクションバックグラウンド電話

投稿タイトルモジュールデスクトップ

投稿タイトルモジュール電話

セパレートイメージデスクトップ

セパレートイメージフォン

テキストモジュールデスクトップを備えた全幅画像

テキストモジュール電話を使用した全幅画像

ブログ投稿テンプレートについて

まず、ブログ投稿テンプレートを作成またはアップロードする必要があります。ブログ投稿テンプレートは、コンテンツがフロントエンドに表示されるときに使用するデザインを提供します。エレガントテーマブログで「無料のブログ投稿テンプレート」を検索すると、多くのDiviレイアウトの無料のブログ投稿テンプレートを入手できます。テンプレートファイルをダウンロードして解凍します。

ブログ投稿テンプレートをDiviThemeBuilderにアップロードするときに、割り当てる必要はありません。これは自動的に行われます。テンプレートを最初から作成する場合は、テンプレート設定で手動で投稿に割り当てる必要があります。

私の例では、Diviの在宅介護レイアウトパック用の無料のブログ投稿テンプレートを使用しています。このテンプレートには、注目の画像がすでに含まれています。それがどのように機能するか、そしてそれを追加できる他の方法を見ていきます。

ブログ投稿テンプレートをアップロードする

解凍したブログテンプレートのJSONファイルをアップロードするには、WordPressダッシュボードの[ Divi] >[ ThemeBuilder ]に移動します。右上隅にある[移植性]を選択し、開いたモーダルで[インポート]タブを選択します。解凍したファイルに移動して選択します。 [ Diviテーマビルダーテンプレートのインポート]をクリックして、インポートが完了するのを待ちます。 [変更を保存]をクリックします。テンプレートは自動的にすべての投稿に割り当てられます。

ブログ投稿テンプレートに全幅画像を追加する

編集アイコンをクリックしてテンプレートを開きます。

ブログ投稿テンプレートに全幅画像を追加する

このテンプレートは、画面の上部にメタを表示し、その後にカテゴリ、投稿タイトル、ニュースレター登録フォーム、コンテンツの本文、コメント、およびCTAが続きます。

動的セクションの背景を持つブログ投稿テンプレートに全幅画像を追加する

まず、このテンプレートが使用する方法を見てみましょう。注目の画像は、セクションの背景で動的に選択されます。これには、方向が90度、開始位置が35％、終了位置が90％の白い線形グラデーションが含まれ、背景画像の上に配置されます。

最初の色：#ffffff
2番目の色：rgba（0,0,0,0）
グラデーションタイプ：線形
グラデーション方向：90度
開始位置：35％（タブレットの場合は45％）
終了位置：90％
背景画像の上にグラデーションを配置：はい

動的セクションの背景を持つブログ投稿テンプレートに全幅画像を追加する

[画像]を選択し、[動的コンテンツを使用]をクリックします。

動的セクションの背景を持つブログ投稿テンプレートに全幅画像を追加する

リストの上部にある[注目の画像]を選択します。保存して終了。注目の画像がそのセクションのコンテンツの後ろに表示されます。