WordPress divi主题

如何在 Divi 中轻松地将垂直社交媒体按钮添加到您的网页

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

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

由于社交媒体的巨大兴起,社交媒体按钮已成为网站的标准组件。 使用 Divi,您可以使用社交媒体关注模块轻松添加这些社交媒体按钮。 但是,默认情况下,按钮将水平对齐。 这对于大多数网站来说都是完美的。 但是,如果您正在寻找图标的垂直布局,您可以通过对模块进行一些简单的调整来轻松做到这一点。

google广告开户

在本教程中,我将向您展示一种使用 Divi 在网页的任何部分创建垂直社交媒体按钮的快速简便的方法。

让我们开始吧。

抢先看

这是我们将要构建的设计的先睹为快。

垂直社交分享按钮

垂直社交分享按钮

垂直社交分享按钮

入门

订阅我们的 Youtube 频道

首先,创建一个新页面并为您的页面命名。 然后部署 Divi Builder 并选择“Choose a Premade Layout”。 从从库弹出的加载中,打开婚礼策划师布局包并选择使用婚礼策划师主页布局。

WordPress divi主题

垂直社交分享按钮

现在您已准备好开始构建。

将垂直社交媒体按钮添加到列

检查布局,您可以看到顶部包含一个全宽的两列行。 在第一列中,有一个带有列背景图像的不可见分隔模块。 在第二列中,右列中有一个文本模块和一个按钮模块。 对于此示例,我们希望在行的左上角添加垂直社交媒体按钮。 为此,请在第 1 列的分隔符下添加一个社交媒体关注模块。

垂直社交分享按钮

然后将社交媒体关注模块拖到分隔模块上方,使其位于第 1 列的最顶部。

之后,打开社交媒体关注设置。 通过单击内容选项卡下的加号图标添加新的社交网络,然后为新按钮选择一个社交网络。 您最终还需要为每个按钮添加帐户链接 URL,以便您的链接实际重定向到各自的社交媒体页面。

垂直社交分享按钮

在本示例中,我为 Facebook、Twitter、Pinterest 和 Instagram 添加了社交网络。

垂直社交分享按钮

设计社交媒体关注模块

现在让我们跳到设计选项卡并更新以下内容:

fiverr建站WordPress程序员

背景颜色:rgba(203,185,168,0.64)
宽度:64px(图标宽度加上左右内边距之和)
自定义边距(桌面):-3vw top
自定义边距(平板电脑):30px
自定义填充:顶部 16 像素,底部 16 像素,左侧 16 像素,右侧 16 像素

垂直社交分享按钮

调整模块的宽度以垂直堆叠图标

为了使社交媒体按钮垂直堆叠,我们调整了社交媒体关注模块的大小以强制按钮堆叠在一起。 为了确定你的社交媒体跟随垂直显示的宽度,你需要计算一个图标的宽度(32px)和左右内边距(16px + 16px = 32px)的总和。 因此在这种情况下,我们的社交媒体关注模块的总宽度需要为 64px。

垂直社交分享按钮

要完成设计,请使用以下内容更新每个社交网络按钮的背景颜色:

独立站选品工具

背景颜色:#333333

垂直社交分享按钮

现在让我们来看看最终的结果。

垂直社交分享按钮

将社交媒体图标放在页面顶部

如果您想更好地控制页面顶部的垂直社交媒体按钮的位置,您可以在该部分的顶部添加一个新行,并将您的社交媒体关注模块添加到该行。 然后,您可以轻松地将模块的对齐方式设置为左、中或右。

高质量外链购买

这是如何做到的。

创建一个新的单列行并将其拖动到该部分的顶部,使其位于页面的最顶部。 然后将您的社交媒体关注模块拖到新行中。

垂直社交分享按钮

打开新行的设置并更新以下内容:

自定义宽度:100%
自定义填充:0px 顶部,0px 底部

JasperAI 10000字免费额度试用

然后转到高级选项卡并在主元素中输入以下自定义 CSS:

z-index: 10;

一旦我们将负边距设置为与其下方的内容重叠,此 CSS 将允许列(社交媒体关注模块)的内容保持可见。

垂直社交分享按钮

现在打开社交媒体关注设置并更新以下内容:

自定义填充:-140px

WordPress备份工具updrafplus

有了我们的“z-index: 10” css,模块就能够覆盖它下面的行的内容而不会被隐藏。

通过此设置,您现在可以调整模块的对齐方式,以在页面顶部的左侧、中间或右侧显示垂直社交媒体按钮。

垂直社交分享按钮

这是以模块为中心的最终设计。

垂直社交分享按钮

垂直社交分享按钮

这是模块右对齐后的最终设计。

垂直社交分享按钮

垂直社交分享按钮

固定或静态定位

如果您希望在页面上为您的垂直社交媒体按钮提供固定(或静态)位置,请查看有关如何使任何 Divi 页面元素具有粘性的教程。

最后的想法

尽管 Divi 的社交媒体关注模块默认水平显示按钮,但只需简单调整模块的宽度即可创建漂亮的社交媒体按钮垂直显示。 而且,利用 Divi 内置设计选项的强大功能,您可以在任何您想要的位置设置和放置垂直媒体按钮。 我希望这可以帮助您为下一个项目创建一个全新的设计元素。

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

干杯!

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