ディビのポストタイトルモジュールの4つの見事な例とそれらを達成する方法
公開: 2019-01-13ブログ投稿に人々を引き付ける新鮮な方法を探しているすべてのDiviブロガーにとって、Divi投稿タイトルモジュールは開始するのに最適な場所です。 投稿タイトルモジュールを使用すると、投稿タイトル（および注目の画像）をさまざまな方法でスタイル設定して、数え切れないほどの見事なデザインを作成できます。 これはあなたが最初の一瞥からあなたの潜在的な読者を引っ掛けるいくつかの美しい記事を作成することを可能にします。 今日は、読者を引き込むのに役立つDivi Post TitleModuleのスタイルを設定できる4つのすばらしい方法を紹介します。
始めましょう！
スニークピーク
これは、このチュートリアルで取り上げられている投稿タイトルモジュールのデザインを簡単に紹介したものです。
＃1抽象的なフレーミング
建物＃1を開始します
＃2重複するテキストと注目の画像
建物＃2を開始します
＃3読みやすさのためのユニークなコンテンツの背景
建物＃3を開始します
＃4デュアル注目画像による煙突効果
建物＃4を開始します
入門
私たちのYoutubeチャンネルを購読する
このチュートリアルに本当に必要なのはDiviだけです。 新しい投稿を作成し、DiviBuilderを使用して投稿のタイトルデザインを作成します。 注目の画像として使用するには、いくつかの画像も必要になります。
新しい投稿の設定
このチュートリアルでは、Divi Builderを使用して、新しい投稿に投稿タイトルのデザイン例を作成します。 このチュートリアルでビルドのセットアップを行うには、次の手順を実行する必要があります。
- 新しい投稿を作成します。
- 投稿にタイトルを追加します。
- 投稿に注目の画像を追加します。
- DiviBuilderをデプロイします。
- ゼロから構築することを選択
- [Diviページ設定]で、[サイドバーなし]ページレイアウトを選択し、投稿タイトルを非表示にすることを選択します。
- 次に、[フロントエンドでビルド]をクリックするか、バックエンドでデスクトップビューモードを展開して、ページを視覚的にデザインできるようにします。
デザインごとに新しい投稿を作成するか、1つの投稿に複数の投稿タイトルデザインを追加するかはあなた次第です。 1つの投稿に複数の投稿タイトルを追加すると、同じページタイトルと注目の画像が継承されることに注意してください。
＃1抽象的なフレーミング
このすっきりとした投稿タイトルのデザインには、注目の画像や投稿タイトルに適した微妙な抽象的なフレーミング要素が含まれています。 フレーミング効果は、カスタムの境界線とボックスシャドウのスタイルを使用して作成されます。
これがその方法です。
この記事の冒頭で説明したように、必ず新しい投稿を設定してください（タイトルの追加、注目の画像、サイドバーページレイアウトなし、デフォルトの投稿タイトルの非表示）。 1列の行を持つ新しいセクションを投稿に追加します。 次に、投稿タイトルモジュールを行に追加します。
[投稿のタイトル設定]で、注目の画像の配置を次のように設定します。
注目の画像配置：タイトルの上
次に、更新して背景グラデーションを追加し、モジュールの右下隅に小さな抽象的なデザイン要素を追加します。
背景グラデーションの左の色：rgba（0,0,0,0.06）
背景グラデーションの右の色：rgba（0,0,0,0）
グラデーションタイプ：ラジアル
半径方向：右下
開始位置：10％
終了位置：0％
残りのデザインを次のように更新し続けます。
タイトルフォント：Josefin Sans
タイトルテキストの配置：右
タイトルテキストサイズ：36px
タイトルラインの高さ：1.7em（デスクトップ）、1.3em（タブレットとスマートフォン）
メタフォント：Josefin Sans
メタフォントスタイル：TT
メタテキストの配置：左
メタ文字の間隔：2px
メタラインの高さ：2em
カスタムマージン：-5vwトップ
カスタムパディング：上5vw、下5vw、左5vw、右5vw
右ボーダー幅：4px
-5vwマージンは、行に追加する左の境界よりも右の境界が上になるように、モジュールを行の外側に引き上げます。
次に、ボックスシャドウを使用して抽象的なデザイン要素を追加しましょう。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：112px
ボックスシャドウの垂直位置：85px
ボックスシャドウスプレッド強度：-80px
影の色：rgba（224,43,32,0.3）
設定を保存する。
次に、行設定を開いてサイズを変更し、境界線とボックスシャドウを使用してフレームデザインの左側を作成します。
カスタム幅：700px
右ボーダー幅：4px
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：112px
ボックスシャドウの垂直位置：85px
ボックスシャドウスプレッド強度：-80px
影の色：rgba（224,43,32,0.3）
それでは、最終的なデザインを確認しましょう。
＃2重複するテキストと注目の画像
2列の行を持つ新しいセクションを作成します。 次に、左側の列に画像モジュールを追加します。
これは、動的コンテンツを使用した注目の画像として機能します。 画像設定を開き、モック画像を削除して、画像プレビューボックスの右上にある動的コンテンツアイコンをクリックします。 次に、リストから[注目の画像]を選択して、注目の画像をページに追加します。
次に、投稿タイトルモジュールを右側の列に追加します。 設定を開き、[注目の画像を表示]オプションを[いいえ]に設定して、注目の画像を非表示にします。
次に、投稿タイトルモジュールに背景グラデーションを追加します。
背景グラデーションの左の色：#ffffff
背景グラデーションの右の色：rgba（255,255,255,0）
これは、画像に重なるように負のマージンを追加すると表示されます。
残りのデザインを次のように更新します。
タイトルフォント：Fira Sans Condensed
タイトルフォントの太さ：超軽量
タイトルテキストサイズ：80px（デスクトップ）、70px（タブレット）、45px（スマートフォン）
メタフォント：Fira Sans Condensed
メタフォントスタイル：TT
メタテキストの配置：右
メタテキストの色：#cccccc
メタ文字の間隔：2px
カスタムマージン：残り-20％（デスクトップ）、0％（タブレットとスマートフォン）
カスタムパディング：上5vw、下5vw、左30px
次に、タイトルの下に線を作成するためにボックスシャドウを付けましょう。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：80px
ボックスシャドウの垂直位置：82px
ボックスシャドウスプレッド強度：-80px
設定を保存し、行設定を開いてガター幅を調整します。
側溝幅：1
列の高さを等しくする：はい
次に、最終的なデザインを確認します。
代替の丸みを帯びた画像デザイン
わずかな調整を加えるだけで、注目の画像を円形にし、投稿タイルを垂直方向の中央に調整できます。 これを行うには、画像設定を開き、以下を更新します。
丸みを帯びた角：50％
次に、行設定を開き、メイン要素の下に次のカスタムCSSを追加します。
align-items: center;
これは、[列の高さを均等化]が[はい]に設定されている場合にのみ機能します。これにより、flexプロパティがアクティブになり、アイテムを垂直方向に揃えることができます。 
これが最終的なデザインです。
＃3読みやすさのためのユニークなコンテンツの背景
この投稿タイトルのデザインには、背景のグラデーションが組み込まれており、注目の画像の背景でタイトルとメタテキストが読みやすくなっています。
これがその方法です。
1列の行で新しいセクションを作成します。 次に、投稿タイトルモジュールを行に追加します。
次に、投稿タイトルモジュールの設定を更新して、注目の画像を非表示にします。
タイトルフォント：Abril Fatface
タイトルテキストの色：＃121212
タイトルテキストサイズ：75px（デスクトップ）、50px（タブレット）、30px（スマートフォン）
タイトル文字の間隔：2px
タイトルラインの高さ：1.1em
メタフォント：Roboto Condensed
メタテキストの色：#ffffff
メタテキストサイズ：16px
メタ文字の間隔：2px
メタラインの高さ：2em
幅：60％（デスクトップ）、90％（タブレット）、100％（スマートフォン）
カスタムパディング：残り3vw
次に、メタテキストの背景として機能するボックスシャドウを追加して、読みやすくしましょう。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：-32px
ボックスシャドウカラー：＃121212
次に、動的コンテンツを使用して、注目の画像をセクションの背景に追加します。 セクション設定を開き、背景画像プレビューボックスの右上にある動的コンテンツアイコンをクリックします。 次に、リストから注目画像を選択して、注目画像をセクションに追加します。
次に、グラデーションの背景要素を追加して、投稿のタイトルテキストを読みやすくします。 グラデーションタブをクリックして、以下を更新するだけです。
背景グラデーションの左の色：rgba（255,255,255,0.76）
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーションタイプ：ラジアル
半径方向：左上
開始位置：40％
終了位置：0％
背景画像の上にグラデーションを配置：はい
それでは、最終的なデザインを見てみましょう。
＃4デュアル注目画像による煙突効果
このデザインには、投稿タイトルモジュールとセクションの背景を構成する要素を積み重ねる効果を与えるために、いくつかのボックスシャドウが組み込まれています。 また、独自のデザイン要素のために、2つのバージョンの注目画像を（動的に）使用します。
これがその方法です。
1列の行で新しいセクションを作成します。 次に、投稿モジュールを行に追加し、注目の画像の配置をタイトル/メタ背景画像に更新します。
次に、次のように設計設定を更新します。
テキストの色：明るい
テキストの背景色：rgba（1,59,104,0.79）
テキストの向き：中央
タイトルフォント：Roboto Condensed
タイトルフォントの太さ：軽い
タイトルテキストサイズ70px（デスクトップ）、50px（タブレット）、30px（スマートフォン）
タイトルラインの高さ：1.3em
メタフォントの太さ：軽い
メタフォントスタイル：TT
メタテキストの色：#cccccc
メタ文字の間隔：1px
カスタムパディング：10vw上部、0px下部
次に、最初のボックスシャドウを追加して、最初のスタッキングレイヤーを作成しましょう。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：-46px
影の色：#ffffff
これは、タイトルとメタテキストを分割するためのクリエイティブな方法としても機能することがわかります。
次に、設定を保存して、セクション設定を開きます。 注目の画像を動的コンテンツとして背景に追加します。 次に、次のようにグラデーションを追加します。
背景グラデーションの左の色：rgba（1,59,104,0.79）
背景グラデーション右の色：rgba（1,59,104,0.79）
背景画像の上にグラデーションを配置：はい
この追加の注目画像の背景デザインは、投稿タイトルに、新しい注目画像ごとに動的に変化する独自のデザインを与える独自の方法です。
次に、カスタムパディングを追加します。
カスタムパディング（デスクトップ）：10vw上部、0px下部
カスタムパディング（スマートフォン）：0vw上、0px下
次に、別のボックスシャドウを追加して、煙突効果を継続します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：-92px
影の色：#ffffff
デザインを完成させるには、行の設定を開き、以下を更新します。
この行を全幅にする：はい
側溝幅：1
カスタムパディング（デスクトップ）：上0px、下0px、左6％、右6％
カスタムパディング（スマートフォン：上0px、下0px、左0％、右0％
次に、最終的なデザインを確認します。
最終的な考え
これらの投稿タイトルのデザインを使用すると、Divi投稿タイトルモジュールとDiviBuilderで何ができるかをかなりよく理解できているはずです。 いくつかのデザインの調整と、注目の画像の動的コンテンツの力を組み合わせることで、ブログ投稿に無数のユニークな投稿タイトルスタイルを作成できます。 どちらかといえば、これらがあなた自身でいくつかの素晴らしい投稿タイトルを作成するようにあなたを刺激することを願っています。
関連するデザインのインスピレーションについては、美しく魅力的なダイナミックなブログ投稿のヒーローセクションに関するブログ投稿と、Diviで壊れたグリッドレイアウトを設計する秘訣をご覧ください。
コメントでお返事をお待ちしております。
乾杯！