如何使用 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 技能，为你的下一个项目创造一些美丽的东西。
我期待在评论中收到您的来信。
干杯!