Diviでファンアウトホバー効果を使用してETのレイアウトパックプレビューを再作成する方法

公開: 2019-07-05

Elegantthemes.comの新しいWebサイトデザインの優れた機能の1つは、Divi製品ページの既成のレイアウトパックプレビューです。このデザインのユニークな点は、各レイアウトパックが、ホバーするとファンアウトする3つの別々の画像でどのように機能するかです。

今日は、Diviで同じ印象的なファンアウトホバー効果を使用して、レイアウトパックプレビューのデザインを再現する方法を紹介します。デザインはもう少し高度なので、Diviの組み込みデザインオプションと組み合わせてカスタムCSSを使用します。しかし、心配しないでください。構築に時間がかからず、結果は間違いなく価値があります。

始めましょう。

スニークピーク

ファンアウトホバー効果のあるレイアウトパックのプレビューを見てみましょう。下の行には、ホバー時に画像を個別に回転させる2番目のホバー効果があることに注意してください。

diviレイアウトパックプレビューファンアウトホバー効果

デスクトップの3列のレイアウトは、タブレットと電話の1列に調整されます。

diviレイアウトパックプレビューファンアウトホバー効果

レイアウトパックプレビューファンアウトホバーエフェクトレイアウトを無料でダウンロード

diviレイアウトパックプレビューファンアウトホバー効果

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

開始するには、次の設定が必要です。

Diviテーマがインストールされ、アクティブになっています
Diviのフロントエンド（ビジュアル）ビルダーでゼロから構築するために作成された新しいページ。
モックコンテンツに使用する3つの画像。最良の結果を得るには、画像は約250px x375pxである必要があります。これらはWebページのプレビューであるため、任意のページデザインの独自のスクリーンショットを作成し、それに応じて各画像をトリミング/サイズ変更できます。

その後、Diviでいくつかのホバータブの作成を開始するための空白のキャンバスが作成されます。

Diviでファンアウトホバー効果を使用してETのレイアウトパックプレビューを再作成

セクションと行の構築

3列の行を持つ新しい通常のセクションを作成します。

diviレイアウトパックプレビューファンアウトホバー効果

モジュールを追加する前に、行設定を開き、次のようにサイズと間隔を更新します。

側溝幅：2
幅：90％
最大幅：1120px（デスクトップ）、400px（タブレット）

diviレイアウトパックプレビューファンアウトホバー効果

次に、タブレットの行にパディングを追加して、モバイルの間隔を広げます。

列1のパディング：20％下
列2のパディング：20％下
列3のパディング：20％下

diviレイアウトパックプレビューファンアウトホバー効果

画像の追加1

これで、レイアウトパックのプレビューデザインを構成する3つの画像のうち最初の画像を追加する準備が整いました。先に進み、画像モジュールを列1に追加します。

diviレイアウトパックプレビューファンアウトホバー効果

次に、画像を画像モジュールにアップロードします（サイズは約250px x 375pxである必要があります）。

diviレイアウトパックプレビューファンアウトホバー効果

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

画像の配置：中央
幅：220px
垂直オーバーフロー：非表示
Zインデックス：4

diviレイアウトパックプレビューファンアウトホバー効果

（画像自体ではなく）画像コンテナをターゲットにする必要があるため、カスタムCSSを使用して、カスタムの高さ、ボックスシャドウ、および境界線の半径を追加する必要があります。次のCSSをメイン要素に追加します。

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

これにより、後でホバー効果を追加するときに、画像コンテナのwithで画像を調整できます。ご覧のとおり、カスタムの高さが240pxで、オーバーフローが「非表示」に設定されているため、画像の下部がわずかに切り取られています。

diviレイアウトパックプレビューファンアウトホバー効果

画像の追加2

2番目のイメージを作成するには、列1の最初のイメージモジュールの下に新しいイメージモジュールを追加します。次に、新しいイメージ（250X350）をモジュールにアップロードします。

diviレイアウトパックプレビューファンアウトホバー効果

次に、画像1の後ろと少し左に画像を配置する必要があります。これを行うには、垂直オーバーフローを非表示にしてカスタムの幅と高さを追加する必要があります（画像1の場合と同様）。ここでの主な違いは、画像1の後ろの列の左上に表示されるように、画像に絶対位置を指定する必要があることです。

これを行うには、以下を更新します。

幅：180px
垂直オーバーフロー：非表示

次に、次のカスタムCSSをメイン要素に追加します。

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

diviレイアウトパックプレビューファンアウトホバー効果

画像の追加3

これで、3番目の画像を追加して、レイアウトパックのプレビューを完了する準備ができました。この時点で、ワイヤーフレームビューモードを使用することは理にかなっています。これは、ビジュアルビルダーの使用をより困難にするオーバーラップがあるためです。ワイヤーフレームモードを展開し、イメージを複製します2。

diviレイアウトパックプレビューファンアウトホバー効果

画像2で使用した設定のほとんどを引き継ぐため、画像を複製しました。唯一の違い（新しい画像を除く）は、画像を左ではなく右に配置する必要があることです。

複製したイメージ（イメージ3）を開き、イメージモジュールを新しいイメージ（250×375）で更新します。

その後、変更することで、カスタムCSSを更新しleftに位置プロパティをright positionプロパティ。 CSSに他の変更を加える必要はありません。

diviレイアウトパックプレビューファンアウトホバー効果

必要に応じて、次のCSSをコピーしてメイン要素に貼り付け、現在のCSSを置き換えることができます。

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

ここまでは順調ですね

これがこれまでの最終結果です。

diviレイアウトパックプレビューファンアウトホバー効果

デザインはそのままでも本当に綺麗ですが、ファンアウトホバー効果でワンランク上のデザインにしましょう。

ファンアウトホバー効果CSSの追加

通常、1つの画像だけを扱っている場合は、組み込みのDiviオプションを使用してホバー効果を簡単に追加できます。ただし、このファンアウトホバー効果では、親列にカーソルを合わせるときに、複数の子要素（画像）のホバー状態を一度に適用する必要があります。列にカーソルを合わせると、次のように画像を次のように調整できます。

ホバー時にスムーズに移行するために、各画像に移行期間を追加します。
画像1を幅180px、高さ240pxに調整します。これにより、画像コンテナがより高く、より狭くなり、より多くの画像が表示されます。
画像2と3を調整して、幅を160ピクセル、高さを220ピクセルにします。これにより、画像の高さが高くなり、狭くなり、より多くの画像が表示されます。
画像2を調整して、反時計回りに5度回転し、少し左に移動します。我々は-5度値を追加することによってこれを行うことができるtransform:rotate性および値調整left 0に位置プロパティを。
画像3を調整して、時計回りに5度回転し、少し右に移動します。私たちは、5度の値を追加することによってこれを行うことができますtransform:rotateプロパティの値に調整right 0にpositionプロパティを。

これらのホバー効果に必要なカスタムCSSを追加するには、画像を含む行にカスタムCSSクラスを追加する必要があります。これにより、特定の行の画像にのみカスタムCSSを適用できるようになります。

行設定を開き、次のCSSクラスを追加します。

CSSクラス：ファンアウト画像

diviレイアウトパックプレビューファンアウトホバー効果

カスタムCSSをページに追加するには、ページ設定を開き、[詳細設定]タブで次のカスタムCSSを追加します。

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

diviレイアウトパックプレビューファンアウトホバー効果

cssの各スニペットの上にコメントを追加して、それぞれが何をしているかを思い出させます。

終わったら。最終結果を確認してください。

最終結果

diviレイアウトパックプレビューファンアウトホバー効果

オプションのホバー効果：ホバーで画像1と2を別々に回転させる

レイアウトパックのプレビュー画像に別のレベルのエンゲージメントを追加するために、画像1と画像2の回転を最初のホバー効果とは別に発生させることができます。これにより、ユーザーは独自の方法で画像を操作できるようになります。必要に応じて、これらの画像に個別のリンクやライトボックスプレビューを追加することもできます。

これがあなたのやり方です。

ページ設定カスタムCSSから変換プロパティを取得する

まず、列にカーソルを合わせたときに画像を回転させる2行のカスタムCSSを取り出す必要があります。ページ設定のカスタムCSSを開き、以下を取り出します。

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

diviレイアウトパックプレビューファンアウトホバー効果

画像2のホバーに変換プロパティを追加する

次に、画像2の画像モジュール設定を開き、Diviの組み込みの変換オプションを使用して、ホバー状態に対して以前に削除したものと同じ変換回転値を追加します。

変換回転Z軸（ホバー）：-5度
変換変換X軸（ホバー）：-20px

diviレイアウトパックプレビューファンアウトホバー効果

画像3のホバーに変換プロパティを追加する

次に、画像3の画像モジュール設定を更新して、変換回転プロパティを追加します。

変換回転Z軸（ホバー）：5度
変換変換X軸（ホバー）：20px

diviレイアウトパックプレビューファンアウトホバー効果

次に、最終結果を確認します。

最終結果

diviレイアウトパックプレビューファンアウトホバー効果

画像へのリンクの追加

特定のレイアウトパックまたはページデザインを別のページに表示するリダイレクトリンクを作成する場合は、パック内の3つの画像すべてに同じリンクURLを追加することをお勧めします。これを行うには、各画像モジュールを開き、リンクURLを追加します。

diviレイアウトパックプレビューファンアウトホバー効果

他の列への新しいレイアウトパックプレビューの追加

デザインを完成させるために、列1の3つの画像をコピーして、列2と列3に貼り付けることができます。

diviレイアウトパックプレビューファンアウトホバー効果

その後、2列目と3列目の各画像を新しい画像で更新するだけです。

それでおしまい！

最終設計

これが最終的なデザインです。上の行は、列にカーソルを合わせたときのホバーファンアウトホバー効果を示しています。 2行目は、画像2と3に別々に追加された2次ファンアウトホバー効果を示しています。

diviレイアウトパックプレビューファンアウトホバー効果

デスクトップの3列のレイアウトは、タブレットと電話の1列に調整されます。

diviレイアウトパックプレビューファンアウトホバー効果

最終的な考え

ファンアウトホバー効果は美しく魅力的なデザイン要素であり、独自のWebサイトでページレイアウトを表示するために使用できます。このチュートリアルで説明したカスタムCSSと組み込みのDivi設定の組み合わせは、魔法のように機能します。そして、このセットアップは、Diviビルダーを使用してより多くのデザインを探索するための優れた出発点として役立ちます。うまくいけば、これはあなたのポートフォリオを次のレベルに引き上げるためのいくつかのインスピレーションをあなたに与えるでしょう。

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

乾杯！

Diviでファンアウトホバー効果を使用してETのレイアウトパックプレビューを再作成する方法

スニークピーク

レイアウトパックプレビューファンアウトホバーエフェクトレイアウトを無料でダウンロード

無料でダウンロード

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

始めるために必要なもの

Diviでファンアウトホバー効果を使用してETのレイアウトパックプレビューを再作成

セクションと行の構築

画像の追加1

画像の追加2

画像の追加3

ここまでは順調ですね

ファンアウトホバー効果CSSの追加

最終結果

オプションのホバー効果：ホバーで画像1と2を別々に回転させる

ページ設定カスタムCSSから変換プロパティを取得する

画像2のホバーに変換プロパティを追加する

画像3のホバーに変換プロパティを追加する

最終結果

画像へのリンクの追加

他の列への新しいレイアウトパックプレビューの追加

最終設計

最終的な考え

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