「私たちについて」ページがクリックをあなたの ウェブサイト. ビジネスの背後にある人間の部分を強調するのも、このタイプのページです。 サイトのWeb. このことを知っていると、ページの構造、共有する情報の種類、対話の作成方法に注意を払うことが重要であることがわかります。

ページエクスペリエンスを向上させるためにできることのXNUMXつは、従業員にスポットライトを当てるチームメンバーセクションを提供することです。 さらに、Diviの組み込みオプションのみを使用して、チームメンバーの写真に生物学的ホバー効果を追加できます。

これにより、作業中のページのスペースを節約し、あなたとあなたの間のホバーインタラクションを作成できます 訪問者.

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

行こう！

概要

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

オフィス

モバイル

再作成を始めましょう

新しいセクションを追加する

スペーシング

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

• 最適なパディング：100px
• 下部のパディング：100px

行1を追加

カラム構造

セクションへのカスタム塗りつぶしの追加が完了したら、セクション設定を閉じて、単一の列を使用して新しい行を追加できます。

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

H2コンテンツを追加

H2サイズを選択して、テキストモジュールのタイトルを列に追加します。

H2テキスト設定

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

• Heading 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に画像モジュールを追加します

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

モジュールの追加を開始する時が来ました！ 生物学的ホバー効果を実現するには、合計XNUMXつのモジュールが必要です。 画像モジュールとぼかしモジュール。 画像モジュールには、提示するチームメンバーの画像が含まれます。

一方、Blurb modは、左下隅のアイコンとホバーバイオグラフィーを追加するために使用されます。 正方形サイズの画像を使用して、最初の列に画像モジュールを追加します。

フィルタ

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

• 彩度：0％

Blurbモジュールを1列に追加します

コンテンツを追加する

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

アイコンを選択してください

次に行うことは、表示される選択アイコンを選択することです 訪問者 写真だけではありません。

デフォルトの背景色

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

• 背景色：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

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

本文の設定も変更します。

• ボディポリス：オープンサンズ
• 本文の色付きのテキスト：＃000000
• 本文のサイズ：0px
• 身長：1.8em

上空での身体のパラメーター

また、ホバーするテキストのボディサイズを変更します。

• 本文のサイズ：14px

デフォルトの間隔

最後になりましたが、負の上部マージンを使用して、Blurbモジュールと画像モジュールの間にオーバーラップを作成する必要があります。

• 上余白：-3.7vw（デスクトップ）、-9vw（タブレットと電話）
• 下余白：1.5vw（タブレット）、2vw（電話）

静止した間隔

ロールオーバーでカスタムマージンと塗りつぶしの値を変更します。

• 上マージン：-11,38vw
• 上部パディング：20px
• 下部のパディング：20px
• 室内装飾右：50px

2つのモジュールを2回複製して、残りの列に複製を入れます。

最初の生物学的ホバー効果の作成が完了しました。 時間を節約するために、列1のXNUMXつのモジュールをXNUMX回複製し、残りのXNUMXつの列に複製を配置するだけです。

Blurbモジュールの画像とコンテンツを編集する

Imageモジュールで画像を変更し、Blurbモジュールでコピーして、チームメンバーのセクションを完了することを忘れないでください。

概要

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

オフィス

モバイル

最終的な考え

この記事では、Diviの組み込みオプションのみを使用して、チームメンバーの写真に生物学的ホバー効果を作成する方法を示しました。 最も訪問されたWebサイトのXNUMXつであるため、優れたページを作成することがいかに重要であるかを強調しました。

チームメンバーの写真にバイオホバー効果を使用すると、ページの品質が向上するだけでなく、訪問者とのやり取りも作成されます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！