WordPress divi主题

如何将社交图标添加到 Divi 的主菜单

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

如果没有专门的社交媒体存在,几乎不可能运行一个成功的网站。 无论您选择 Instagram、Twitter、TikTok、Facebook,还是这些和其他任何东西的组合,人们都希望直接与您和您的品牌互动。 确保您在 Divi 的主菜单中有社交图标是将流量从您的网站引导到您选择的网络的好方法。 它既快速又简单,我们将引导您完成每一步。

google广告开户

让我们开始吧!

预览

桌面

桌面版

移动的

手机版

使用 Divi Theme Builder 上传全局标题免费赠品

对于本文,我们将使用网球俱乐部布局包和页眉/页脚免费赠品。 您可以从 Divi 构建器中下载布局包,并从我们的博客中下载页眉/页脚包。 当您下载它时,文件将作为 。压缩 档案。 确保你提取它们,以便你有一个 .json 文件上传到 Divi。

Divi 社交图标 JSON

现在,进入您的 WordPress 仪表板并在下面找到 Divi Theme Builder Divi – 主题生成器. 点击 上下箭头图标 在页面的右上角。 这将打开 可移植性 模态,选择 进口 选项卡,找到 .json 您下载的页眉/页脚的文件,然后单击 导入 Divi 主题生成器模板.

社交图标可移植性

然后,您想进入网站的标题部分。 因为它是社交图标,我们将把它们放在 全局标题 因为我们认为它们应该出现在您网站上的所有页面上(除非另有说明)。

主题生成器

WordPress divi主题

您现在应该在构建器中。 如果您按照上述说明进行操作,您上传的新标头应该已经存在。

标题

您可能会注意到这里已经有社交图标。 那些社交图标不在 迪维 主菜单 然而,这正是我们今天正在努力的方向。 那么让我们进入它的杂草,好吗?

将社交图标添加到主菜单栏

首先,让我们更改行/列结构。 我们想找到第 #2 部分中的行(底部带有 主页/联系方式 链接)。

行列结构

我们为本教程选择了两列结构,但它是最适合您网站的结构。 一旦你选择了,进入 行设置 并导航到 设计 标签。 找出 浆纱 菜单,然后切换 使用自定义装订线宽度 在。 将 Gutter Width 值设置为 1。您可以输入数字或使用滑块来执行此操作。

行设置

单击绿色复选标记以保存您的设置。 然后走 背部 进入行设置。 这一次,选择 设置齿轮 对于顶部/第一/左列。

列设置

接下来,导航到 先进的 标签。 找出 自定义 CSS 区域并点击进入 主要元素 场地。 在此字段中,您需要添加以下 CSS。

fiverr建站WordPress程序员

width:80%;


或者

width:80%!important;

您可能必须添加 !important 标记来设置此元素的样式。 没关系。 它不应该产生性能问题或意大利面条代码来处理,因为它是一个单一的元素。

css 到列

然后,进入 响应能力 设置并使用相同的代码将列的宽度更改回移动设备的 100%。

移动宽度

独立站选品工具

接下来,对第二列重复此步骤。 只是这一次, 将默认值设置为 20%,移动值仍为 100%.

完成后,保存您的更改并准备添加和设置社交媒体图标样式。

添加社交媒体关注模块

点击 黑色 + 图标在 第 2 栏 添加一个新模块并滚动直到找到 社交媒体关注. 插入它。

社交媒体关注模块

无论您使用什么标题,默认社交媒体图标很可能与您的风格不匹配。 他们也不会正确定位。 下一步将是正确设置样式和间距。 在 – 的里面 社交媒体关注 模块设置,进入 设计 进而 结盟. 选择要放置模块的位置。

高质量外链购买

我们为桌面选择右对齐,然后进入响应性选项并将其居中。

结盟

接下来是向下滚动到 图标 菜单。 选择所需图标的颜色。 这是 F Facebook 的鸟,Twitter 的鸟,Instagram 的相机。 例如,这不是蓝色背景。

图标颜色

接下来是间距。 真正需要调整的主要是上边距。 我们将申请一个 1.5大众 上边距,使其与菜单文本居中。 如果您或多或少地希望它用于移动设备,您也可以对其进行调整。

JasperAI 10000字免费额度试用

上边距

现在,点击 内容 选项卡并进入您要自定义的个人社交网络图标。 您将为您为站点选择的每个图标重复这些步骤。

社会环境

向下滚动到 背景 并选择与您的网站设计相匹配的颜色。 再次记住,这只会改变这个特定图标的背景。

背景图标

WordPress备份工具updrafplus

您可能还想更改此特定图标的颜色。 您可以在 设计 选项卡和 图标 部分,就像在整个模块本身中一样。 此设置将覆盖常规设置,因此如果您想要一次性颜色,则不必担心会干扰其他设置。

图标颜色

然后,向下滚动到 边界 下的条目 设计 选项卡,在其中,您会找到 边框宽度. 将此值设置为 3px,然后选择一个 边框颜色 从 Divi Primary Menu 的背景中脱颖而出。

图标边框

此时,您将返回 内容 选项卡并为您希望显示的每个社交网络图标重复这些步骤。 如果您希望此模块中的每个图标共享相同的设计,您可以简单地 右键点击 您设计和选择的那个 复制项目样式.

复制项目样式

接下来,右键单击要设置样式的其他网络并选择 粘贴项目样式.

粘贴项目样式

就是这样! 一定要点击 节省 屏幕右下角的按钮以保存整体布局。 然后,您可以安全地 X 退出右上角的编辑屏幕。

保存你的工作

确保 Divi 主题生成器 页面显示 已保存所有更改 在左上角。 如果没有,请单击 保存更改. 完成后,您的网站将在 Divi 主菜单中实时显示社交媒体图标!

最终结果

这就是你的最终结果应该类似的样子。

桌面

桌面版

移动的

手机版

包起来

确保您的观众总能找到您的主要社交网络对于 Divi 来说是小菜一碟。 只需几个步骤,您就可以调整我们的免费赠品页眉/页脚包之一,以将您的社交媒体图标包含在主菜单中(或您可能想要的任何其他位置)。 祝你好运!

您如何看待主菜单中的社交媒体图标? 你倾向于把它们放在哪里?

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