DiviでCTAとホバーオーバーレイを使用してレスポンシブ画像グリッドレイアウトを作成する方法

レスポンシブグリッドレイアウトは、すべてのデバイスで見栄えがするため、リンク（またはCTA）を含む画像のコレクションを紹介するのに最適です。 Diviビルダーには、ポートフォリオグリッド、ブロググリッド、ギャラリーグリッドなど、グリッド表示を使用するいくつかの素晴らしい組み込みモジュールがあります。 ただし、CTAを使用して独自のカスタム画像グリッドレイアウトを作成したい場合があります。 これにより、プラグインを使用せずに、グリッドアイテムごとに表示するデザインとコンテンツをより細かく制御できます。

今日は、Diviの組み込みのデザインオプションを使用して、CTAでレスポンシブ画像グリッドレイアウトを作成する方法を紹介します。 これを行うために、特殊なセクションを使用してグリッドを整理し、Call toActionモジュールを使用して各画像にオーバーレイを追加する方法を工夫します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

DiviでCTAとホバーオーバーレイを使用してレスポンシブ画像グリッドレイアウトを作成する

パート1：特別なセクションレイアウトの作成

まず、左側のサイドバーのレイアウトが3分の1、2 / 3の新しい専門セクションを追加します。

デフォルトの通常セクションを削除して、新しい専門セクションのみが残るようにします。

セクション設定を開き、次のように背景色を更新します。

• 背景色：＃84dbda

[デザイン]タブで、サイズ、幅、パディングのオプションを次のように更新します。

• 列の高さを等しくする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 内幅：100％
• 内側の最大幅：1080px（デスクトップ）、500px（タブレットと電話）
• パディング：12vh上部、12vh下部
• 列1のパディング：0px上、0px下

セクションスタイルを配置したら、セクションに1列の行を追加します。

行設定

次のように行設定を更新します。

• 側溝幅：1
• 列の高さを等しくする：はい
• パディング：0px上、0px下

2番目の行を作成するには、最初の行を複製します。

次に、重複する行を2列のレイアウトで更新します。

パート2：列の背景画像として画像を追加する

すべての行と列が配置されたので、画像をグリッドレイアウトに追加する準備が整いました。 画像がグリッドレイアウト内でレスポンシブであることを確認するために、セクション全体の4つの列のそれぞれに背景画像として各画像を追加します。 各背景画像の背景サイズは「カバー」であるため、ブラウザのサイズを調整すると、画像は常に列全体に表示されます。

一番上の行と列の背景画像

開始するには、一番上の行の列の列設定を開きます。

次に、背景画像を列に追加します。

下の行の列の背景画像

次に、2番目（下）の行の列1の設定を開き、その列にも背景画像を追加します。

次に、同じ行の列2に背景画像を追加します。

専門セクション列1背景画像

最後に、専門セクションの設定を開き、列1に背景画像を追加します。

パート3：各列に画像オーバーレイの召喚状を追加する

背景画像がグリッドレイアウトの各列に追加されたので、アクションモジュールの呼び出しを各列に追加します。ボタンCTAを使用して画像のオーバーレイとして機能します。 列の背景画像の上にオーバーレイとしてアクション呼び出しモジュールを使用すると、カスタムの背景オーバーレイスタイルとホバー効果を画像に簡単に追加できます。 さらに、画像にカスタムCTAを追加するオプションもあります。 この例では、Call to actionモジュールのbutton要素を使用するだけですが、コンテンツオプションを使用して、ボタンの上のタイトルまたは本文のコンテンツに簡単に追加できます。

召喚状モジュールの作成

最初の画像オーバーレイのアクション呼び出しを追加するには、アクションモジュールの呼び出しを一番上の行の列に追加します。

コンテンツ

召喚状の内容を次のように更新します。

• タイトルテキストを削除する
• 本文を削除する
• ボタンリンクURL：＃
• 背景色：透明（デスクトップ）、rgba（255,235,77,0.5）（ホバー）

注：ボタンのリンクURLに「＃」を追加することは、ボタンが表示されるようにするための今のところ単なるフィラーです。 ホバーに半透明の背景色を追加すると、モジュール（およびその背後の画像）にホバーしたときに、素敵なカスタムオーバーレイカラーが得られます。

バトンスタイル

次のように、ボタンの召喚状のデザイン設定を更新し続けます。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：22px
• ボタンのテキストの色：＃ffeb4d
• ボタンの背景色：＃000（デスクトップ）、＃ec5f00（ホバー）
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px
• ボタンフォント：流砂
• ボタンのフォントの太さ：半太字
• ボタンのパディング：上0.5em、下0.5em、左2em、右2em

サイズ設定、パディング、および境界線

次に、モジュールの背後にある列の背景画像を表示するために、モジュールにある程度の高さがあることを確認する必要があります。 これを行うために、モジュールの上部と下部にパディングを追加します。 また、モジュールに微妙な境界線を追加して、グリッドレイアウト内の他の画像から少し分離できるようにします。

以下を更新します。

• 幅：100％
• パディング：15vh上部、15vh下部
• 下の境界線の幅：5px
• 左ボーダー幅：5px
• ボーダーカラー：rgba（255,255,255,0.5）

注：パディングにvh長さの単位を使用すると、ブラウザのビューポートの高さを基準にしてパディング値が作成されます。 したがって、ブラウザウィンドウの高さが増減すると、画像グリッドアイテムの高さが増減します。

CTAコンテンツを垂直方向に中央揃え

召喚状モジュール内のコンテンツが垂直方向の中央に配置されたままになるように、flexプロパティを使用してカスタムCSSの小さなスニペットを追加できます。

[詳細設定]タブで、次のCSSをメイン要素に追加します。

display:flex;
flex-direction:column;
justify-content:center;

他の列へのCalltoActionオーバーレイの追加

これで、最初のアクション呼び出しモジュールのスタイルが設定されたので、モジュールをコピーして、レイアウト全体の他の3列に貼り付けます。これには、下の行の2列と専門セクションの列1が含まれます。

アクションモジュールの呼び出しが特殊セクションの列1の高さ全体に及ぶことを確認するには、min-heightを100％に更新します。

• 最小の高さ：100％

通常、これは通常の列のモジュールでは機能しません。 ただし、列のflexプロパティにより、モジュールは基本的にflexの子要素であるため、100％の最小高さの値が機能します。

それでおしまい。 最終結果を確認してみましょう。

最終結果

これは、ライブページでのレスポンシブ画像グリッドレイアウトの最終結果です。

そして、これがホバー効果です。

そして、ブラウザのサイズを調整するときにデザインがどのように反応するかを次に示します。

最終的な考え

レスポンシブ画像グリッドレイアウトは、引き続き多くのWebサイトで人気のある側面です。 背景画像とCallto Actionオーバーレイを組み合わせた視覚的な側面により、これらの重要なナビゲーションリンクを実際にポップにすることができます。 さらに、画像グリッドレイアウトのレスポンシブな性質は、常に必要なすべてのデバイスで見栄えがします。 それがあなたの次のプロジェクトのために手に入るといいのですが。

コメントでお返事をお待ちしております。

乾杯！