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

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

让我们开始吧！

预览

桌面

移动的

使用 Divi 主题生成器上传全局标题免费赠品

对于本文，我们将使用 Tennis Club 布局包和页眉/页脚免费赠品。 您可以从 Divi 构建器中下载布局包，并从我们的博客中下载页眉/页脚包。 当您下载它时，文件将作为.zip存档。 确保将它们解压缩，以便将.json文件上传到 Divi。

现在，进入您的 WordPress 仪表板，在Divi – Theme Builder下找到Divi Theme Builder 。 单击页面右上角的上下箭头图标。 这将打开Portability模式，选择Import选项卡，找到您下载的页眉/页脚的.json文件，然后单击Import Divi Theme Builder Templates 。

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

你现在应该在建造者里面。 如果您按照上述说明进行操作，您上传的新标题应该已经就位。

您可能会注意到这里已经有社交图标。 然而，这些社交图标不在Divi主菜单中，而这正是我们今天正在努力的方向。 所以让我们进入它的杂草，好吗？

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

首先，让我们改变行/列结构。 我们想在第 2 部分（带有主页/联系人链接的底部）中找到该行。

我们为本教程选择了两栏结构，但它是最适合您网站的结构。 选择后，进入行设置并导航到设计选项卡。 找到调整大小菜单，然后打开使用自定义装订线宽度。 将 Gutter Width 值设置为 1。您可以输入数字或使用滑块来执行此操作。

单击绿色复选标记以保存您的设置。 然后回到行设置。 这次，选择顶部/第一/左列的设置齿轮。

接下来，导航到“高级”选项卡。 找到自定义 CSS区域并单击进入主元素字段。 在此字段中，您需要添加以下 CSS。

width:80%;

或者

width:80%!important;

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

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

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

完成后，保存您的更改并准备添加和设计您的社交媒体图标。

添加社交媒体关注模块

单击第 2 列中的黑色 +图标以添加新模块并滚动，直到找到社交媒体关注。 插入它。

无论您使用哪种标题，默认的社交媒体图标很可能与您的风格不符。 它们也不会正确定位。 下一步将是正确设置样式和间距。 在社交媒体关注模块设置中，转到设计，然后转到对齐。 选择要放置模块的位置。

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

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

接下来是间距。 真正需要调整的主要内容是上边距。 我们将应用1.5 vw上边距，使其与菜单文本居中。 如果您或多或少想要移动设备，您也可以调整它。

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

向下滚动到背景并选择与您网站设计相匹配的颜色。 同样，请记住这只会更改此特定图标的背景。

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

然后，向下滚动到“设计”选项卡下的“边框”条目，并在其中找到“边框宽度” 。 将此值设置为 3px，然后选择从 Divi 主菜单背景中突出的边框颜色。

此时，您将返回“内容”选项卡并为您希望显示的每个社交网络图标重复这些步骤。 如果您希望此模块中的每个图标共享相同的设计，您只需右键单击您设计的图标并选择复制项目样式。

接下来，右键单击要设置样式的其他网络并选择Paste Item Styles 。

就是这样！ 请务必单击屏幕右下角的“保存”按钮以保存整体布局。 然后，你是安全的X出在右上角的编辑画面。

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

最终结果

这就是您的最终结果应该类似于的。

桌面

移动的

包起来

确保您的受众始终可以找到您的主要社交网络对 Divi 来说是小菜一碟。 只需几步，您就可以调整我们的免费赠品页眉/页脚包之一，将您的社交媒体图标包含在主菜单中（或您可能需要的任何其他位置）。 祝你好运！

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