ユニークなソーシャルメディアを作成する方法Diviでボタンホバー効果をフォロー
公開: 2019-01-31Diviのソーシャルメディアフォローモジュールを使用すると、これらの重要なリンクを簡単にスタイル設定して、Webサイトのどこにでもソーシャルネットワークに追加できます。 また、Diviの強力な組み込みホバー効果のいくつかで手を汚したい場合は、ソーシャルメディアのフォローボタン用にいくつかの創造的なホバー効果を設計することもできます。
このチュートリアルでは、あなたを驚かせるかもしれないいくつかのユニークなソーシャルメディアフォローボタンホバー効果を紹介します。
見てみな！
スニークピーク
これが、作成するホバー効果の概要です。
パート1：ソーシャルメディアのフォローボタンを強調するためのボックスシャドウの移動
ドットへの境界線
国境への点
跳ねる影1
跳ねる影2
パート1ホバー効果の構築を開始します
パート2：ホバーで色、サイズ、形状を変更する
サイズと色の変更
サイズ、色、形の変更
パート2ホバー効果の構築を開始します
パート3：フィルター効果
パート3ホバー効果の構築を開始します
パート4：画面ブレンドとフィルター効果のある大きなアイコン
パート4ホバー効果の構築を開始します
入門
私たちのYoutubeチャンネルを購読する
このチュートリアルで物事を進めるために本当に必要なのは、Diviテーマがインストールされてアクティブになっていることだけです。 次に、新しいページを作成し、ページにタイトルを付けます。 次に、クリックしてDivi Builderを使用し、[既成のレイアウトを使用する]オプションを選択します。 [ライブラリからロード]ポップアップモーダルから、[App Developer LayoutPack]を選択します。 次に、クリックして使用します。ソーシャルメディアのフォローボタンのデザインをすぐに開始するには、アプリ開発者のホームページレイアウトを使用します。
ページを公開し、ボタンをクリックしてフロントエンドでビルドします。
次に、ページの下部にあるソーシャルメディアのフォローボタンを含むセクションを除く、ページのすべてのセクションを削除します。
これは、ホバー効果を作成するための開始テンプレートとして機能します。
セクションをDiviライブラリに保存して、必要に応じてこれらのソーシャルメディアのフォローボタンデザインの新しいバージョンを追加できるようにします。
また、ページ上でセクションを複数回複製することもできます。 これにより、事前に作成されたセクションから始めて、さまざまなホバー効果を作成できます。
これで、ホバー効果の作成を開始する準備が整いました。
始めましょう。
＃1ソーシャルメディアのフォローボタンを強調するためのボックスシャドウの移動
ドットへの境界線
このホバー効果のために、ホバー時にボタンの上に縮小してホバリングするボックスシャドウをボタンの周りに追加します。 これを行うには、ソーシャルメディアフォローモジュールを開き、クリックしてFacebookソーシャルネットワークの設定を開きます。
次に、アイコンに使用されている背景色をクリップボードにコピーします（＃3b5998）。 この色はボックスシャドウに使用されます。
次に、[デザイン]タブを開き、以下を更新します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px（デフォルト）、-46px（ホバー）
ボックスシャドウブラー強度：0px
ボックスシャドウの広がりの強さ：5px（デフォルト）、-16px（ホバー）
影の色については、背景色（＃3b5998）を貼り付けて、不透明度を50％下げます。 これにより、ボタンの背景色が明るくなります。
影の色：rgba（59,89,152,0.5）
次に、[ボックスシャドウスタイル]カテゴリを右クリックして、[ボックスシャドウスタイルのコピー]を選択します。
Facebookソーシャルネットワークの設定を保存してから、各ソーシャルネットワークを右クリックし、それぞれの[アイテムスタイルの貼り付け]を選択します。 これにより、残りのボタンに同じボックスシャドウスタイルが適用されます。
ただし、それぞれに固有のボックスシャドウの色を更新する必要があります。 これを行うには、Facebookソーシャルネットワークで行ったのと同じプロセスを繰り返します。 特定のソーシャルネットワーク設定を開き、使用されている背景色をコピーして、新しいボックスの影の色として貼り付け、不透明度を50％下げます。
残りの各ソーシャルネットワークのボックスシャドウの色は次のとおりです。
Twitterボックスの影の色：rgba（0,172,237,0.5）
Instagramボックスシャドウカラー：rgba（234,44,89,0.5）
ドリブルボックスの影の色：rgba（234,76,141,0.5）
Youtubeボックスシャドウカラー：rgba（168,36,0,0.5）
ボックスの影の色が更新されたら、最終結果を確認してください。
国境への点
ボックスシャドウの垂直位置と広がりの強さのデフォルト値とホバー値を切り替えることで、ホバー効果を簡単に元に戻すことができます。
セクションを複製し（「境界線からドット」のデザインを維持したい場合）、ソーシャルメディアのフォローモジュールの設定を開きます。 次に、Facebookソーシャルネットワークの設定を開き、以下を更新します。
ボックスシャドウの垂直位置：-46px（デフォルト）、0px（ホバー）
ボックスシャドウの広がりの強さ：-16px（デフォルト）、5px（ホバー）
残りのソーシャルネットワークごとに、これらの新しいボックスシャドウ設定を更新する必要があります。 これは手動で行うことも、右クリックしてボックスシャドウの垂直位置と広がりの強さをコピーしてから、各ネットワークに貼り付けることもできます。
完了すると、最終的なデザインは次のようになります。
跳ねる影の効果
このデザインとホバー効果の次のバージョンでは、各ボタンのボックスシャドウ（ドット）がデフォルトで同じ場所から始まるようにします。 これにより、一種のバウンス効果が生まれます。
まず、以前に作成した「ドットからボーダー」のデザインを複製できます。 ソーシャルメディアフォローモジュール設定を開き、Facebookソーシャルネットワーク設定を開きます。 次のボックスシャドウスタイルを更新します。
ボックスシャドウの水平位置：140px（デフォルト）、0px（ホバー）
ボックスシャドウの垂直位置：-70px（デフォルト）、0px（ホバー）
Twitterソーシャルネットワークの場合は、以下を更新します。
ボックスシャドウの水平位置：70px（デフォルト）、0px（ホバー）
ボックスシャドウの垂直位置：-70px（デフォルト）、0px（ホバー）
Instagramソーシャルネットワークの場合は、以下を更新します。
ボックスシャドウの水平位置：70px（デフォルト）、0px（ホバー）
ボックスシャドウの垂直位置：-70px（デフォルト）、0px（ホバー）
Dribbleソーシャルネットワークの場合は、以下を更新します。
ボックスシャドウの水平位置：-70px（デフォルト）、0px（ホバー）
ボックスシャドウの垂直位置：-70px（デフォルト）、0px（ホバー）
Youtubeソーシャルネットワークの場合は、以下を更新します。
ボックスシャドウの水平位置：-140px（デフォルト）、0px（ホバー）
ボックスシャドウの垂直位置：-70px（デフォルト）、0px（ホバー）
最終結果を確認してください。
ドットを最初に表示したくない場合は、デフォルトのボックスシャドウの色を透明に設定してから、ホバー時にボックスシャドウの色を追加できます。 これにより、次のようなデザインが得られます。
＃2ホバーで色、サイズ、形を変更する
この次の一連のホバー効果では、ホバーのソーシャルメディアボタンの色、サイズ、または形状を簡単に変更する方法を紹介します。 開始するには、アプリ開発者のホームページレイアウトのソーシャルメディアフォローボタンセクションの新しいバージョンを使用していることを確認してください。 それをDiviライブラリに保存した場合は、今がページに追加する良い機会です。
色を変える
ホバー時にソーシャルメディアボタンの色を変更するのは非常に簡単です。 この例では、ソーシャルネットワークの色に変わるデフォルトの濃い灰色の背景色から始めましょう。
これを行うには、ソーシャルメディアフォローモジュールを開き、Facebookネットワーク設定を開きます。 以下を更新します。
背景色：＃333333（デフォルト）、＃3b5998（ホバー）
次に、このプロセスを続行して、残りの4つのソーシャルネットワークの背景色を次のように更新します。
Twitterの背景色：＃333333（デフォルト）、＃00aced（ホバー）
Instagramの背景色：＃333333（デフォルト）、＃ea2c59（ホバー）
ドリブルの背景色：＃333333（デフォルト）、＃ea4c8d（ホバー）
Youtubeの背景色：＃333333（デフォルト）、a82400（ホバー）
結果は次のとおりです。
サイズの変更
ボタンのサイズを変更するには、ホバー時にボックスシャドウを追加します。 これにより、ホバー時に隣接するボタンを押しのけるような実際のスペースをボタンに追加することなく、ボタンを大きくすることができます。
これを行うには、Facebookネットワーク設定を開き、次のボックスシャドウスタイルを追加します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：0px
ボックスシャドウの広がりの強さ：0px（デフォルト）、10px（ホバー）
影の色：＃3b5998（これはボタンのホバー背景色と同じ色である必要があります）
同じボックスシャドウデザインを残りのソーシャルネットワークボタンに追加するプロセスを高速化するには、Facebookネットワークのボックスシャドウカテゴリを右クリックし、[ボックスシャドウスタイルを保存]をクリックします。
設定を保存し、各ソーシャルネットワークを右クリックして、[アイテムスタイルの貼り付け]を選択します。
これで、あとはボックスの影の色を、ホバーの背景色と一致する正しいソーシャルネットワークの色に更新するだけです。
これを行うには、以下を更新します。
Twitterボックスの影の色：＃00aced
Instagramボックスの影の色：＃ea2c59
ドリブルボックスの影の色：＃ea4c8d
Youtubeボックスシャドウカラー：＃a82400
これが最終結果です。
形を変える
ホバー時にボタンの形状を変更するには、「角の丸い」オプションを調整するだけです。 このソーシャルメディアフォローモジュールでは、現在、角が40pxに設定されており、ボタンが円形になっています。 正方形に変更したい場合は、ホバー時に丸みを帯びた角を0pxに調整するだけです。
これを行うには、Facebookネットワーク設定を開き、以下を更新します。
丸みを帯びた角（ホバー）：四隅すべてで4px
次に、境界線のスタイルをコピーして、残りの各ネットワークに貼り付けます。
これが最終的なデザインです。
＃3フィルター効果
この次のホバー効果では、いくつかのフィルター効果を使用して、ホバーのソーシャルメディアボタンの色を変更する方法を紹介します。 開始するには、アプリ開発者のホームページレイアウトのソーシャルメディアフォローボタンセクションの新しいバージョンを使用していることを確認してください。 それをDiviライブラリに保存した場合は、今がページに追加する良い機会です。
ホバーに対する飽和および反転フィルターの影響
彩度と反転フィルター効果を使用すると、ホバー時にソーシャルメディアボタンのスタイルを変更するためのシンプルで強力な方法です。 この例では、彩度と反転を組み合わせて、ホバーすると元の色に戻る黒いアイコンが付いた灰色のボタンを作成する方法を示します。
これを行うには、ソーシャルメディアフォローモジュール設定を開き、次に個々のソーシャルネットワーク設定をそれぞれ開き、次のフィルターオプションを更新します。
飽和度：0％（デフォルト）、100％（ホバー）
反転：100％（デフォルト）、0％（ホバー）
結果を確認してください。
＃4スクリーンブレンドとフィルター効果を備えた大きな色付きアイコン
この最終的なソーシャルメディアボタンホバーデザインでは、完全にゼロから始めます。 したがって、1列の行で新しいセクションを作成し、ソーシャルメディアフォローモジュールを行に追加します。
次に、ソーシャルメディアのフォロー設定を開き、デフォルトのTwitterソーシャルネットワークを削除して、Facebookソーシャルネットワークアイテムのみを残します。
次に、ソーシャルメディアのフォロー設定を次のように更新します。
背景色：#ffffff
アイテムの配置：中央
ブレンドモード：画面
次に、Facebookソーシャルネットワークアイテムの設定を開き、以下を更新します。
背景色：＃000000
カスタムマージン：左10px、右10px
カスタムパディング：上10px、下10px、左10px、右10px
飽和度：0％（デフォルト）、100％（ホバー）
反転：100％（デフォルト）、0％（ホバー）
設定を保存する。
次に、Facebookソーシャルネットワークアイテムを4回複製して、合計5つのソーシャルネットワークボタンを作成します。
次に、複製された各ソーシャルネットワークアイテムを開き、ソーシャルネットワークと背景色を＃000000に更新します。
設定を保存する。
画面ブレンドモードが有効になっているので、ソーシャルメディアフォローモジュールを含む行列に背景色を追加できます。 使用する背景色が何であれ、ソーシャルメディアアイコンの色とホバーの背景色が決まります。
これを行うには、行設定を開き、以下を更新します。
列1の背景色：＃0c71c3
アイコンの色がこの背景色にどのように変化したかに注目してください。
これまでの結果を確認してください。
アイコン/ボタンを大きくするために、カスタムCSSのスニペットを使用できます。 これを行うには、最初にソーシャルメディアフォローモジュールにCSS IDを追加してから、ページ設定にCSSを追加する必要があります。
ソーシャルメディアフォローモジュールを開き、[詳細設定]タブで次のCSSIDを追加します。
CSS ID：ラージアイコン
次に、ページ設定を開き、次のカスタムcssを追加します。
@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
font-size: 50px;
line-height: 100px;
width: 100px;
height: 100px;
}
}
このコードは、アイコンのサイズを50ピクセルに、ボタンの高さと幅を100ピクセルに増やします。 メディアクエリは、このスタイルがデスクトップにのみ適用されることを確認します。
最終結果を確認してください。
最終的な考え
これらのソーシャルメディアのフォローボタンホバー効果が、いくつかのユニークなデザインで訪問者を捉える方法に関するいくつかの新鮮な新しいアイデアを提供することを願っています。 これらの例のほとんどは、特にDivi内でホバー効果がどのように機能するかを理解している場合は簡単に作成できます。 次回まで、Diviスキルを習得し、次のプロジェクトのために美しいものを作成し続けてください。
コメントでお返事をお待ちしております。
乾杯！