如何在 Divi 中设计弹出社交媒体关注按钮栏到您的页面模板

社交媒体关注按钮仍然是任何网站的流行补充。 公司和个人使用这些链接将用户重定向到他们的社交媒体页面，希望访问者能够关注他们或订阅他们的频道。 通常，您会在联系页面、侧边栏或网站页脚中看到这些按钮。

在本教程中，我们将向您展示如何设计弹出社交媒体关注按钮栏到 Divi 中的页面模板。 这将使那些社交媒体关注按钮在您的网站上具有更大的可见性，而不会分散注意力。 另外，使用 Divi 的 Theme Builder，您可以轻松创建一个页面模板，其中包含用于您网站中任何（或所有）页面的这些按钮。

让我们开始吧！

抢先看

以下是本教程中创建的社交媒体关注按钮的快速浏览。

免费下载弹出社交媒体关注按钮栏页面模板

要使用本教程中的社交媒体关注按钮栏页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并使用 Theme Builder Portability 选项将 json 文件之一添加到 Divi Theme Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要安装并激活 Divi 主题。 确保您拥有最新版本的 Divi。

您还需要至少一个使用 Divi Builder 创建的页面用于测试目的，以便将新模板分配给该页面以显示结果。

之后，您就可以开始了。

为 Divi 中的页面模板创建弹出式社交媒体关注按钮栏

创建新模板

从 WordPress 仪表板，导航到 Divi > Theme Builder。 然后单击“添加新模板”框以创建新模板。

将模板分配给您希望显示促销栏的页面。

在新模板上，单击“添加自定义正文”区域，然后选择“构建自定义正文”。

然后选择“从头开始构建”选项。

创建社交媒体关注按钮栏

创建新行

首先，让我们向模板添加一列行。

添加社交媒体关注按钮模块

在单列行中，添加社交媒体关注模块。

添加社交网络

在社交媒体关注设置下，添加您想要显示的所有社交网络。 要添加新网络，请单击添加新社交网络灰色加号图标，然后从列表中选择网络。

您还需要添加要将访问者重定向到的社交媒体页面的链接 URL。 为此，请单击社交媒体网络上的设置图标并更新帐户链接 URL。

添加按钮模块

完成社交媒体关注模块网络后，我们准备添加按钮模块。 此按钮将是用户悬停在其上以显示弹出栏的按钮。 继续添加按钮模块，然后将其拖到社交媒体关注模块上方。

按钮内容

接下来更新按钮内容如下：

• 按钮文字：关注
• 按钮链接网址：#

按钮样式和位置

然后更新按钮设计设置如下：

• 按钮文字大小：16px
• 按钮文字颜色：
• 按钮边框宽度：0px
• 按钮字母间距：1px
• 按钮字体：蒙特塞拉特
• 按钮字体粗细：粗体
• 按钮图标：右箭头（见截图）
• 边距：剩余 100%
• 填充：底部 100px

然后将以下自定义 CSS 添加到主元素：

position: absolute;

行设置

按钮样式设置好并准备就绪后，按如下方式更新行设置：

• 背景颜色：#ffffff
• 天沟宽度：1
• 宽度：100%
• 最大宽度：64px
• 填充：顶部 24 像素，底部 16 像素，左侧 16 像素

行框阴影

• 盒子阴影：见截图
• 框阴影模糊强度：0px
• 框阴影模糊强度：30px
• 阴影颜色（桌面）：透明
• 阴影颜色（悬停）：rgba(0,0,0,0.2)

行定位

然后将以下自定义 CSS 添加到行 Main Element：

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

这会将行定位在浏览器顶部向下三分之一处的固定位置。

使用自定义边距弹出悬停效果

现在添加以下边距值以添加悬停弹出功能。

• 边距（桌面）：-64px 左
• 边距（悬停）：0px 左

这照顾了社交媒体关注按钮栏。 但是我们仍然需要通过创建必要的帖子内容模块来完成模板。

将帖子内容模块添加到模板

此时，社交媒体关注按钮栏已准备就绪。 但由于这是一个模板，我们需要确保并添加帖子内容模块以使用此模板显示页面的内容。

使用帖子内容模块添加新行

在包含社交媒体关注按钮栏的行下，添加一个新的单列行。

然后将 Post Content Module 添加到 Row。

目前，帖子内容模块将被限制为父行的默认宽度。 我们需要更改行的宽度和内边距，使其跨越浏览器的整个宽度而没有任何间隙。 这很重要，因为帖子内容模块决定了您必须使用 Divi Builder 构建页面的区域。

更新以下内容：

• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部

现在更新部分设置如下：

• 填充：0px 顶部，0px 底部

就这样吧。 现在在退出编辑器之前确保并保存布局。 然后也保存主题构建器的更改。

最后结果

要查看最终结果，请访问分配了模板的页面。 这是弹出的社交媒体关注按钮栏的外观。

最后的想法

这个社交媒体关注按钮栏肯定会帮助将那些重要的社交网络带到最前沿。 弹出功能将确保图标不会分散用户的注意力。 您可以使用主题生成器将栏添加到任何页面模板。 希望这将是您下一个项目的一个很好的补充！

我期待在评论中收到您的来信。

干杯!