Diviでカスタム画像オーバーレイをデザインする方法

公開: 2020-09-16

画像オーバーレイは、Webデザインで長い間使用されてきました。画像にカーソルを合わせると、追加のコンテンツやデザイン要素が表示されるため、訪問者を引き付けるのに最適です。これは非常に人気のあるデザイン機能であるため、画像オーバーレイの作成専用のプラグインが数多くあります。ただし、プラグインによっては、かなり制限されている場合や、必要なものに対して少しやり過ぎになる場合があります。そのため、Diviでこれらを自分で構築するためのノウハウを持っていると役立ちます。

このチュートリアルでは、Diviでカスタム画像オーバーレイをデザインする方法を紹介します。これらのオーバーレイは、画像にカーソルを合わせると変更され、要素が表示されます。最良の部分は、Diviの組み込みのデザインオプションを使用して、画像オーバーレイのデザインを完全に制御できることです。また、カスタムCSSのスニペットをいくつか使用すると、ゴージャスな画像オーバーレイを作成して、サイトを次のレベルに引き上げることができます。プラグインは必要ありません。

始めましょう！

スニークピーク

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

Divi画像オーバーレイレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

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

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

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

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

divi通知ボックス

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

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

始めるために必要なもの

コーナータブの拡張

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

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

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

Diviでカスタム画像オーバーレイを作成する

セクション、行、および列の作成

開始するには、デフォルトセクション内に3列の行を作成します。

divi画像オーバーレイ

セクション設定を開き、次の背景色を追加します。

背景色：＃3a0ca3

divi画像オーバーレイ

次に、列1の設定を開き、以下を更新します。

CSSクラス：et-overlay-container
水平オーバーフロー：非表示
垂直オーバーフロー：非表示

CSSクラスは、作成するオーバーレイアイテムのホバー効果をトリガーするために必要です。列コンテナを超えて画像を拡大縮小するホバー効果があるため、非表示のオーバーフローが必要です。

divi画像オーバーレイ

画像の追加

セクション、行、列の準備ができたので、先に進んで新しい画像モジュールを列1に追加します。これがオーバーレイデザインの背後にあるメイン画像になります。

divi画像オーバーレイ

横向きではなく縦向きの画像をアップロードします。私はおよそ800pxx1050pxのものを使用しています。すべてのブラウザサイズで列の全幅にまたがるのに十分な幅があることを確認してください。

（注：横向きの画像を使用できますが、オーバーレイ要素が重ならないように、それに応じてオーバーレイ要素の位置を調整する必要がある場合があります。）

divi画像オーバーレイ

[デザイン]タブで、以下を更新します。

マージン：0px下

divi画像オーバーレイ

[詳細設定]タブで、次のCSSクラスを追加します。

CSSクラス：et-overlay-image

divi画像オーバーレイ

仕切りモジュールを使用した画像オーバーレイカラーの追加

画像オーバーレイカラーを作成するには、仕切りモジュールを使用します。アイデアは、仕切りが列の高さと幅全体に広がり、画像の上に完全に収まるようにすることで、画像の上にカバーを作成することです。所定の位置に配置されたら、仕切りモジュールの背景色を調整して、必要なオーバーレイ色を取得できます。

まず、画像の下に仕切りモジュールを追加します。

divi画像オーバーレイ

次に、仕切りを絶対として配置して、画像の上に配置します。

位置：絶対

divi画像オーバーレイ

[コンテンツ]タブで、以下を更新します。

仕切りを表示：いいえ
背景色：rgba（247,37,133,0.8）

divi画像オーバーレイ

次に、仕切りの高さと幅を更新します。

幅：100％
高さ：100％

divi画像オーバーレイ

デザインが配置されたら、次のCSSクラスを仕切りに追加します。

et-overlay-item

（注：このクラスは、ホバー時にのみ表示するすべてのオーバーレイデザイン要素に追加する必要があります。要素を最初に非表示にしたくない場合は、省略してください。）

divi画像オーバーレイ

デザイン要素/モジュールを追跡しやすくするために、レイヤーをモーダルに開き、仕切りモジュールにラベルを付けます（「オーバーレイカラー」）。

divi画像オーバーレイ

オーバーレイ見出しテキストの追加

仕切りモジュールの下に、新しいテキストモジュールを追加します。これは、ホバー時に画像の上部に表示されるオーバーレイ見出しテキストとして機能します。

divi画像オーバーレイ

H2見出しでコンテンツを更新します。

<h2>Coaching</h2>

次に、後で参照できるようにテキストモジュールのラベルを更新します。

divi画像オーバーレイ

テキストデザイン設定で、以下を更新します。

テキストの配置：中央
テキストの色：明るい

divi画像オーバーレイ

見出し2フォント：鵜ガラモンド
見出し2フォントの太さ：太字
見出し2テキストサイズ：40px

divi画像オーバーレイ

幅：100％
最大幅：85％

divi画像オーバーレイ

[詳細設定]タブで、次のように位置を更新します。

位置：絶対
場所：トップセンター
垂直オフセット：10％

（注：画像のアスペクト比のサイズによっては、垂直方向のオフセットを調整する必要がある場合があります。たとえば、横向きの画像ではオフセットを少なくする必要がある場合があります）

divi画像オーバーレイ

次に、次のCSSクラスをテキストモジュールに追加します。

CSSクラス：et-overlay-itemmove-down

「et-overlay-item」クラスに加えて、カスタムCSSを使用してホバー時に見出しをわずかに下に移動するために、「move-down」クラスを追加しています。

divi画像オーバーレイ

オーバーレイ本文テキストの作成

オーバーレイ本文テキストを作成するために、オーバーレイ見出しに使用されるテキストモジュールを複製できます。複製の設定を更新する前に、ラベルを「オーバーレイボディ」に変更してください。

divi画像オーバーレイ

新しいテキストモジュールのテキスト設定を開き、段落テキストの数文で本文のコンテンツを更新します。

divi画像オーバーレイ

[詳細設定]タブで、モジュールの絶対位置を中央に変更します。

divi画像オーバーレイ

これをホバー（表示のみ）で移動させたくないので、CSSクラスを更新して以下のみを含めます。

CSSクラス：et-overlay-item

divi画像オーバーレイ

オーバーレイボタンの作成

この画像の最後のオーバーレイ要素はボタンになります。ボタンを作成するには、「本文テキスト」テキストモジュールの下に新しいボタンモジュールを追加します。

divi画像オーバーレイ

デザインを変更する前に、ボタンの位置を次のように更新します。

位置：絶対
垂直オフセット：10％

divi画像オーバーレイ

これで、ボタンは画像の下部の中央に配置されます。

[詳細設定]タブで、CSSクラスを更新し、次のようにカスタムCSSのスニペットをメイン要素に追加します。

CSSクラス：et-overlay-itemmove-up
主な要素のCSS：
```
min-width: 15em
```

ホバー時にボタンを少し上に移動するために、ボタンに追加のクラスがあることに注意してください。これは、ホバー時に見出しテキストを下に移動することを補完するためです。

divi画像オーバーレイ

次に、次の設計設定を更新します。

ボタンの配置：中央
ボタンのテキストサイズ：14px
ボタンの背景色：＃4361ee
ボタンの境界線の幅：0px
ボタンの文字間隔：0.1em
ボタンのフォントの太さ：太字
ボタンのフォントスタイル：TT
パディング：上0.8em、下0.8em、左0px、右0px

divi画像オーバーレイ

コードモジュールを使用したカスタムCSSの追加

このオーバーレイデザインの他のいくつかのバージョンを作成する前に、オーバーレイホバー効果に必要なカスタムCSSを追加しましょう。これを行うには、ボタンの下にコードモジュールを追加します。

divi画像オーバーレイ

次に、次のCSSをコードコンテンツ内に貼り付けます。必要なスクリプトタグでコードをラップすることを忘れないでください。

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

divi画像オーバーレイ

必要に応じてCSSを調整できる場所を理解できるように、コードにコメントが付けられています。

より多くのデザインのために列を複製する

作業する空の列がすでに2つありますが、列全体を複製することで、最初の列内のすべてのモジュールとデザインを新しい列に転送する方が簡単です。これを行うには、レイヤーモーダルを開き、2つの空の列を削除してから、画像オーバーレイデザインを含む列を2回複製します。同じデザインの合計3つの列が必要です。

divi画像オーバーレイ

画像オーバーレイデザインの作成＃2

各列内にすべてのデザイン要素が配置されたので、デザインを微調整して追加の画像オーバーレイを作成できます。この次のデザインでは、ボタンを画像の中央に配置します（常に表示されます）。次に、見出しと本文のテキストを画像の上下から表示します。

本文の場所とCSSクラスを調整する

列2のオーバーレイ本文テキストモジュールの設定を開き、位置を更新します。

場所：下部中央
垂直オフセット：5％

divi画像オーバーレイ

次に、CSSクラスを次のように更新します。

CSSクラス：et-overlay-itemmove-up

divi画像オーバーレイ

ボタンの位置とCSSクラスを調整する

次に、列2のボタンの設定を開き、次の位置の場所を更新します。

場所：センターセンター

divi画像オーバーレイ

次に、ボタンを常に表示したいので、CSSクラスを取り出します。

divi画像オーバーレイ

仕切りモジュール（オーバーレイカラー）の設定を開き、次のように背景を変更します。

背景色：rgba（67,97,238,0.8）

divi画像オーバーレイ

次に、ボタンの設定を開き、背景色を変更します。

ボタンの背景色：＃f72585

divi画像オーバーレイ

画像とCSSクラスを調整する

次に、画像の設定を開き、新しい画像をアップロードします（必要な場合）。

divi画像オーバーレイ

次に、次のCSSクラスをイメージに追加します。

CSSクラス：et-overlay-image et-scale

「et-overlay-image」クラスに加えて、「et-scale」と呼ばれる追加のクラスがあり、画像のサイズを拡大して、ホバーにズームイン効果を作成することに注意してください。

divi画像オーバーレイ

画像オーバーレイデザインの作成＃3

次に、列3に3番目の画像オーバーレイデザインを作成します。

オーバーレイ本文のテキストコンテンツとCSSクラスを調整する

列3のオーバーレイ本文テキストモジュールの設定を開き、段落テキストの上にH2見出しを追加することから始めます。これで、2つは2つではなく1つのモジュール内に配置されます。

divi画像オーバーレイ

次に、CSSクラスを取り出して、テキストが画像の上に表示されたままになるようにします。

divi画像オーバーレイ

ボタンオフセットとCSSクラスを調整する

ボタンモジュールの設定を開き、位置の垂直オフセットを更新します。

垂直オフセット：5％

divi画像オーバーレイ

オーバーレイ見出しを削除

次に、オーバーレイ見出しテキストモジュールを削除します。

divi画像オーバーレイ

オーバーレイの色とCSSクラスを調整する

仕切りモジュール（オーバーレイカラー）の設定を開き、次のように背景を更新します。

背景グラデーション左色：rgba（67,97,238,0.8）
背景グラデーションの正しい色：rgba（247,37,133,0.8）
開始位置：25％
終了位置：75％

divi画像オーバーレイ

また、グラデーションオーバーレイを常に表示したいので、CSSクラスを削除します。

divi画像オーバーレイ

画像のCSSクラスを調整する

最後に、メイン画像に追加のCSSクラス（「et-rotate」）を追加して、ホバー時に画像を拡大縮小および回転します。

CSSクラス：et-overlay-image et-rotate

divi画像オーバーレイ

最後の仕上げ

最終結果を確認する前に、いくつかの調整を行う必要があります。

すべてのモジュールのデフォルトの下マージンを削除します

デフォルトでは、行設定のデフォルトのガター幅（3）により、各モジュールには30pxの下マージンがあります。これにより、オーバーレイデザインでのモジュールの配置が遅れる可能性があります。それらを取り出すには、デザイン内のいずれかの画像の画像モジュール設定を開きます。すでにマージンを0pxの下マージンで更新しているので、このマージンをすべてのモジュールに拡張できます。

マージン設定を右クリックして、「マージンの拡張」を選択します。

divi画像オーバーレイ

次に、ページ上のすべてのモジュールにマージンを拡張することを選択します。

divi画像オーバーレイ

重複するコードモジュールを削除する

最初の列を複製するときに持ち越された追加のコードモジュールを必ず削除してください。 1つだけ持っている必要があります。これは、レイヤーモーダルから簡単に実行できます。

divi画像オーバーレイ

最終結果

3つのデザインが完成したので、画像オーバーレイデザインの最終結果を確認しましょう。

そして、これがモバイルでのデザインです。オーバーレイホバー効果は、コードモジュールのカスタムCSSメディアクエリを介してデスクトップにのみ適用されます。したがって、オーバーレイは常にモバイルで表示されます。

divi画像オーバーレイ

最終的な考え

カスタム画像オーバーレイの作成は、実際にはとても楽しいものです。 Divi Builderで視覚的にテストできるデザインは無数にあり、ホバー効果を適用するのに必要なカスタムCSSはごくわずかです。オーバーレイアイテムのホバー効果にはカスタムCSSが必要ですが、組み込みのホバーオプションを利用して、各オーバーレイ要素を個別にターゲットにすることができます。

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

乾杯！

Diviでカスタム画像オーバーレイをデザインする方法

スニークピーク

Divi画像オーバーレイレイアウトを無料でダウンロード

無料でダウンロード

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

始めるために必要なもの

Diviでカスタム画像オーバーレイを作成する

セクション、行、および列の作成

画像の追加

仕切りモジュールを使用した画像オーバーレイカラーの追加

オーバーレイ見出しテキストの追加

オーバーレイ本文テキストの作成

オーバーレイボタンの作成

コードモジュールを使用したカスタムCSSの追加

より多くのデザインのために列を複製する

画像オーバーレイデザインの作成＃2

本文の場所とCSSクラスを調整する

ボタンの位置とCSSクラスを調整する

画像とCSSクラスを調整する

画像オーバーレイデザインの作成＃3

オーバーレイ本文のテキストコンテンツとCSSクラスを調整する

ボタンオフセットとCSSクラスを調整する

オーバーレイ見出しを削除

オーバーレイの色とCSSクラスを調整する

画像のCSSクラスを調整する

最後の仕上げ

すべてのモジュールのデフォルトの下マージンを削除します

重複するコードモジュールを削除する

最終結果

最終的な考え

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