如何使用 Divi 創建獨特的社交媒體跟隨按鈕懸停效果
已發表: 2019-01-31Divi 的社交媒體關注模塊使您可以輕鬆地設計這些重要鏈接並將其添加到您網站上任何位置的社交網絡。 如果您想體驗 Divi 強大的內置懸停效果，還可以為社交媒體關注按鈕設計一些創意懸停效果。
在本教程中，我將向您展示一些獨特的社交媒體關注按鈕懸停效果，這些效果可能會讓您大吃一驚。
一探究竟！
搶先看
這是我們將創建的懸停效果的先睹為快。
第 1 部分：移動方框陰影以突出您的社交媒體關注按鈕
邊界到點
點到邊框
彈跳陰影 1
彈跳陰影 2
開始構建第 1 部分懸停效果
第 2 部分：在懸停時更改顏色、大小和形狀
改變大小和顏色
改變大小、顏色和形狀
開始構建第 2 部分懸停效果
第 3 部分：濾鏡效果
開始構建第 3 部分懸停效果
第 4 部分：具有屏幕混合和濾鏡效果的大圖標
開始構建第 4 部分懸停效果
入門
訂閱我們的 YouTube 頻道
為了讓本教程的工作順利進行，您真正需要的是安裝並激活 Divi 主題。 然後創建一個新頁面並為您的頁面命名。 然後單擊以使用 Divi Builder 並選擇使用預製佈局的選項。 從 Load from Library 彈出模式中，選擇 App Developer Layout Pack。 然後單擊以使用為了快速啟動我們的社交媒體關注按鈕的設計，我們將使用 App Developer Home Page 佈局。
發布您的頁面並單擊按鈕以在前端構建。
現在刪除頁面的所有部分，除了頁面底部包含社交媒體關注按鈕的部分。
這將作為創建懸停效果的起始模板。
讓我們將該部分保存到 Divi 庫，以便我們可以在需要時添加這些社交媒體關注按鈕設計的新版本。
您也可以在頁面上多次復制該部分。 這將允許您從預製部分開始創建不同的懸停效果。
現在您已準備好開始創建懸停效果。
讓我們開始吧。
#1 移動方框陰影以突出您的社交媒體關注按鈕
邊界到點
對於這種懸停效果，我們將在按鈕周圍添加一個框陰影，該陰影會在懸停時縮小並懸停在按鈕上方。 為此，請打開社交媒體關注模塊並單擊以打開 facebook 社交網絡的設置。
然後將用於圖標的背景顏色複製到剪貼板 (#3b5998)。 此顏色將用於框陰影。
現在打開設計選項卡並更新以下內容：
盒子陰影：見截圖
框陰影垂直位置：0px（默認），-46px（懸停）
框陰影模糊強度：0px
Box Shadow Spread Strength：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（懸停）
您需要為剩餘的每個社交網絡更新這些新的框陰影設置。 您可以手動執行此操作，也可以使用右鍵單擊複製 Box Shadow Vertical 位置並傳播強度，然後將它們粘貼到每個網絡。
完成後，您的最終設計將如下所示。
彈跳陰影效果
對於此設計和懸停效果的下一個版本，我們將默認每個按鈕的框陰影（點）從同一位置開始。 這將產生一種彈跳效果。
首先，您可以復制我們之前構建的“點到邊框”設計。 打開社交媒體關注模塊設置，然後打開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（懸停）
然後繼續這個過程，更新剩下的四種社交網絡背景顏色如下：
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
這是最終結果。
改變形狀
要在懸停時更改按鈕的形狀，您需要做的就是調整“圓角”選項。 此社交媒體關注模塊當前將圓角設置為 40 像素，使按鈕呈圓形。 如果我們想將其更改為方形，您需要做的就是在懸停時將圓角調整為 0px。
為此，請打開 Facebook 網絡設置並更新以下內容：
圓角（懸停）：四個角均為 4px
然後復制邊框樣式並將它們粘貼到每個剩餘的網絡。
這是最終的設計。
#3 濾鏡效果
對於下一個懸停效果，我將向您展示如何使用幾種過濾效果來更改懸停時社交媒體按鈕的顏色。 首先，請確保您使用的是應用程序開發者主頁佈局中社交媒體關注按鈕部分的新版本。 如果您將它保存到您的 Divi 庫，現在是將它添加到您的頁面的好時機。
懸停時的飽和度和反轉過濾器效果
使用飽和度和反轉濾鏡效果是一種簡單而強大的方法，可以在懸停時更改社交媒體按鈕的樣式。 在這個例子中，我將向您展示如何結合飽和度和反轉來創建帶有黑色圖標的灰色按鈕，這些圖標在懸停時會轉換回原始顏色。
為此，請打開社交媒體關注模塊設置，然後打開每個單獨的社交網絡設置並更新以下過濾器選項：
飽和度：0%（默認），100%（懸停）
反轉：100%（默認），0%（懸停）
檢查結果。
#4 帶有屏幕混合和濾鏡效果的大型彩色圖標
對於這個最終的社交媒體按鈕懸停設計，我們將完全從頭開始。 因此，創建一個具有一列行的新部分，並向該行添加社交媒體關注模塊。
然後打開社交媒體關注設置並刪除默認的 twitter 社交網絡，只留下 facebook 社交網絡項目。
然後更新社交媒體關注設置如下：
背景顏色：#ffffff
項目對齊：居中
混合模式：屏幕
接下來，打開 Facebook 社交網絡項目設置並更新以下內容：
背景顏色：#000000
自定義邊距：左 10 像素，右 10 像素
自定義填充：頂部 10 像素，底部 10 像素，左側 10 像素，右側 10 像素
飽和度：0%（默認），100%（懸停）
反轉：100%（默認），0%（懸停）
保存設置。
然後復制 facebook 社交網絡項目 4 次，這樣您總共有 5 個社交網絡按鈕。
現在打開每個重複的社交網絡項目並將社交網絡和背景顏色更新為#000000。
保存設置。
現在因為我們已經啟用了屏幕混合模式，我們可以向包含我們的社交媒體關注模塊的行列添加背景顏色。 我們使用的任何背景顏色將決定我們社交媒體圖標的顏色和懸停背景顏色。
為此，請打開行設置並更新以下內容：
第 1 列背景顏色：#0c71c3
請注意圖標顏色如何更改為此背景顏色。
現在檢查到目前為止的結果。
為了使圖標/按鈕更大，我們可以使用自定義 CSS 的片段。 為此，我們必須首先向社交媒體關注模塊添加一個 CSS ID，然後在我們的頁面設置中添加一些 CSS。
打開社交媒體關注模塊並在高級選項卡下添加以下 CSS ID。
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 技能，為你的下一個項目創造一些美麗的東西。
我期待在評論中收到您的來信。
乾杯!