DiviのチームメンバーのBIOSにホバー効果を追加する方法

アバウトページがあなたのウェブサイトにクリックスルーを作成するのに素晴らしいことは周知の事実です。 それはまた、ウェブサイトの背後にある会社の人間的な部分を強調する一種のページでもあります。 これを知っていると、ページの構造、共有する情報の種類、インタラクションの作成方法に注意を払うことが重要であることがわかります。 アバウトページのエクスペリエンスを向上させるためにできることの1つは、従業員にスポットライトを当てるチームメンバーセクションを提供することです。 さらに、Diviの組み込みオプションのみを使用して、チームメンバーの写真にバイオホバー効果を追加できます。 これにより、作業中のページのスペースを節約し、あなたと訪問者の間にホバーインタラクションを作成できます。

このチュートリアルでは、そこに到達する方法を段階的に説明します。 アプローチができたら、自分のニーズに合わせてデザインスタイルをカスタマイズできるようになります。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。

デスクトップ

モバイル

再作成を始めましょう

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

新しいセクションを追加

間隔

次のカスタムパディング値を使用して、新しいページを作成するか、既存のページを開いて新しいセクションを追加します。

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

行＃1を追加

カラム構造

セクションへのカスタムパディングの追加が完了したら、セクション設定を閉じて、1つの列のみを使用して新しい行を追加できます。

テキストモジュールを追加

H2コンテンツを追加する

選択したH2コピーを使用して、タイトルのテキストモジュールを列に追加します。

H2テキスト設定

次に、H2テキスト設定に移動し、コピーの外観にいくつかの変更を加えます。

• 見出し2フォント：Cinzel
• 見出し2フォントスタイル：スモールキャップス
• 見出し2テキストの配置：中央
• 見出し2テキストサイズ：70px

仕切りモジュールを追加

可視性

タイトルのテキストモジュールのすぐ下に新しいディバイダーモジュールを追加して続行します。

• 仕切りを表示：はい

仕切りの色

[デザイン]タブに移動し、色設定を開いて、それに応じて仕切りの色を変更します。

• 仕切りの色：＃333333

サイジング

次に、仕切りのサイズを小さくして中央に配置します。

• 幅：26％
• モジュールの配置：中央

行＃2を追加

カラム構造

追加した前の行のすぐ下に、同じサイズの3つの列を使用して新しい行を追加します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を調整します。

• カスタム幅を使用：はい
• ユニット：PX
• カスタム幅：2000px
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

次に、間隔設定に移動し、カスタムマージンとパディング値を追加します。

• トップマージン：50px
• 下マージン：50px
• トップパディング：10px
• ボトムパディング：10px
• 左パディング：5px
• 右パディング：5px
• 列1、2、3の左パディング：5px
• 列1、2、3の右パディング：5px

ボックスシャドウ

また、次の設定で行にボックスシャドウを追加することで、行に少し奥行きを与えています。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-14px
• 影の色：rgba（0,0,0,0.3）

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

画像を画像モジュールにアップロードする

モジュールの追加を開始する時が来ました！ バイオホバー効果を実現するには、合計2つのモジュールが必要です。 画像モジュールと宣伝文モジュール。 画像モジュールは、紹介したいチームメンバーの画像を保持します。 一方、宣伝文句モジュールは、左下隅にアイコンを追加し、ホバー時にバイオを追加するために使用されます。 正方形サイズの画像を使用して、最初の列に画像モジュールを追加します。

フィルタ

私たちが作成しているデザインは完全にグレースケールです。 このグレースケールを画像に追加するには、フィルター設定に移動して、すべての彩度を削除します。

• 飽和度：0％

列1に宣伝文モジュールを追加する

コンテンツを追加する

列1の画像モジュールのすぐ下に新しい宣伝文モジュールを追加して続行します。タイトルフィールドにチームメンバーの名前を追加し、コンテンツボックスにチームメンバーに関する詳細情報を入力します。

アイコンを選択

次に行うことは、訪問者に単なる写真以上のものがあることを示すアイコンを選択することです。

デフォルトの背景色

次に、透明な背景色全体を選択します。

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

背景色にカーソルを合わせる

そして、ホバー時にその色を変更します。

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

デフォルトのアイコン設定

訪問者がホバーできることを理解するのに役立つ目立つアイコンが必要です。 アイコンの設定を変更して、そのようなアイコンを実現します。

• アイコンの色：#ffffff
• 円のアイコン：はい
• 円の色：＃000000
• アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：50px

ホバーアイコンの設定

ただし、ホバー時にアイコンを表示したくありません。 そのため、代わりに完全に透明な色を使用します。

• アイコンの色：rgba（255,255,255,0）
• 円の色：rgba（255,255,255,0）

デフォルトのタイトルテキスト設定

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

• タイトルフォント：Cinzel
• タイトルフォントの太さ：太字
• タイトルフォントスタイル：スモールキャップス
• タイトルテキストの色：＃000000
• タイトルテキストサイズ：0px

タイトルテキスト設定にカーソルを合わせる

ホバー時にテキストサイズを変更します。

• タイトルテキストサイズ：30px

デフォルトの本文テキスト設定

本文の設定も変更してください。

• ボディフォント：Open Sans
• 本文の色：＃000000
• 本文サイズ：0px
• ボディラインの高さ：1.8em

本文のテキスト設定にカーソルを合わせる

また、ホバー時に本文のサイズを変更します。

• 本文サイズ：14px

デフォルトの間隔

大事なことを言い忘れましたが、負の上部マージンを使用して、宣伝文句モジュールと画像モジュールの間にオーバーラップを作成する必要があります。

• トップマージン：-3.7vw（デスクトップ）、-9vw（タブレットと電話）
• 下マージン：1.5vw（タブレット）、2vw（電話）

ホバー間隔

ホバー時にカスタムマージンとパディング値を変更します。

• トップマージン：-11.38vw
• トップパディング：20px
• ボトムパディング：20px
• 右パディング：50px

両方のモジュールのクローンを2回作成し、残りの列に複製を配置します

これで、最初のバイオホバー効果の作成が完了しました。 時間を節約するために、列1の両方のモジュールを2回複製し、残りの2つの列に複製を配置するだけです。

宣伝文モジュールの画像とコンテンツを変更する

チームメンバーセクションを終了するには、画像モジュールの画像と宣伝文モジュールのコピーを変更することを忘れないでください。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用して、チームメンバーの写真のホバーにバイオホバー効果を作成する方法を示しました。 ページは最も訪問されたページのWebサイトの1つであるため、ページについて優れたものを作成することがいかに重要であるかについて説明しました。 チームメンバーの写真にバイオホバー効果を使用すると、アバウトページを次のレベルに引き上げるだけでなく、訪問者とのやり取りを作成することもできます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！