Diviで美しく魅力的なダイナミックなブログ投稿ヒーローセクションを作成する方法

公開: 2018-11-01

新しいアップデートがリリースされるたびに、デザインの可能性が高まります。 たとえば、動的コンテンツとホバーオプションを組み合わせると、驚くべき結果が得られます。 それを実証するために、Diviの組み込みオプションのみを使用して3つの見事な動的ブログ投稿ヒーローセクションを作成する方法を示します。 独自のバリエーションを作成するためのインスピレーションとなる例を1つずつ段階的に説明します。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、作成する3つの例すべての最終結果を見てみましょう。

例1

ブログ投稿ヒーローセクション

例2

ブログ投稿ヒーローセクション

例3

ブログ投稿ヒーローセクション

新しいブログ投稿を追加する

投稿の詳細

まず最初に、新しいブログ投稿を作成することから始めます。 タイトル、選択したカテゴリ、注目の画像を追加します。 それが完了したら、DiviBuilderを有効にします。

ブログ投稿ヒーローセクション

Diviページ設定

Visual Builderに切り替える前に、新しいブログ投稿の右上隅にあるDiviページ設定を変更してください。

  • ページレイアウト：全幅
  • 投稿タイトル：非表示

ブログ投稿ヒーローセクション

VisualBuilderに切り替えます

Visual Builderに切り替えて、さまざまな例の作成を開始しましょう。

ブログ投稿ヒーローセクション

モジュールの作成

新しいセクション+1列の行を追加する

それぞれの例に個別に飛び込む前に、動的コンテンツを含むテキストモジュールを作成することから始めます。 3つの例すべてを通して、これらの既成のモジュールを使用して設計を完成させます。 新しいセクションを追加したら、次の列構造を使用して新しい行をセクションに追加します。

ブログ投稿ヒーローセクション

投稿タイトルテキストモジュール

投稿タイトルの動的コンテンツを選択します

必要な最初の動的モジュールには、投稿タイトルが含まれます。 新しいテキストモジュールを追加し、動的コンテンツのリストで[投稿タイトル]を選択します。

ブログ投稿ヒーローセクション

テキスト設定

次に、テキスト設定に移動して、いくつかの変更を加えます。

  • テキストフォント：Lato
  • テキストフォントの太さ：太字
  • テキストの色：＃000000
  • テキストサイズ：58px（デスクトップ）、45px（タブレット）、35px（電話）
  • テキスト行の高さ：1em
  • テキストの向き：中央

ブログ投稿ヒーローセクション

間隔

間隔の値も変更します。

  • 下マージン：50px
  • トップパディング：10px
  • ボトムパディング：10px

ブログ投稿ヒーローセクション

公開日後のテキストモジュール

公開日後の動的コンテンツを選択します

必要な2番目のモジュールは、公開後の日付を含むテキストモジュールです。 先に進み、1つ追加して、動的コンテンツリストで[公開日を投稿]を選択します。

ブログ投稿ヒーローセクション

ブログ投稿ヒーローセクション

テキスト設定

次に、このモジュールのテキスト設定を変更します。

  • テキストフォントの太さ：軽い
  • テキストの色：＃000000
  • テキストサイズ：30px（デスクトップ）、20px（タブレット）、16px（電話）
  • テキスト文字の間隔：14px
  • テキストの向き：中央

ブログ投稿ヒーローセクション

間隔

下マージンも追加します。

  • 下マージン：50px

ブログ投稿ヒーローセクション

投稿カテゴリテキストモジュール

カテゴリの選択動的コンテンツ

追加する最後のモジュールは、投稿カテゴリの動的コンテンツを含むテキストモジュールです。

ブログ投稿ヒーローセクション

テキスト設定

テキスト設定に移動し、テキストの向きを変更します。

  • テキストの向き：中央

ブログ投稿ヒーローセクション

リンクテキスト設定

次に、リンクテキスト設定にいくつかの変更を適用します。

  • リンクフォントの太さ：超太字
  • リンクフォントスタイル：大文字
  • リンクテキストの色：＃000000
  • リンクテキストサイズ：15px
  • リンク文字の間隔：5px

ブログ投稿ヒーローセクション

間隔

次に下部のパディングを追加します。

  • ボトムパディング：20px

ブログ投稿ヒーローセクション

国境

そして、微妙な下の境界線で終わります。

  • 下の境界線の幅：1px
  • 下の境界線の色：＃000000

ブログ投稿ヒーローセクション

例1の作成

新しいセクションを追加

間隔

最初の例の作成を始めましょう！ 作成した前のセクションのすぐ下に、先に進んで新しいセクションを追加します。 その設定を開き、デフォルトのカスタムパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

ブログ投稿ヒーローセクション

新しい行を追加

カラム構造

次の列構造で新しい行を追加して続行します。

ブログ投稿ヒーローセクション

サイジング

この行のサイズ設定を開き、状況を変更します。

  • この行を全幅にする：はい
  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 列の高さを等しくする：はい

ブログ投稿ヒーローセクション

間隔

次に、いくつかのカスタム間隔値を追加します。

  • トップパディング：0px
  • ボトムパディング：0px
  • 列2の上部パディング：130px
  • 列2の下部パディング：130px
  • 列2の左パディング：50px
  • 列2の右パディング：50px

ブログ投稿ヒーローセクション

列1に画像モジュールを追加

注目の画像動的コンテンツを選択

最初の列にイメージモジュールを追加して続行します。 画像をアップロードする代わりに、モジュールを動的な注目画像にリンクします。

ブログ投稿ヒーローセクション

境界線のデフォルト

また、ホバーに右の境界線を追加しています。 これを行うには、最初に次のデフォルトの境界線幅を選択します。

  • 右ボーダー幅：0px

ブログ投稿ヒーローセクション

ボーダーホバー

そして、ホバーに次の設定を追加します。

  • 右ボーダー幅：24px
  • 右の境界線の色：#FFFFFF

ブログ投稿ヒーローセクション

ボックスシャドウのデフォルト

ボックスシャドウについても同じことが言えます。次のデフォルトのボックスシャドウ設定を適用します。

  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウブラー強度：0px
  • ボックスシャドウスプレッド強度：80px
  • 影の色：rgba（255,255,255,0）

ブログ投稿ヒーローセクション

ボックスシャドウホバー

そして、ホバーで状況を変更します。

  • ボックスシャドウの水平位置：600px
  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウブラー強度：0px
  • ボックスシャドウスプレッド強度：80px
  • 影の色：＃E4BAC7

ブログ投稿ヒーローセクション

トランジション

スムーズな移行を作成するには、[詳細設定]タブで移行期間を変更します。

  • 移行時間：1200ms

ブログ投稿ヒーローセクション

動的モジュールを列2に配置します

この例を完了するために残された唯一のことは、このチュートリアルの最初の部分で作成したモジュールを2番目の列に配置することです。

ブログ投稿ヒーローセクション

例2の作成

新しいセクションを追加

トップディバイダーのデフォルト

次のものへ！ 次の上部仕切りを使用して新しいセクションを追加します。

  • 仕切りスタイル：リストで検索
  • 仕切りの色：#FFFFFF
  • 仕切りの高さ：50px
  • 仕切りの配置：セクションの内容の上に

ブログ投稿ヒーローセクション

トップディバイダーホバー

ホバー時に仕切りの高さを変更します。

  • 仕切りの高さ：174px

ブログ投稿ヒーローセクション

間隔

次のセクションのすべてのカスタムパディングを削除します。 これにより、次のステップの1つで行とセクションが衝突できるようになります。

  • トップパディング：0px
  • ボトムパディング：0px

ブログ投稿ヒーローセクション

トランジション

スムーズな仕切り遷移を作成するには、[詳細設定]タブで遷移期間を変更します。

  • 移行時間：500ms

ブログ投稿ヒーローセクション

新しい行を追加

カラム構造

次に、次の列構造を使用してセクションに行を追加します。

ブログ投稿ヒーローセクション

背景色のデフォルト

次の背景色を追加します。

  • 背景色：#FFFFFF

ブログ投稿ヒーローセクション

背景色ホバー

ホバー時に背景色を変更します。

  • 背景色：rgba（255,255,255,0.56）

ブログ投稿ヒーローセクション

注目の画像動的背景画像

注目の画像を動的な行の背景画像としてもアップロードします。 その後、背景画像のブレンドを変更します。

  • 背景画像のブレンド：画面

ブログ投稿ヒーローセクション

サイジング

サイズ設定を変更して、行が画面の幅全体を占めるようにします。

  • この行を全幅にする：はい
  • カスタムガター幅を使用：はい
  • 側溝幅：1

ブログ投稿ヒーローセクション

間隔

そして、いくつかのカスタムパディング間隔値を追加します。

  • トップパディング：200px
  • ボトムパディング：200px
  • 左パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）
  • 右パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）

ブログ投稿ヒーローセクション

トランジション

最後になりましたが、移行期間を変更してスムーズな移行を作成します。

  • 移行時間：700ms

ブログ投稿ヒーローセクション

動的モジュールを列に配置

これで、すべての動的モジュールを行の列に配置でき、2番目の例が完了しました。

ブログ投稿ヒーローセクション

例3の作成

新しいセクションを追加

注目の画像動的背景画像

最後の例に移りましょう！ 新しいセクションを追加し、セクションの背景画像として注目の画像を選択します。

ブログ投稿ヒーローセクション

デフォルトの間隔

次に、セクションのデフォルトのカスタムパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

ブログ投稿ヒーローセクション

間隔ホバー

ホバーにカスタムマージンを追加して、縮小効果を作成します。

  • 左パディング：150px（デスクトップ）、50px（タブレット）、30px（電話）
  • 右パディング：150px（デスクトップ）、50px（タブレット）、30px（電話）

ブログ投稿ヒーローセクション

トランジション

移行期間も変更します。

  • 移行時間：500ms

ブログ投稿ヒーローセクション

新しい行を追加

カラム構造

セクション設定の変更が完了したら、次の列構造で新しい行を追加して続行します。

ブログ投稿ヒーローセクション

背景色のデフォルト

次の背景色を追加します。

  • 背景色：#ffffff

ブログ投稿ヒーローセクション

背景色ホバー

ホバー時に背景色を変更します。

  • 背景色：rgba（255,255,255,0.46）

ブログ投稿ヒーローセクション

グラデーションの背景

放射状のグラデーションの背景も追加します。

  • 色1：rgba（41,196,169,0）
  • 色2：#ffffff
  • グラデーションタイプ：ラジアル
  • 開始位置：29％
  • 終了位置：29％

ブログ投稿ヒーローセクション

サイジング

次に、行のサイズ設定を変更します。

  • この行を全幅にする：はい
  • カスタムガター幅を使用：はい
  • 側溝幅：1

ブログ投稿ヒーローセクション

間隔

そして、いくつかのカスタムパディング値を追加します。

  • トップパディング：200px
  • ボトムパディング：200px
  • 左パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）
  • 右パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）

ブログ投稿ヒーローセクション

トランジション

最後になりましたが、スムーズな移行のために移行期間を変更してください。

  • 移行時間：500ms

ブログ投稿ヒーローセクション

動的モジュールを列に配置

先に進み、作成済みのすべてのモジュールを行の列に配置します。

ブログ投稿ヒーローセクション

すべてのモジュールのテキストの向きを変更する

これらのモジュールについて変更する必要があるのは、テキストの向きだけです。これで完了です。

  • テキストの向き：左

ブログ投稿ヒーローセクション

プレビュー

すべての手順を完了したので、作成した3つの例すべてを最後に見てみましょう。

例1

ブログ投稿ヒーローセクション

例2

ブログ投稿ヒーローセクション

例3

ブログ投稿ヒーローセクション

最終的な考え

この投稿では、動的コンテンツをDiviのホバーオプションと組み合わせて、見事なブログ投稿のヒーローセクションを作成する方法を紹介しました。 これらの例は、間違いなく、独自のバリエーションを作成し、そこに掲載するブログ投稿をパーソナライズするように促します。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！