Diviでソーシャルメディアアイコンをホバリングしてチームメンバーページをデザインする方法

Rifat Divi Tutorials Oct 17, 2021

ウェブサイトにチームメンバーを表示する必要がある場合があります。これは、器用なチームメンバーを外の世界に紹介するための優れた方法です。 会社内での画像、名前、名称を表示することができます。 彼らにより多くの露出を与えるために、あなたは彼らのソーシャルメディアリンクをデザインに加えることができます。 さて、通常、人々は名前と名称の下にこれらのリンクを追加しますが、スマートな動きをしてデザインの方法を変更する時が来ました。 今日のDiviチュートリアルでは、画像の上にソーシャルメディアアイコンを配置してチームメンバーページを作成する方法を説明します。 もっと時間を無駄にしないで、それをやりましょう!

スニークピーク

これが私たちの今日のデザインになります。

パート1:設計モジュール

設定:セクション1

背景色

最初のセクションの色を、作業中のページに変更することから始めます。 セクション設定を開き、背景色を変更します。

  • 背景色:#0f0f0f

間隔

次に、[デザイン]タブから、間隔の設定を変更します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める
  • トップパディング:デスクトップとタブレット:100pxと電話:50px
  • 下部のパディング:デスクトップとタブレット:100ピクセルと電話:50ピクセル

新しい行の追加

カラム構造

次に、次の列構造で新しい行を追加します。

列:テキストモジュール1

H1コンテンツを追加する

次に、H1コンテンツを使用して、選択したコンテキストをこのモジュールに追加しましょう。

H1テキスト設定

次に、[デザイン]タブからモジュールにいくつかの変更を加えます。 まず、見出しの設定を変更します。

  • 見出しフォント:Alata
  • 見出しのテキストの色:#ffffff
  • 見出しのテキストサイズ:デスクトップ:50ピクセル、タブレット:45ピクセル、電話:35ピクセル
  • 見出し線の高さ:1.2em

列:ディバイダーモジュール

可視性

Dividerモジュールを追加しましょう。 「除算器の表示」オプションが有効になっていることを確認してください。

  • 仕切りを表示:はい

ライン

[デザイン]タブから、線の色を変更します。

  • 線の色:#ffffff

サイジング

この仕切りモジュールのサイズを変更します。

  • 仕切りの重量:2px
  • 最大幅:100px
  • 高さ:2px

列:テキストモジュール1

説明的なコンテキストを追加する

ここでは、選択したコンテンツを配置する別のテキストモジュールを追加します。

テキスト設定

デザインタブから、それに応じてテキスト設定を変更します。

  • テキストフォント:Alata
  • テキストの色:#7c7c7c
  • テキストサイズ:17px
  • テキスト行の高さ:1.9em

間隔

間隔セクションから、次の変更を行います。

  • 下マージン:0px

追加と設定:セクション2

次に、前のセクションの下に別の通常のセクションを追加します。

グラデーションの背景

ここで、このセクションにグラデーションの背景を使用します。

  • 色1:#0f0f0f
  • 色2:#000000
  • 開始位置:10%
  • 終了位置:10%

間隔

次に、間隔の設定を変更します。

  • トップパディング:0px
  • ボトムパディング:200px

新しい行の追加

カラム構造

次に、次の列構造でこのセクションに新しい行を追加します。

サイジング

行設定を開き、次のようにサイズ設定を変更します。

  • カスタムガター幅を使用:はい
  • 側溝幅:2px

列1:ソーシャルメディアフォローモジュール

ソーシャルネットワークを追加する

次に、ソーシャルメディアフォローモジュールを列1に追加し、必要なソーシャルメディア接続を配置します

ソーシャルメディアアイコンから背景色を削除します

各アイコンの設定をクリックしてから、背景に移動して[透明]を選択します。 また、色をクリックして削除することもできます。

各ソーシャルネットワークへのリンクを追加

各ソーシャルネットワークにも対応するリンクを追加します。

デフォルトの背景色

モジュール設定オプションから、この色を背景として追加します。

  • 背景色:rgba(0,0,0,0)

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

ホバー効果の背景色を変更します。

  • ホバーの背景色:#494949

背景画像

次に、チームメンバーの画像を背景としてアップロードします。

  • 背景画像サイズ:カバー
  • 背景画像のブレンド:乗算

配置

モジュールの[デザイン]タブから、配置設定を変更します。

  • モジュールの配置:中央

アイコン

次に、アイコンの色を変更します。

  • アイコンの色:rgba(0,0,0,0)

間隔

次に、間隔の設定に移動し、次の値を適用します。

  • 下マージン:0px
  • トップパディング:デスクトップ:250ピクセル、タブレット:450ピクセル、電話:200ピクセル
  • ボトムパディング:20px

国境

次に、それに応じて境界線の設定を変更します。

  • すべてのコーナー:100px
  • ボーダー幅:2px
  • ボーダーカラー:rgba(255,255,255,0)

ホバーボーダー

次に、ホバーに境界線を使用します。

  • ホバーボーダーの色:#ffffff

CSSクラス

次に、[詳細設定]タブから、カスタムCSSクラスを追加します。

  • CSSクラス:team-socials

要素の前にカーソルを合わせる

次に、before要素に次のCSSコードを適用して、モジュール設定を完了します。 必ずホバーしてください。

content: "Say Hello To Me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
padding-left: 30px;

列1:個人モジュール

コンテンツを追加する

この列で使用する最後のモジュールは、personモジュールです。 モジュールを追加し、その中に情報を入力します。

テキスト設定

personモジュールのデザインタブから、次のようにテキスト設定を変更します。

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

タイトルテキスト設定

次に、タイトルのテキスト領域を変更します。

  • タイトルフォント:Alata
  • タイトルテキストサイズ:デスクトップ:27ピクセル、タブレット:25ピクセル、電話:22ピクセル

位置テキスト設定

位置テキストの設定を変更します。

  • 位置フォント:Alata
  • 位置テキストサイズ:デスクトップ:17pxおよびタブレットと電話:15px

間隔

間隔設定にカスタムの上下のパディングを適用します。

  • トップパディング:40px
  • ボトムパディング:40px

国境

次に、次の境界線設定を適用して、列を完成させます。

  • ボーダー幅:1px
  • ボーダーカラー:#ffffff

他の列を削除する

次に、セクションの列を削除します。

カラムを2回クローンする

次に、列を1つ2回複製します。

行全体のクローンを作成する

次に、行全体を必要なだけ複製します。 ここでは一度複製します。

重複するコンテンツを変更する

次に、すべての個人の画像、ソーシャルメディアリンク、個人情報を変更します。

パート2:コードモジュール

セクション1のコードモジュール

次に、セクション1のテキストモジュールの下にコードモジュールを追加します。

CSSコードを追加する

次に、CSSコードの次の行をコピーして、コードモジュールに貼り付ければ、完了です。 それらをStyleタグ内に配置することを忘れないでください。


.team-socials:hover li a.icon:before {
  color: black !important;
}
 
.team-socials:hover li a.icon {
  background-color: white;
}

最終結果

すべての手順を正常に完了した限り、これが結果のようになります。

結論

今日のチュートリアルでは、チームメンバーページをいかにクリエイティブにデザインできるかを示しました。 ディビテーマのホバリング効果を使用して、チームメンバーの社会的つながりをそのような美的方法で示すことができます。 今日のチュートリアルがお役に立てば幸いです。周囲の人と共有することで、より新しくて素晴らしいDiviチュートリアルを思いつくことができます。