WordPress divi主题

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

by | May 8, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

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

社交媒体关注按钮栏

社交媒体关注按钮栏

社交媒体关注按钮栏

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

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

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

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

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

之后,您就可以出发了。

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

创建新模板

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

社交媒体关注按钮栏

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

社交媒体关注按钮栏

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

社交媒体关注按钮栏

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

fiverr建站WordPress程序员

社交媒体关注按钮栏

创建社交媒体关注按钮栏

创建新行

首先,让我们在模板中添加一列行。

社交媒体关注按钮栏

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

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

社交媒体关注按钮栏

独立站选品工具
添加社交网络

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

社交媒体关注按钮栏

社交媒体关注按钮栏

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

社交媒体关注按钮栏

高质量外链购买

添加按钮模块

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

社交媒体关注按钮栏

按钮内容

接下来更新Button内容如下:

  • 按钮文字:关注
  • 按钮链接地址:#

社交媒体关注按钮栏

按钮样式和定位

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

JasperAI 10000字免费额度试用
  • 按钮文字大小:16px
  • 按钮文字颜色:
  • 按钮边框宽度:0px
  • 按钮字母间距:1px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:粗体
  • 按钮图标:右箭头(见截图)
  • 保证金:剩余 100%
  • 内边距:底部 100 像素

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

position: absolute;

社交媒体关注按钮栏

行设置

设置按钮样式并准备就绪后,按如下方式更新行设置:

  • 背景颜色:#ffffff
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:64px
  • 内边距:顶部 24 像素,底部 16 像素,左侧 16 像素

社交媒体关注按钮栏

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

社交媒体关注按钮栏

WordPress备份工具updrafplus
行定位

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

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

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

社交媒体关注按钮栏

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

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

  • 边距(桌面):-64px
  • 边距(悬停):0px

社交媒体关注按钮栏

社交媒体关注按钮栏

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

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

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

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

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

社交媒体关注按钮栏

然后将发布内容模块添加到行。

社交媒体关注按钮栏

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

更新以下内容:

  • 宽度:100%
  • 最大宽度:100%
  • 内边距:0px 顶部,0px 底部

社交媒体关注按钮栏

现在更新部分设置如下:

  • 内边距:0px 顶部,0px 底部

社交媒体关注按钮栏

差不多就行了。 现在确保在退出编辑器之前保存布局。 然后也保存主题生成器的更改。

社交媒体关注按钮栏

最后结果

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

社交媒体关注按钮栏

社交媒体关注按钮栏

社交媒体关注按钮栏

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题